Google Maps JavaScript API V3 Examples Google Maps JavaScript API V3 Examples Finnbarr P. Murphy ([email protected]) This post contains a number of examples which use theGoogle Maps JavaScript V3 APIs . I am going assume that you are quite comfortable with JavaScript programming in general and are somewhat familiar with at least Version 2 of the Google Maps JavaScript APIs. In May 2010, version 2 of the Google Maps API was deprecated in favour of version 3. At the same time Street View support, based on HTML rather than on Flash as in version 2, was added to version 3. The version 2 APIs will be supported for at least three years but no new features will be added. There are many significant differences between version 2 and version 3. One of the major changes is that all the G* namespaces were changed to google.maps.*. For example, Gmarker is now google.maps.Marker. Unfortunately, there is no mechanical way to convert code which uses version 2 APIs to use version 3 APIs; the changes are so significant and profuse that manual recoding is required. If you would like an online introductory tutorial to the version 3 APIs, a good one can be found here. A good book on the subject to add to your technical library is Beginning Google Maps API 3 by Gabriel Svennerberg. Example 1 This is a very simple example which uses Geocoder to determine the latitude and longitude of a given address string and StreetViewPanorama to display that location in Street View. <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Example 1 - Google Map JavaScript v3 APIs</title> <style type="text/css"> #map { width: 800px; height: 600px; float: left; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" ></script> <script type="text/javascript"> function init() { var userLocation = 'Ocean Street, Swampscott, MA 01907'; var userPOV = { heading:120, pitch:0, zoom:1}; var geocoder = new google.maps.Geocoder(); geocoder.geocode( {'address': userLocation}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { // var latLng = results[0].geometry.location; new google.maps.StreetViewPanorama(document.getElementById("map"), { position: results[0].geometry.location, pov: user POV, visible:true }); For personnal use only 03-04-2011 Copyright 2004-2011 Finnbarr P. Murphy. All rights reserved. 1/9