Migrate Google Maps from V2 to V3

Google maps v2 has been deprecated since May 19, 2010 and will stop working on May 19, 2013, so here is a little guide on how to migrate.

On V3 we don’t need an API key, but it’s useful to keep track of your API calls (25,000 free), so to get the API key, log into https://code.google.com/apis/console/, click on services and activate google maps v3, once is done click on API access on the left, and go to Simple API at the very bottom, then click on edit allow referers, and set up like *.mysite.com/* that will allow all your subdomains and folders on your site.

Now that you have your API key, is time to replace the old URL, by the new one:

  1.  
  2. <!– V2 –>
  3.  
  4. "http://maps.google.com/maps?file=api&amp;v=2&amp;key=$yourKey"
  5.  
  6. <!– V3 –>
  7.  
  8. "https://maps.googleapis.com/maps/api/js?key=$youKeu&v=3&sensor=true""text/javascript"
  9.  
  10. <!– "sensor" is required an indicates if a device (like GPS) is used to determine the user’s location –>
  11.  

First get rid of the old unload function, is not needed anymore.

  1.  
  2. /* V2 */

Also get rid of old code used to load Vector Markup Language(VML) just needed for IE, VML has been deprecated on IE9 in favor Scalable Vector Graphic (SVG)

  1.  
  2. <!DOCTYPE html>
  3. "en" xmlns:v="urn:schemas-microsoft-com:vml>
  4. <head>
  5.         <style type="">
  6.         v\:* {
  7.         behavior:url(#default#VML);
  8.         }
  9.         </style>

Now lets load the map itself.

  • First take out GBrowserIsCompatible is not supported anymore.
  • Replace GMmap2 by google.maps.Map.
  • GLatLng has been replaced by google.maps.LatLng.
  • Now take out addControl, setMapType, now all of these are passed as an object when map is created
  • For V2 we use these map types G_NORMAL_MAP,G_SATELLITE_MAP,G_HYBRID_MAP on V3 they have been replace by google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID ,google.maps.MapTypeId.TERRAIN
  1.  
  2. /* V2 */‘map’/*zoomLevel*/ );
  3.         map.setMapType( G_NORMAL_MAP );
  4.         //map.setMapType( G_SATELLITE_MAP );
  5.         //map.setMapType( G_HYBRID_MAP );
  6. }
  7.  
  8. /* V3 */‘map’ ), mapOptions);
  9.  

In V3 creating custom icons is a lot easier, instead of creating a special icon object now we can just pass image as url.

  1.  
  2. /* v2 */"http://labs.google.com/ridefinder/images/mm_20_red.png""http://labs.google.com/ridefinder/images/mm_20_shadow.png"/* v3 */‘Testing Icon’,
  3.         icon:‘icon.jpg’‘shadow.jpg’/* icon and shadow can be just a string containg  the image file url, for must complex icons just pass and object with all the properties
  4.   var image = {
  5.     url: ‘images/icon.png’,
  6.     size: new google.maps.Size(20, 32),
  7.     origin: new google.maps.Point(0,0),
  8.     anchor: new google.maps.Point(0, 32)
  9.   };
  10. more info: https://developers.google.com/maps/documentation/javascript/overlays?hl=en#ComplexIcons
  11. */
  12.  
  13.  

clearOverlays has been removed from v3, so if you want remove all your markers from your map, now you have to manually keep track your markers an remove them.

  1.  
  2. /* v2 */
  3. map.clearOverlays();
  4.  
  5. /* v3 */// Global array to store marker
  6. // store a reference to the marker each time you create one
  7.  
  8. // delete all the markers on the array

To create overlay on Google maps V3 now we have to use google.maps.Polyline inseatd of GPolyline.

  1.  
  2. /* V2 *//* V3 */"#FF0000",strokeOpacity: 1.0,strokeWeight: 2});
  3. area.setMap(map);
  4.  
  5.  

On google maps v3 is a lot easier to create custom controls, now we only create a div element an insert it on Google maps.

  1.  
  2. /* V2 */
  3.  
  4. /* we used to create the custom control like */"div"‘myId’‘<a href="save.php" ><img src="icon_save.gif" /></a>’/* we used to add to the map, after it was created */
  5.  
  6. /* v3 */"div"); /* To change look, just add some style like container.style.border=” */‘myId’‘<a href="save.php" ><img src="icon_save.gif" /></a>’; /* Custom HTML code */

One thought on “Migrate Google Maps from V2 to V3

Leave a Reply

Your email address will not be published. Required fields are marked *