Google
Maps
API
Experiments
 Monash
University
 Falculty
of
IT
 Vacation
Scholarship
Project
 
 
 February
2009
 Supervisor:
Dr.
David
Taniar
 Tran
Quoc
Thai CONTENTS
 1.
 Introduction..............................................................................................................................................................................1
 2.
 Google
Maps
API
Key
Registration..........................................................................................................................................1
 3.
 Experiments..............................................................................................................................................................................3
 3.1.
 Example
1:
Finding
Directions.......................................................................................................................................3
 example1.html..........................................................................................................................................................................4
 extlargemapcontrol.js............................................................................................................................................................11
 extlargemapcontrol_packed.js..............................................................................................................................................21
 3.2.
 Example
2:
Displaying
Photos/Wikipedia
Information..............................................................................................22
 example2.html........................................................................................................................................................................23
 3.3.
 Example
3:
Experimenting
Overlaps...........................................................................................................................32
 example3.html........................................................................................................................................................................34
 3.4.
 Example
4:
Finding
Nearest
Bars/Restaurants...........................................................................................................42
 example4.html........................................................................................................................................................................43
 3.5.
 Example
5:
Spreadsheets
Map
Wizard.......................................................................................................................51
 example
5.html.......................................................................................................................................................................52
 3.6.
 Example
6:
Street
View
Animation..............................................................................................................................57
 example6.html........................................................................................................................................................................58
 3.7.
 Example
7:
Reverse
Geocoding
Map...........................................................................................................................83
 example7.html........................................................................................................................................................................84
 3.8.
 Example
8:
Modified
Reverse
Geocoding
Map..........................................................................................................88
 example8.html........................................................................................................................................................................89
 3.9.
 Example
9:
Another
Finding
Nearest
Bars/Restaurants............................................................................................94
 example9.html........................................................................................................................................................................95
 3.10.
 Example
10:
Adding
Markers.....................................................................................................................................104
 example10.html....................................................................................................................................................................105
 4.
 References............................................................................................................................................................................110 1. INTRODUCTION
 Web
developers
use
Google
Maps
API
to
embed
Google
Maps
in
their
web
pages.
It
is
a
code
library
from
which
a
number
 of
maps
applications
can
be
built
using
JavaScript.
 This
paper
provides
some
examples
as
a
result
of
the
Google
Maps
API
experiments
some
of
which
are
borrowed
from
 the
website
[1].

 2. GOOGLE
MAPS
API
KEY
REGISTRATION
 • Go to the link: http://code.google.com/apis/maps/signup.html • Sign in a Google Account and Agree to Google Maps Terms of Service. The number of keys that can be obtained under a single account is unlimited. • Simply register a domain name. The key which is registered for a domain will also be valid for its subdomains and all URLs on hosts in those domains, and all ports on those hosts.  For example, if we sign up for a key using http://www.mygooglemapsite.com/, our key is valid for:  http://www.mygooglemapsite.com/  http://www.mygooglemapsite.com/mysite  However, this key will not be valid for:  http://mygooglemapsite.com/  http://host1.mygooglemapsite.com/  http://host2.mygooglemapsite.com/mysite  A key which is registered for http://mygooglemapsite.com/ will be valid for all URLs mentioned above.  A key for http://www.mygooglemapsite.com/ will not be valid if the site is accessed by IP address (eg. http://10.1.2.3/) or a parked domain.  The key check is skipped when it is being developed on a local drive (file://)  The function alert(window.location.host) can be used to obtain the domain for which the key should be registered. 1 • Copy and paste the code in the examples into a text editor (eg. Notepad). • Find this line of code and replace “abcdefg” part by the registered key: <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg&sensor=tru e_or_false" type="text/javascript"></script> • Rename and save it as an html file. • Upload to a server which domain name has been registered for the key. • For more information, please refer to [3]. 2 3. EXPERIMENTS
 3.1. EXAMPLE
1:
FINDING
DIRECTIONS
 • URL: http://www.geocities.com/quocthai0512/example1.html • Description:  This example allows users to enter two addresses (e.g. source and destination) and select the language to get directions.  The formatted directions will be displayed on the left column whereas the right column will display the corresponding map and polylines.  The markers A and B in the screenshot denote the starting and ending points.  Users may click on one of the numbers on the left column to have a closer view of different points. The information window can also be turned off by users.  Next, a 3-D map control replaces the normal map control used in later examples. This map control is added by using two external javascript files called ‘extlargemapcontrol_packed.js’ and ‘extlargemapcontrol.js’ whose codes will be given later in this section.  Map type control is used to enable users to select different map types (map, satellite or hybrid).  A search textbox is added as an overlay of this map. As users enter an address into the textbox, the address will be set center to this map. • Screenshots: Figure 1 – Finding Directions 3 EXAMPLE1.HTML
 <html> <head> <style type="text/css"> @import url("http://www.google.com/uds/css/gsearch.css"); @import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css"); body { font-family: Verdana, Arial, sans serif; font-size: 11px; margin: 2px; } table.directions th { background-color:#EEEEEE; } img { color: #000000; } </style> <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAtWCOvsQE3_q3_qb8kEaDNhQxMJdENJhu2lIlmorIKvgW5qmmvxQAuh2ea1AGv- Y-VG3o8b6wZyHyJA" type="text/javascript"></script> <script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0" type="text/javascript"></script> <script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script> <script type="text/javascript"> document.write('<script type="text/javascript" src="extlargemapcontrol'+(document.location.search.indexOf('packed')>- 1?'_packed':'')+'.js"><'+'/script>'); </script> <script type="text/javascript"> var map; var gdir; var geocoder = null; var addressMarker; function initialize() { if (GBrowserIsCompatible()) { 4 map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(-37.91170058826019,145.1345443725586), 14); var extLargeMapControl = new ExtLargeMapControl(); map.addControl(extLargeMapControl); map.addControl(new GMapTypeControl()); map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20))); var myPano = new GStreetviewPanorama(document.getElementById("pano")); GEvent.addListener(myPano, "error", handleNoFlash); svOverlay = new GStreetviewOverlay(); map.addOverlay(svOverlay); GEvent.addListener(map,"click", function(overlay,latlng) { myPano.setLocationAndPOV(latlng); }); gdir = new GDirections(map, document.getElementById("directions")); GEvent.addListener(gdir, "load", onGDirectionsLoad); GEvent.addListener(gdir, "error", handleErrors); } } function handleNoFlash(errorCode) { if (errorCode == FLASH_UNAVAILABLE) { alert("Error: Flash doesn't appear to be supported by your browser"); return; } } GSearch.setOnLoadCallback(initialize); function setDirections(fromAddress, toAddress, locale) { gdir.load("from: " + fromAddress + " to: " + toAddress,{ "locale": locale }); } function handleErrors(){ if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS) alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code); else if (gdir.getStatus().code == G_GEO_SERVER_ERROR) alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code); else if (gdir.getStatus().code == G_GEO_MISSING_QUERY) alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n 5 Error code: " + gdir.getStatus().code); else if (gdir.getStatus().code == G_UNAVAILABLE_ADDRESS) <--- Doc bug... this is either not defined, or Doc is wrong // alert("The geocode for the given address or the route for the given directions query cannot be returned due to legal or contractual reasons.\n Error code: " + gdir.getStatus().code); else if (gdir.getStatus().code == G_GEO_BAD_KEY) alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code); else if (gdir.getStatus().code == G_GEO_BAD_REQUEST) alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code); else alert("An unknown error occurred."); } function onGDirectionsLoad(){ // Use this function to access information about the latest load() // results. // e.g. // document.getElementById("getStatus").innerHTML = gdir.getStatus().code; } </script> </head> <body onload="initialize()" onunload="GUnload()"> <form action="#" onsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false"> <table> <tr> <th align="right">From:&nbsp;</th> <td><input type="text" size="25" id="fromAddress" name="from" value=""/></td> <th align="right">&nbsp;&nbsp;To:&nbsp;</th> <td align="right"><input type="text" size="25" id="toAddress" name="to" value="" /></td> </tr> <tr> <th>Language:&nbsp;</th> <td colspan="3"> <select id="locale" name="locale"> <option value="en" selected>English</option> <option value="fr">French</option> <option value="de">German</option> <option value="ja">Japanese</option> <option value="es">Spanish</option> 6 </select> <input name="submit" type="submit" value="Get Directions!" /> </td> </tr> </table> </form> <br /> <table class="directions"> <tr><th>Formatted Directions</th><th>Map</th></tr> <tr> <td valign="top" rowspan="2"><div id="directions" style="width: 275px"></div></td> <td valign="top"><div id="map_canvas" style="width: 500px; height: 300px"></div></td> </tr> <tr> <td valign="top"><div id="pano" style="width: 500px; height: 200px"></div></td> </tr> </table> </body> </html> 7 class GMap2 Instantiate class GMap2 in order to create a map. This is the central class in the API. Everything else is auxiliary. Constructor: GMap2(container:Node, opts?:GMapOptions) Description: Creates a new map inside of the given HTML container, which is typically a DIV element. If no set of map types is given in the optional argument opts.mapTypes, the default set G_DEFAULT_MAP_TYPES is used. If no size is given in the optional argument opts.size, then the size of the container is used. If opts.size is given, then the container element of the map is resized accordingly. See class GMapOptions. Note: a Map needs to be centered before it can be used. You should immediately call GMap2.setCenter() to initialize a map created with this constructor. Examples: map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(-37.91170058826019,145.1345443725586), 14); Method: addControl(control:GControl, position?:GControlPosition) Return value: None Description: Adds the control to the map. The position on the map is determined by the optional position argument. If this argument is absent, the default position of the control is used, as determined by the GControl.getDefaultPosition() method. A control instance must not be added more than once to the map. Examples: map.addControl(extLargeMapControl); // a large pan/zoom control as now used on Google Maps. Appears in the top left corner of the map. map.addControl(new GMapTypeControl()); // Add functionality to change the GMapType currently used by the map within the Google Maps API. // By default, a GMapTypeaControl displays a set of standard map types: // G_NORMAL_MAP displays the normal, default 2D tiles of Google Maps // G_SATELLITE_MAP displays photographic tiles // G_HYBRID_MAP displays a mix of photographic tiles and a tile layer for prominent features (roads, city names) map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20))); //search textbox 8