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
Simple Map on a webpage (cont’d)
<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>
Defines a single map on a page: Arguments: HTML container
Simple Map on a webpage (cont’d)
<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>
Obtain a reference to the html DOM object named map_canvas
Simple Map on a webpage (cont’d)
<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>
Specifies the central location of the displayed map
The latitude and longitude of the location
The zoom level
Simple Map on a webpage (cont’d)
<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> Sets up the map’s user interface to a default configuration
Simple Map on a webpage (cont’d)
<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
Simple Map on a webpage (cont’d)
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas"
style="width: 500px; height: 300px">
</div> </body>
Utility function designed to prevent memory leaks
Simple Map on a webpage (cont’d)
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas"
style="width: 500px; height: 300px">
</div> </body>
Container to put the map in
Simple Map on a webpage (cont’d)
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas"
style="width: 500px; height: 300px">
</div> </body>
Implicitly specify the size of the map
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(),
southWest.lng() + lngSpan * Math.random());map.addOverlay(new GMarker(point));
} }The coordinates of the current viewport (i.e. window) of the map
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(),
southWest.lng() + lngSpan * Math.random());map.addOverlay(new GMarker(point));
} }Get the southwest point of the bounding box of the map
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(),
southWest.lng() + lngSpan * Math.random());map.addOverlay(new GMarker(point));
} }Get the northeast point of the bounding box of the map
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(),
southWest.lng() + lngSpan * Math.random());map.addOverlay(new GMarker(point));
} }Get the difference in longitudes between the points
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(),
southWest.lng() + lngSpan * Math.random());map.addOverlay(new GMarker(point));
} }Get the difference in latitudes between the points
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(),
southWest.lng() + lngSpan * Math.random());map.addOverlay(new GMarker(point));
} }Generate the latitude and longitude of a random point on the map
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(),
southWest.lng() + lngSpan * Math.random());map.addOverlay(new GMarker(point));
} }Adds to the map a marker pointing to this point
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) {
if ( !latlng) {alert(address +"not found");
} else { map.setCenter(latlng, 16);
map.openInfoWindow(map.getCenter(),document.createTextNode("Sennott Square is here!!"));
}});
map.setUIToDefault();} }
Specify a human-readable address
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) {
if ( !latlng) {alert(address +"not found");
} else { map.setCenter(latlng, 16);
map.openInfoWindow(map.getCenter(),document.createTextNode("Sennott Square is here!!"));
}});
map.setUIToDefault();} }
Create an object of type GClientGeocoder
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) { 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
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) { 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
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) {
if ( !latlng) {alert(address +"not found");
} else { map.setCenter(latlng, 16);
map.openInfoWindow(map.getCenter(),document.createTextNode("Sennott Square is here!!"));
}});
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 (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
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;
}
Add a listener to execute a function when the user clicks on the marker
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;
}
Message to display when the user clicks on the marker
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;
}
Action to do: open an information window in html on pointing to the location with the message myHtml
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;
}
Return the marker created
Event Listener Example (cont’d)
• 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.
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
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
Reverse Geocoding example (cont’d)
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.
Reverse Geocoding example (cont’d)
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.
Reverse Geocoding example (cont’d)
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);
If no response or unsuccessful reverse geocoding
Reverse Geocoding example (cont’d)
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);
Get the first match
Reverse Geocoding example (cont’d)
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);
Construct a Glatlng object from the coordinates of the returned point.
Reverse Geocoding example (cont’d)
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);
Create a marker for this point and add it to the map
Reverse Geocoding example (cont’d)
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
Reverse Geocoding example (cont’d)
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);}
}
Display the latitude and longitude pair of the original point that the user clicked on
Reverse Geocoding example (cont’d)
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);}
}
Display the latitude and longitude of the point to which the address was calculated for.
Reverse Geocoding example (cont’d)
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);}
}
Display the status code of this call. It should be 200 if the call was successful.
Reverse Geocoding example (cont’d)
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);}
}
Display the type of request this was. It should be geocode in this example.
Reverse Geocoding example (cont’d)
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);}
}
Display the address calculated
Reverse Geocoding example (cont’d)
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);}
}
Display the accuracy of the address calculated0 (address unknown) – 9 (building or property address)
Reverse Geocoding example (cont’d)
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);}
}
Display the country where this point is located in.
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 Code
<script type="text/javascript"> function initialize() {
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)
<script type="text/javascript"> function initialize() {
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>
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)
<script type="text/javascript"> function initialize() {
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>
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
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()); }
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.
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;
Fetch the data and read it row by row.
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;
Get the address and the id of the row
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;
Setup the URL with the address in it.
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;
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.
Geocode the store addresses (cont’d)
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
Geocode the store addresses (cont’d)
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());}
} Get the returned coordinates and split them to separate the latitude and longitude
Geocode the store addresses (cont’d)
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());}
} Get only the latitude and longitude. We are not interested in the altitude
Geocode the store addresses (cont’d)
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());}
} Setup the sql statement to update the latitude and longitude attributes of a store location/marker in the database.
Geocode the store addresses (cont’d)
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());}
} Run the update statement and do error checking.
Geocode the store addresses (cont’d)
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.
Geocode the store addresses (cont’d)
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
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()); }
Latitude, longitude and radius of where is the user’s location are supplied via HTTP GET.
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()); }
We are outputting XML so setup the root node
Step 3: Find the closest stores
<?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()); }
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
Step 3: Find the closest stores
// 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.
Step 3: Find the closest stores
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.
Step 3: Find the closest stores
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(); ?> Add the attributes for this node
Step 3: Find the closest stores
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(); ?>
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
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);
} }
Using Google maps API V2 with key=abcdef
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);
} }
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
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;
Geocode the address entered by the user. If successful call searchLocationsNear(latlng)
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;
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
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();
Read the markers tags
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();
Clear the map to prepare it for the new markers
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();
Get a reference to the <div> element in the document called ‘sidebar’ to put the store information in
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();
Clear the text inside this <div>
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();
No results returned tell the user via the sidebar and reset the map to original viewport
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();
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.
Step 4: searchLocationsNear(center) (cont’d)
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.
Step 4: searchLocationsNear(center) (cont’d)
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));
});
}
Construct a GLatLng object, create a marker for it and add it to the map.
Step 4: searchLocationsNear(center) (cont’d)
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));
});
}
Create a sidebar entry to display in the sidebar <div> tag and add it to the sidebar
Step 4: searchLocationsNear(center) (cont’d)
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));
});
}
Add this point to the bounds object.
Step 4: searchLocationsNear(center) (cont’d)
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));});
}
Set the viewport of the map to be the center of the bounds object so that all markers are displayed on the map.
Step 4: display a map with the stores (cont’d)
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;
}
Step 4: display a map with the stores (cont’d)
function createSidebarEntry(marker, name, address, distance) { var div = document.createElement('div'); var html = '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/>' + address; div.innerHTML = html; div.style.cursor = 'pointer'; div.style.marginBottom = '5px'; GEvent.addDomListener(div, 'click', function() {
GEvent.trigger(marker, 'click'); }); GEvent.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee'; }); GEvent.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff'; }); return div; }
//]]> </script> </head>
Create a div entry with the name , distance and address of the store.
Step 4: display a map with the stores (cont’d)
function createSidebarEntry(marker, name, address, distance) { var div = document.createElement('div'); var html = '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/>' + address; div.innerHTML = html; div.style.cursor = 'pointer'; div.style.marginBottom = '5px'; GEvent.addDomListener(div, 'click', function() {
GEvent.trigger(marker, 'click'); }); GEvent.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee'; }); GEvent.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff'; }); return div; }
//]]> </script> </head>
When the user clicks on this entry, treat it as if the user clicked on the marker on the map
Step 4: display a map with the stores (cont’d)
function createSidebarEntry(marker, name, address, distance) { var div = document.createElement('div'); var html = '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/>' + address; div.innerHTML = html; div.style.cursor = 'pointer'; div.style.marginBottom = '5px'; GEvent.addDomListener(div, 'click', function() {
GEvent.trigger(marker, 'click'); }); GEvent.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee'; }); GEvent.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff'; }); return div; }
//]]> </script> </head>
Listeners to change background color on mourseover and mouseout
Step 4: display a map with the stores (cont’d)
<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
Step 4: display a map with the stores (cont’d)
<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>
<div> tag for the sidebar
Step 4: display a map with the stores (cont’d)
<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>
<div> tag for the map
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
Top Related