Google Maps recently got promoted to v3 and there are some major changes in v3 API. With the release of v3 the previous version has been officially deprecated and hence there won’t be any further enhancements in that. I will walk you through the basics on how to get started with Google Map API v3. Before getting started let’s see what major changes does this v3 has.

  • You do not require an API key to use Google Maps.
  • Use of “object literal” to set the properties of the map to be loaded.
  • More easy to use functions.

You will notice these changes only if you are moving from v2 to v3. If you are a newbie to Google Maps, then you need not to worry about moving your code. So lets get started and create a usual “Hello World” program in Google map API v3.

<html>
  <head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
    <script type="text/javascript">
      function load_map() {
        var latlng = new google.maps.LatLng(28.635308, 77.22496);
        var config = {
          zoom: 11,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("mapC"),config);
      }
 
    </script>
  </head>
  <body onload="load_map()">
    <div id="mapC" style="width: 400px; height: 400px;"></div>
  </body>
</html>

So as you notice above, there are very few lines of code which are capable of rendering this Google Map. I have specified the co-ordinates to New Delhi, India and a zoom level 11 that is why the map by default show that as the center . Let’s understand the code step by step.

  • We first included the Google Map API JavaScript file using the Script tag.
  • Now we create the center point using the function google.maps.LatLng, as mentioned I have hardcoded the coordinates to New Delhi, India ‘s latitude and longitude.
  • Next we define the properties of the map to be loaded using the object literal config inside the function load_map(). You can keep whatever name you want to for this object literal.
  • Finally we render the map into the div whose id is mapC , again you can have any ID for the div.

Note:

  • Please specify the width and height of the the div in which the map is to be rendered.
  • Be sure to load the map after the div has been created, just like in the above code we have called the function load_map() onload, which is fired after the page finished loading.

So this is how you can load a map with some predefined coordinates, but what if you want to show the current location of a user on the map ? For example, if a user visits from New York, NY then you probably want the map’s center point as NY instead of showing New Delhi, India.

Now this is where we are going to use the location detection technique with the help of the user’s browser. Please note that this technique depends upon two factors, they are :

  1. Browser should have the ability to detect current location.
  2. User should allow the browser to detect the location on the basis of the IP of the user.

I have already posted about How to get current location in a browser? Not many browsers support this but Firefox, Opera support this functionality fully. Read the post to know more about Location awareness.

Advance Google Map to detect current location

So when we change the above code everything should remain the same but we add is location detecting capabilities . We detect the current coordinates of the user via browser and dynamically create the point and center the map to user’s current location instead of some hardcoded or predefined location. Here is the code on how to do it.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var latitude = '';
  var longitude = ''
  function getLocation(pos)
  {
    latitude = pos.coords.latitude;
    longitude = pos.coords.longitude;
    load_map();
  }
  function unknownLocation(){alert('Could not find location');}
 
  function detect_load(){
    navigator.geolocation.getCurrentPosition(getLocation, unknownLocation);
  }
 
  function load_map() {      
    if(latitude == '' || longitude == '')
      return false;
    var latlng = new google.maps.LatLng(latitude, longitude);
    var config = {
      zoom: 11,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("mapC"),config);
  }
</script>
<input type="button" onclick="detect_load();" value="Load map with my current location" />
<br><br>
<div id="mapC" style="width: 400px; height: 400px;"></div>

And here is the Demo map. So click on the button to load the Map with your current location. It will load successfully if you are using Firefox and you will allow it to share your location.

Hope this helps, stay tuned for more advanced map tutorials.

Stay Digified !!
Sachin Khosla

Share this post:

Related posts:

Default ThumbnailDecoding Art Clokey Google Doodle Default ThumbnailGoogle introduces comic themes for igoogle homepage Default ThumbnailNow search gmail, google reader and buzz from the chrome browser Default ThumbnailHow to install themes for Google talk (gtalk)