• Create a basic Map using Google Map API

    Posted on May 27, 2012 by in Javascript, Other Programming

    This tutorial is designed to show the first time user how to create a Google Map using the Google Maps API. The first step for using google maps is obtaining a API_KEY, developers can obtain a key here

    <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; margin: 0; padding: 0 }
          #map_canvas { height: 100% }
        </style>
        <script type="text/javascript"
          src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
        </script>
        <script type="text/javascript">
          function initialize() {
            var myOptions = {
              center: new google.maps.LatLng(40.748039,-73.985753),
              zoom: 16,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
    
            var map = new google.maps.Map(document.getElementById("map_canvas"),
                myOptions);
          }
        </script>
      </head>
      <body onload="initialize()">
        <div id="map_canvas" style="width:100%; height:100%"></div>
      </body>
    </html>
    

    The key section in the above code is

    <script type="text/javascript"
          src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
    

    Once you obtain your API key replace YOUR_API_KEY with your API key, Sensor is required, it indicates whether this application uses a sensor (such as a GPS locator) to determine the user’s location. If you are unsure, just set it to false for this example.

    Once you change the values and run the above code, you should be able see map centered at Empire State Building, New York, NY.

    All the code is code is doing is calling and initialize funcion on its body onload, where we are setting mapoptions in the myoptions variable. “40.448841,-74.523268” are latitude and longitude values of empire state building.we are also setting the zoom level and maptype, they will discussed in other articles in more detail ,you can leave them as it is for this example. We are using document.getElementById(“map_canvas”) to get the div element and assigning a map to it.

    Now, that you have your first google map up and running, let us put a little step further and place a marker at the empire state building. Placing a marker is as simple the creating the map. Just put the code below the var map=…

    	var location = new google.maps.LatLng(40.748039,-73.985753);
                var marker = new google.maps.Marker({
                    position: location,
                    map: map
                });
    
    

    To see the working demo of the above code click on the link below.

    NOTE : If you download the source from the example, please do change the API KEY.

    Be Sociable, Share!
      Post Tagged with ,

    Written by

    Vanamali Juvvadi is a Web enthusiast and loves all things design and technology. Founded qnownow with a group of friends to share anything/everything they know/find on the internet.

    View all articles by

    Email : [email protected]

    Leave a Reply