This is the fifth post in my series on creating your own store locator map for your website. In this post, we will create the HTML page which will tie together all of the pieces we have created so far.
Copy and paste this code into the <head> section of your web page:
<!--
Copyright 2008 Google Inc.
Licensed under the Apache License, Version 2.0:
http://www.apache.org/licenses/LICENSE-2.0
-->
<script src="http://maps.google.com/maps?file=api&v=2&z=17&key=YOUR-OWN-KEY"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var icon = new GIcon();
icon.image = "http://yourwebsite.com/logo.png";
icon.shadow = "http://youwebsite.com/shadow.png";
icon.iconSize = new GSize(50, 28);
icon.shadowSize = new GSize(68, 28);
icon.iconAnchor = new GPoint(37, 59);
icon.infoWindowAnchor = new GPoint(31, 8);
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);
}
}
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 = 'getoutput.php?latitude=' + center.lat() + '&longitude=' + center.lng() + '&radius=' + radius;
GDownloadUrl(searchUrl, function(data) {
var xml = GXml.parse(data);
var Sheet1 = xml.documentElement.getElementsByTagName('Sheet1');
map.clearOverlays();
var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
if (Sheet1.length == 0) {
sidebar.innerHTML = 'No results found.';
map.setCenter(new GLatLng(40, -100), 4);
return;
}
var bounds = new GLatLngBounds();
for (var i = 0; i < Sheet1.length; i++) {
var name = Sheet1[i].getAttribute('name');
var address = Sheet1[i].getAttribute('address');
var city = Sheet1[i].getAttribute('city');
var state = Sheet1[i].getAttribute('state');
var zipcode = Sheet1[i].getAttribute('zipcode');
var country = Sheet1[i].getAttribute('country');
var distance = parseFloat(Sheet1[i].getAttribute('distance'));
var phone = Sheet1[i].getAttribute('phone');
var email = Sheet1[i].getAttribute('email');
var group = Sheet1[i].getAttribute('group');
var point = new GLatLng(parseFloat(Sheet1[i].getAttribute('latitude')),
parseFloat(Sheet1[i].getAttribute('longitude')));
var website = Sheet1[i].getAttribute('website');
var marker = createMarker(point, name, address, city, state, zipcode, website, phone, email, group);
map.addOverlay(marker);
var sidebarEntry = createSidebarEntry(marker, name, address, city, state, zipcode, distance, website, phone, email,
group);
sidebar.appendChild(sidebarEntry);
bounds.extend(point);
}
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
var zoomOverride = map.getZoom();
if(zoomOverride > 15) {
zoomOverride = 15;
}
map.setZoom(zoomOverride);
});
}
function createMarker(point, name, address, city, state, zipcode, website, phone, email, group) {
var marker = new GMarker(point, icon);
var html = '<b>' + group + '</b> <br/>' + address + '<br/>' + city + ', ' + state + ' ' + zipcode + '<br/>' +
"<br /><a href=" + website + " target=_blank ;'>" + website + "</a>" + '<br/>' + phone + '<br/>' + email +
'<br/><br/>';
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
function createSidebarEntry(marker, name, address, city, state, zipcode, distance, website, phone, email, group) {
var div = document.createElement('div');
var html = '<b>' + group + '</b> (' + distance.toFixed(1) + ' miles)<br/>' + address + '<br/>' + city + ', ' + state
+ ' ' + zipcode + "<br /><a href=" + website + " target=_blank ;'>" + website + "</a>" + '<br/>' + phone + "<br />" +
email + '<br/><br/>';
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>
And copy and paste this code into the <body> of your web page where you want the map to display:
<h2 style="font-family:calibri;">Find a location near you</h2>
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"/>
<div style="width:900px; font-family:Calibri, sans-serif; font-size:15px; border:1px solid gray">
<table>
<tbody>
<tr>
<td width="300" valign="top"><div id="sidebar" style="overflow: auto; height: 500px; font-size: 15px; color: #000">
</div>
</td>
<td><div id="map" style="overflow: hidden; width:600px; height:600px; border: 1px solid #ccc;"></div> </td>
</tr>
</tbody>
</table>
</div>
Now, add this to your <body> tag:
onload="load()" onunload="GUnload()"
You will obviously want to change the names of columns and fields in the above code to the correct columns and fields that you created for your own store locator.
You will also need to use your own Google maps API key (you can get one at http://code.google.com/apis/maps/signup.html) and make sure that the path to the images you want to use for your markers is correct if you plan to use your own custom markers rather than the default Google map markers.
Let me know if you have trouble getting this to work and I would be happy to help you figure it out.
Here are links to all of the posts in this series on how to create your own store locator map:
Create a spreadsheet of your store locations
Create and populate the MySQL table
Create a PHP file which will be used to connect to the database
Create a PHP file which will output the XML file results of a search
Create the HTML page which contains the store locator map
And here are some hints and tips to help create and customize your store locator map:
Using your own custom markers for the locations in place of Google’s default markers
How to prevent the map from zooming in to close on a single location
