google maps api

Google Maps API

CS1655: Secure Data Management and Web Applications

Spring 2010

First: Sign up for a key

• http://code.google.com/apis/maps/signup.html

Simple Map on a webpage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps JavaScript API Example: Simple Map</title>

<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABCDEF" type="text/javascript"></script>

<script type="text/javascript"> function initialize() {

if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); map.setUIToDefault();

}} </script> </head> <body onload="initialize()" onunload="GUnload()"> <div id="map_canvas"

style="width: 500px; height: 300px"></div> </body> </html>

Simple Map on a webpage (cont’d)

<script src="http://maps.google.com/maps?file=api&

v=2&sensor=true_or_false&key=ABCDEF"

type="text/javascript">

</script>

Specify if the application uses a sensor to determine the user’s location

Specify the key you got from Google maps








}

} </script>

Obtain a reference to the html DOM object named map_canvas








}

} </script>

Specifies the central location of the displayed map

The latitude and longitude of the location

The zoom level








}

} </script> Sets up the map’s user interface to a default configuration


<body onload="initialize()" onunload="GUnload()">

<div id="map_canvas"

style="width: 500px; height: 300px">

</div> </body>

Execute the function which loads the map when the body of the html page is loaded





</div> </body>

Utility function designed to prevent memory leaks





</div> </body>

Container to put the map in





</div> </body>

Implicitly specify the size of the map

Here is my map

• http://www.cs.pitt.edu/~lorym/map.html

Markers

function initialize() {var map = new GMap2(document.getElementById("map_canvas"));map.setCenter(new GLatLng(40.44,-79.996), 13);// Add 10 markers to the map at random locationsvar bounds = map.getBounds();var southWest = bounds.getSouthWest();var northEast = bounds.getNorthEast();var lngSpan = northEast.lng() - southWest.lng();var latSpan = northEast.lat() - southWest.lat();for (var i = 0; i < 10; i++) {var point = new GLatLng(southWest.lat() + latSpan * Math.random(),

southWest.lng() + lngSpan * Math.random());map.addOverlay(new GMarker(point));

}}

Markers (cont’d)

// Add 10 markers to the map at random locationsvar bounds = map.getBounds();var southWest = bounds.getSouthWest();var northEast = bounds.getNorthEast();var lngSpan = northEast.lng() - southWest.lng();var latSpan = northEast.lat() - southWest.lat();for (var i = 0; i < 10; i++) {

var point = new GLatLng(southWest.lat() + latSpan * Math.random(),


} }The coordinates of the current viewport (i.e. window) of the map

Markers (cont’d)




} }Get the southwest point of the bounding box of the map

Markers (cont’d)




} }Get the northeast point of the bounding box of the map

Markers (cont’d)




} }Get the difference in longitudes between the points

Markers (cont’d)




} }Get the difference in latitudes between the points

Markers (cont’d)




} }Generate the latitude and longitude of a random point on the map

Markers (cont’d)




} }Adds to the map a marker pointing to this point

View this example:

• http://www.cs.pitt.edu/~lorym/markers.html

Zoom Levels

• The resolution of the current view

• Vary between 0 – 20

– 0 is the whole world in one view

– 20 shows individual buildings in satellite mode

• GMap2 object’s getZoom() method can be used to retrieve the current zoom level.

Example: new zoom level

map.setCenter(new GLatLng(40.44,-79.996), 16);

http://www.cs.pitt.edu/~lorym/markers_16.html

Map types

• The following map types are commonly used in the Google Maps API:– G_NORMAL_MAP displays the default road map view.

– G_SATELLITE_MAP displays Google Earth satellite images. *

– G_HYBRID_MAP displays a mixture of normal and satellite views.*

– G_DEFAULT_MAP_TYPES contains an array of the above three types, useful for iterative processing.

– G_PHYSICAL_MAP displays a physical map based on terrain information.

Setting the map type

var map = new GMap2(document.getElementById("map_canvas"));map.setMapType(G_SATELLITE_MAP);

http://www.cs.pitt.edu/~lorym/map_sat.html

Info windows

map.openInfoWindow(map.getCenter(),

document.createTextNode("Welcome to Pittsburgh :)"));

http://www.cs.pitt.edu/~lorym/map_c.html

Geocoding

• Geocoding is getting the latitude and longitude of a location given its address.

• Why?

– Users do not know the latitude and longitude of their house but they know their address

• How?

– Using an object of class GClientGeocoder

Geocoding Example

if (GBrowserIsCompatible()) {var map = new GMap2(document.getElementById("map_canvas"));var address = "210 S Bouquet St, Pittsburgh, PA 15213";var geocoder = new GClientGeocoder();geocoder.getLatLng( address, function(latlng) {

if ( !latlng) {alert(address +"not found");

} else { map.setCenter(latlng, 16);

map.openInfoWindow(map.getCenter(),document.createTextNode("Sennott Square is here!!"));

}});

map.setUIToDefault();} }

Geocoding Example (cont’d)

if (GBrowserIsCompatible()) {var map = new GMap2(document.getElementById("map_canvas"));

var address = "210 S Bouquet St, Pittsburgh, PA 15213";var geocoder = new GClientGeocoder();geocoder.getLatLng( address, function(latlng) {




}});


Specify a human-readable address


if (GBrowserIsCompatible()) {var map = new GMap2(document.getElementById("map_canvas"));var address = "210 S Bouquet St, Pittsburgh, PA 15213";

var geocoder = new GClientGeocoder();geocoder.getLatLng( address, function(latlng) {




}});


Create an object of type GClientGeocoder


if (GBrowserIsCompatible()) {var map = new GMap2(document.getElementById("map_canvas"));var address = "210 S Bouquet St, Pittsburgh, PA 15213";var geocoder = new GClientGeocoder();

geocoder.getLatLng( address, function(latlng) { if ( !latlng) {

alert(address +"not found");} else {

map.setCenter(latlng, 16);map.openInfoWindow(map.getCenter(),

document.createTextNode("Sennott Square is here!!"));}

});map.setUIToDefault();

} }Call the function at google that returns the latitude and longitude of a given address


if (GBrowserIsCompatible()) {var map = new GMap2(document.getElementById("map_canvas"));var address = "210 S Bouquet St, Pittsburgh, PA 15213";var geocoder = new GClientGeocoder();

geocoder.getLatLng( address, function(latlng) { if ( !latlng) {

alert(address +"not found");} else {

map.setCenter(latlng, 16);map.openInfoWindow(map.getCenter(),

document.createTextNode("Sennott Square is here!!"));}

});map.setUIToDefault();

} }Pass an address and a return function


if (GBrowserIsCompatible()) {var map = new GMap2(document.getElementById("map_canvas"));var address = "210 S Bouquet St, Pittsburgh, PA 15213";var geocoder = new GClientGeocoder();geocoder.getLatLng( address, function(latlng) {




}});

map.setUIToDefault();} } If address is not found then alert

Otherwise center the map on this address and display the information

Event Listeners

• You can attach an event listener to a marker so that when the user clicks on it, a function will execute

Event Listener Example

• Recall:

Event Listener Example (cont’d)

function createMarker(latlng) {

var marker = new GMarker(latlng);

GEvent.addListener(marker,"click", function() {

var myHtml = "I am at " + latlng.lat() + " and " + latlng.lng();

map.openInfoWindowHtml(latlng, myHtml);

});

return marker;

}

Create a marker for the location







});

return marker;

}

Add a listener to execute a function when the user clicks on the marker







});

return marker;

}

Message to display when the user clicks on the marker







});

return marker;

}

Action to do: open an information window in html on pointing to the location with the message myHtml







});

return marker;

}

Return the marker created


• Before adding the marker, use the createMarker function to create the marker.

• http://www.cs.pitt.edu/~lorym/mark_plus.html

Setting the size using Javascript

var map = new GMap2(document.getElementById("map_canvas"),

{ size: new GSize(640,320) }

);

Gcontrol object: built-in controls

• GLargeMapControl3D –– a large pan/zoom control as now used on Google Maps. Appears in the

top left corner of the map by default.

• GLargeMapControl –– a simpler large pan/zoom control. Appears in the top left corner of the

map by default.

• GSmallMapControl –– a smaller pan/zoom control. Appears in the top left corner of the map

by default.

• GSmallZoomControl3D –– a small zoom control (with no panning controls) as now used on

Google Maps.

• GSmallZoomControl –– a small zoom control (no panning controls) used in the small map

blowup windows used to display driving directions steps on Google Maps.

Gcontrol object: built-in controls

• GScaleControl –– a map scale

• GMapTypeControl –– buttons that let the user toggle between map types (such as

Map and Satellite)

• GHierarchicalMapTypeControl –– a selection of nested buttons and menu items for placing many

map type selectors.

• GOverviewMapControl –– a collapsible overview map in the corner of the screen

• GNavLabelControl –– a dynamic label indicating the "address" of the current

viewport, appropriate to zoom level.

No controls

• Without

map.setUIToDefault();

Example of controls:

• map.addControl(new GSmallMapControl());

Example of controls:

• map.addControl(new GLargeMapControl());

Outline

• Basic Google API– Signing up for a Google API key– Simple map example– Markers– Zoom Levels– Map Types– Information windows– Geocoding– Event listeners– Setting the map size– Map controls

– Reverse Geocoding– Traffic overlay– Directions

• Creating a Store Locator with PHP, MySql and Google Maps

Follow the basic API Examples

http://code.google.com/apis/ajax/playground/?exp=maps

Reverse Geocoding

• Given a latitude and longitude pair, find the human readable address.

• GClientGeocoder.getLocations() – Geocoding if passed a String

– Reverse Geocoding if passed a GLatLng object

• The geocoder will attempt to find the closest addressable location within a certain tolerance – No match G_GEO_UNKNOWN_ADDRESS(602)

Reverse Geocoding example

var map;var geocoder;var address;

function initialize() {map = new GMap2(document.getElementById("map_canvas"));map.setCenter(new GLatLng(40.730885,-73.997383), 15);map.addControl(new GLargeMapControl);GEvent.addListener(map, "click", getAddress);geocoder = new GClientGeocoder();

} Adding a Listener to the map. The action is to call the function getAddress

Reverse Geocoding example (cont’d)

function getAddress(overlay, latlng) {if (latlng != null) {

address = latlng;geocoder.getLocations(latlng,showAddress);

}

}

Contains the latitude and longitude of the point that the user clicked on


function getAddress(overlay, latlng) {if (latlng != null) {

address = latlng;geocoder.getLocations(latlng,showAddress);

}

}

Call the getLocations function at google maps to translate the latlng pair to a human readable address. Call showAddress function when done.


function showAddress(response) {map.clearOverlays();if (!response || response.Status.code != 200) {

alert("Status Code:" + response.Status.code);} else {

place = response.Placemark[0];point = new

GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]);marker = new GMarker(point);map.addOverlay(marker);

Clear the map from all markers and overlays.






If no response or unsuccessful reverse geocoding






Get the first match






Construct a Glatlng object from the coordinates of the returned point.






Create a marker for this point and add it to the map


marker.openInfoWindowHtml('<b>orig latlng:</b>' + response.name + '<br/>' + '<b>latlng:</b>' + place.Point.coordinates[1] + "," +

place.Point.coordinates[0] + '<br>' +'<b>Status Code:</b>' + response.Status.code + '<br>' +'<b>Status Request:</b>' + response.Status.request + '<br>' +'<b>Address:</b>' + place.address + '<br>' +'<b>Accuracy:</b>' + place.AddressDetails.Accuracy + '<br>' +'<b>Country code:</b> ' +

place.AddressDetails.Country.CountryNameCode);}

}

Attach information to this marker





}

Display the latitude and longitude pair of the original point that the user clicked on





}

Display the latitude and longitude of the point to which the address was calculated for.





}

Display the status code of this call. It should be 200 if the call was successful.





}

Display the type of request this was. It should be geocode in this example.





}

Display the address calculated





}

Display the accuracy of the address calculated0 (address unknown) – 9 (building or property address)





}

Display the country where this point is located in.

Traffic overlay

Traffic overlay (cont’d)

var map;var trafficInfo;

function initialize() {map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(49.496675,-102.65625), 3); var trafficOptions = {incidents:true};trafficInfo = new GTrafficOverlay(trafficOptions);map.addOverlay(trafficInfo);

}Adds traffic overlay to the map

Directions

• Using the GDirections object that requests and receives direction results using either query strings or lat lng pairs

• Directions can be displayed as

– A polyline drawing the route on the map

– As a series of textual description within a <div> element

– Both a polyline and textual description

Directions Example

Directions Example Code


var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(42.351505,-71.094455), 15); var directionsPanel = document.getElementById("route"); var directions = new GDirections(map, directionsPanel); directions.load("from: 210 S Bouquet St, Pittsburgh, PA 15213 to:

Pittsburgh International Airport, Pittsburgh, PA 15231"); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 70%; height: 480px; float:left;

border: 1px solid black;"></div> <div id="route" style="width: 25%; height:480px; float:right; border;

1px solid black;"></div>

Directions Example Code (cont’d)






Create a GDirections Object and register a map and a <div> to it. The directions returned will be displayed in both the map as a polyline and in the directionsPanel as text directions.

Directions Example Code (cont’d)






Calling the load function with the from address and to address as a text string.

Travel Modes

• By default, driving directions• Passing a GTravelMode when calling the Directions.load()

method. – G_TRAVEL_MODE_DRIVING indicates standard driving

directions using the road network– G_TRAVEL_MODE_WALKING requests walking directions via

pedestrian paths & sidewalks (where available.)

• Note: Walking directions are only supported if you have supplied a <div> in the GDirections constructor; – this <div> is used to display a warning to the user in the

returned turn-by-turn textual directions. – If you do not have such a <div>, a request for walking directions

will return an error.

To set the Travel Mode

directions.load(" from: 210 S Bouquet St, Pittsburgh, PA 15213 to: Pittsburgh International Airport, Pittsburgh, PA 15231 ", {travelMode:G_TRAVEL_MODE_WALKING});

Loading Directions

• Directions are requested using the GDirections.load() method. – a query string – a set of optional GDirectionsOptions

• locale: the language to use for returning the results• travelMode: the method of transportation to use when calculating

results.• avoidHighways : highways should be avoided when computing

directions.• getPolyline : return polyline data for drawing the returned

directions. By default, the GDirections object only returns polylinedata if there is a map object to display it.

• getSteps : the directions object should return textual directions, even if no <div> panel is supplied to display these directions.

• preserveViewport : the map shouldn't automatically center and zoom to the bounding box of the returned directions; instead, the map will remain centered on the current viewport.

Outline

• Basic Google API

• Creating a Store Locator with PHP, MySql and Google Maps

– Step 1: Storing the Store information

– Step 2: Geocode the store addresses

– Step 3: Find the closest stores

– Step 4: display a map with the stores

– Output

Creating a Store Locator with PHP, MySql and Google Maps

MySqlDatabase

Closest Store to my address ?

Google Maps

Step 1: Storing the Store information

• Create a markers relation with the following attributes:

– id: primary key

– name: store name

– address: human readable address

– lat: the latitude of the store location

– lng: the longitude of the store location

• Populate the relation with the store data

Step 2: Geocode the store addresses


<?phprequire("phpsqlgeocode_dbinfo.php"); define("MAPS_HOST", "maps.google.com"); define("KEY", "abcdefg"); // Opens a connection to a MySQL server $connection = mysql_connect("localhost", $username, $password); if (!$connection) { die("Not connected : " . mysql_error()); } // Set the active MySQL database $db_selected = mysql_select_db($database, $connection); if (!$db_selected) { die("Can\'t use db : " . mysql_error()); }

// Select all the rows in the markers table $query = "SELECT * FROM markers WHERE 1"; $result = mysql_query($query); if (!$result) { die("Invalid query: " . mysql_error()); }

Connect to a mysql database from php


<?phprequire("phpsqlgeocode_dbinfo.php"); define("MAPS_HOST", "maps.google.com"); define("KEY", "abcdefg"); // Opens a connection to a MySQL server $connection = mysql_connect("localhost", $username, $password); if (!$connection) { die("Not connected : " . mysql_error()); } // Set the active MySQL database $db_selected = mysql_select_db($database, $connection); if (!$db_selected) { die("Can\'t use db : " . mysql_error()); }

// Select all the rows in the markers table $query = "SELECT * FROM markers WHERE 1"; $result = mysql_query($query); if (!$result) { die("Invalid query: " . mysql_error()); }

Run a query that selects all the stores from the database.

Geocode the store addresses (cont’d)

// Initialize delay in geocode speed $delay = 0; $base_url = "http://". MAPS_HOST ."/maps/geo?output=xml". "&key=". KEY; // Iterate through the rows, geocoding each address while ($row = @mysql_fetch_assoc($result)) {

$geocode_pending = true; while ($geocode_pending) {

$address = $row["address"]; $id = $row["id"]; $request_url = $base_url . "&q=" . urlencode($address); $xml = simplexml_load_file($request_url) or die("url not loading");$status = $xml->Response->Status->code;

URL of the geocoder we are using. We are specifying that we expect the output to be xml.





Fetch the data and read it row by row.





Get the address and the id of the row





Setup the URL with the address in it.





Load the xml file with the URL we setupIf the file does not load, halt.If the loading is successful, check the returned status code.


if (strcmp($status, "200") == 0) { // Successful geocode$geocode_pending = false;$coordinates = $xml->Response->Placemark->Point->coordinates; $coordinatesSplit = split(",", $coordinates); // Format: Longitude, Latitude, Altitude $lat = $coordinatesSplit[1]; $lng = $coordinatesSplit[0]; $query = sprintf("UPDATE markers " . " SET lat = '%s', lng = '%s' " . " WHERE id = '%s' LIMIT 1;", mysql_real_escape_string($lat), mysql_real_escape_string($lng), mysql_real_escape_string($id)); $update_result = mysql_query($query); if (!$update_result) {

die("Invalid query: " . mysql_error());}

} Check the returned status code. 200 successful geocoding




} Get the returned coordinates and split them to separate the latitude and longitude




} Get only the latitude and longitude. We are not interested in the altitude




} Setup the sql statement to update the latitude and longitude attributes of a store location/marker in the database.




} Run the update statement and do error checking.


else if (strcmp($status, "620") == 0) { // sent geocodes too fast $delay += 100000; }

else { // failure to geocode$geocode_pending = false; echo "Address " . $address . " failed to geocoded. "; echo "Received status " . $status . " \n"; } usleep($delay); }

}?>Status code 620 means that we sent this geocode request too fast. So we try again.


else if (strcmp($status, "620") == 0) { // sent geocodes too fast $delay += 100000; }

else { // failure to geocode$geocode_pending = false; echo "Address " . $address . " failed to geocoded. "; echo "Received status " . $status . " \n"; } usleep($delay); }

}?>Any other status code means that we cannot geocode this address so we wait for delay before trying to geocode the next row.

Remember!!

• The maximum geocoder rate is 15,000 queries per day based on your IP address.

• Status code 602 is returned if you attempt to query at a faster rate than that.

Step 3: Find the store locations


<?php require("phpsqlsearch_dbinfo.php"); // Get parameters from URL $center_lat = $_GET["lat"]; $center_lng = $_GET["lng"]; $radius = $_GET["radius"]; // Start XML file, create parent node $dom = new DOMDocument("1.0"); $node = $dom->createElement("markers"); $parnode = $dom->appendChild($node); // Opens a connection to a mySQL server$connection=mysql_connect (localhost, $username, $password); if (!$connection) { die("Not connected : " . mysql_error()); } // Set the active mySQL database$db_selected = mysql_select_db($database, $connection); if (!$db_selected) { die ("Can\'t use db : " . mysql_error()); }

Stores the mysql username, password and such



Latitude, longitude and radius of where is the user’s location are supplied via HTTP GET.



We are outputting XML so setup the root node

Step 3: Find the closest stores


Connect to the database.

SQL statement to find the closest stores to an address

SELECT id, ( 3959 * acos( cos( radians(37) ) * cos( radians( lat ) ) * cos( radians( lng ) - radians(

-122) ) + sin( radians(37) ) * sin( radians( lat ) ) ) ) AS distance

FROM markers

HAVING distance < 25

ORDER BY distance

LIMIT 0 , 20;

Latitude of the user’s location

Longitude of the user’s location

Number of miles to search within


// Search the rows in the markers table $query = sprintf("SELECT address, name, lat, lng, ( 3959 *

acos( cos( radians('%s') ) * cos( radians( lat ) ) * cos( radians( lng ) - radians('%s') ) + sin( radians('%s') ) * sin( radians( lat ) ) ) ) AS distance FROM markers HAVING distance < '%s' ORDER BY distance LIMIT 0 , 20", mysql_real_escape_string($center_lat), mysql_real_escape_string($center_lng), mysql_real_escape_string($center_lat), mysql_real_escape_string($radius));

$result = mysql_query($query); if (!$result) { die("Invalid query: " . mysql_error()); }

The query that we just saw.


header("Content-type: text/xml"); // Iterate through the rows, adding XML nodes for each while ($row = @mysql_fetch_assoc($result)){

$node = $dom->createElement("marker"); $newnode = $parnode->appendChild($node); $newnode->setAttribute("name", $row['name']); $newnode->setAttribute("address", $row['address']); $newnode->setAttribute("lat", $row['lat']); $newnode->setAttribute("lng", $row['lng']); $newnode->setAttribute("distance", $row['distance']);

} echo $dom->saveXML(); ?> Create an XML node for each row.




} echo $dom->saveXML(); ?> Add the attributes for this node




} echo $dom->saveXML(); ?>

Output this XML document

Step 4: display a map with the stores


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>Google Maps AJAX + MySQL/PHP Example</title> <script src="http://maps.google.com/maps?file=api&v=2&key=abcdef"

type="text/javascript"></script><script type="text/javascript"> //<![CDATA[ var map; var geocoder; function load() {

if (GBrowserIsCompatible()) { geocoder = new GClientGeocoder(); map = new GMap2(document.getElementById('map')); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(40, -100), 4);

} }

HTML Doctype and headers







} }

Using Google maps API V2 with key=abcdef







} }

Initialize a GClientGeocoder to geocode the user’s address.

Initialize a map around latlng ( 40,-100) with 2 controllers in the div location called ‘map’

Step 4: display a map with the stores (cont’d)

function searchLocations() { var address = document.getElementById('addressInput').value; geocoder.getLatLng(address, function(latlng) {

if (!latlng) { alert(address + ' not found'); } else {

searchLocationsNear(latlng); } });

}function searchLocationsNear(center) {

var radius = document.getElementById('radiusSelect').value; var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;

Get the address from the textfield







Geocode the address entered by the user. If successful call searchLocationsNear(latlng)







Once the geocoding is successful call this function. Get the selected option for the radius

Run the php file we wrote in Step 3 with the computed coordinates and the radius

Step 4: searchLocationsNear(center) (cont’d)

GDownloadUrl(searchUrl, function(data) {

var xml = GXml.parse(data);

var markers = xml.documentElement.getElementsByTagName('marker');

map.clearOverlays();

var sidebar = document.getElementById('sidebar');

sidebar.innerHTML = '';

if (markers.length == 0) {

sidebar.innerHTML = 'No results found.';

map.setCenter(new GLatLng(40, -100), 4);

return; }

var bounds = new GLatLngBounds();

Parse the xml data outputted by the php file











return; }


Read the markers tags











return; }


Clear the map to prepare it for the new markers











return; }


Get a reference to the <div> element in the document called ‘sidebar’ to put the store information in











return; }


Clear the text inside this <div>











return; }


No results returned tell the user via the sidebar and reset the map to original viewport











return; }


Create a GLatLngBounds object that we can use to determine the bounds of the map after we put all the markers in it. This is very useful because we want the user to see where all the store are around his/her location.


for (var i = 0; i < markers.length; i++) {

var name = markers[i].getAttribute('name');

var address = markers[i].getAttribute('address');

var distance = parseFloat(markers[i].getAttribute('distance'));

var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')), parseFloat(markers[i].getAttribute('lng')));

var marker = createMarker(point, name, address);

map.addOverlay(marker);

var sidebarEntry = createSidebarEntry(marker, name, address, distance);

sidebar.appendChild(sidebarEntry);

bounds.extend(point); }

map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));

});

}

For each marker, get the name, address, and distance from xml element.













});

}

Construct a GLatLng object, create a marker for it and add it to the map.













});

}

Create a sidebar entry to display in the sidebar <div> tag and add it to the sidebar











bounds.extend(point); } map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));

});

}

Add this point to the bounds object.












map.setCenter(bounds.getCenter(),

map.getBoundsZoomLevel(bounds));});

}

Set the viewport of the map to be the center of the bounds object so that all markers are displayed on the map.


function createMarker(point, name, address) {

var marker = new GMarker(point);

var html = '<b>' + name + '</b> <br/>' + address; GEvent.addListener(marker, 'click', function() {

marker.openInfoWindowHtml(html);

});

return marker;

}







When the user clicks on this entry, treat it as if the user clicked on the marker on the map







Listeners to change background color on mourseover and mouseout


<body onload="load()" onunload="GUnload()">

Address: <input type="text" id="addressInput"/>

Radius: <select id="radiusSelect">

<option value="25" selected>25</option>

<option value="100">100</option>

<option value="200">200</option> </select>

<input type="button" onclick="searchLocations()" value="Search Locations"/> <br/> <br/>

<div style="width:600px; font-family:Arial, sans-serif; font-size:11px; border:1px solid black">

<table> <tbody> <tr id="cm_mapTR">

<td width="200" valign="top">

<div id="sidebar" style="overflow: auto; height: 400px; font-size: 11px; color: #000"></div> </td>

<td> <div id="map" style="overflow: hidden; width:400px; height:400px"></div> </td>

</tr> </tbody> </table> </div>

</body> </html>

User entry form with a field for the address, a drop down list for the radius and a button to search












<div id="sidebar" style="overflow: auto; height: 400px; font-size: 11px; color: #000"></div>

</td> <td> <div id="map" style="overflow: hidden; width:400px; height:400px"></div></td>


</body> </html>

<div> tag for the sidebar












<div id="sidebar" style="overflow: auto; height: 400px; font-size: 11px; color: #000"></div> </td> <td>

<div id="map" style="overflow: hidden; width:400px; height:400px"></div> </td>


</body> </html>

<div> tag for the map

Output

Sidebar

Map with markers

See you

Good Luck on Assignment 3

References

• http://code.google.com/apis/maps/documentation/index.html

• http://code.google.com/apis/maps/documentation/reference.html

• http://code.google.com/apis/maps/articles/phpsqlsearch.html

• http://code.google.com/apis/maps/articles/phpsqlgeocode.html

• http://code.google.com/apis/maps/articles/phpsqlajax.html

google maps api

Documents

var map

map var bounds

map var northeast

random map

canvas map

displayed map simple

var point

map http