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
[...] we have the XML working in the browser, we are ready to move on to creating the actual map. Related Posts:Developing a custom store locator map: Embed your map into an HTML pageDeveloping a [...]
[...] Just before this line in the html page containing your store locator map: [...]
I have the XML file working I believe, I just can to seem to get the map to work.
Hi Stephen,
What do you mean by “cant seem to get the map to work”?? Is it not displaying? Not zooming to the correct locations? If I know more specifically what the problem is, I can try and help you fix it.
Thanks!
The XML output seems to be working here as well, but no map shows up at all when you load the html, and nothing happens when you put in an address.
I have followed several different tutorials on this and this is by far the closest I have come to getting it to work!
Ok, I got things working. When I first set up the XML it told me there was no table named “markers”. So I changed line 27 of getoutput.php from “AS distance FROM markers” to “AS distance FROM Sheet1″. That error went away, but no map showed. I then renamed the table to “markers” and changed all references to Sheet1 to markers and it works!
Hi Mike,
Awesome, I am glad to hear you got it figured out! It’s a great feeling, isnt it??
~Libby
Hello, I have everything loaded correctly, a browser test of ‘getoutput.php’ renders correctly, the map loads in my web page correcty but no results are found. I’ve tried using different addresses close to the ones in my Sheet1 table of my database.
Is there a particular format to use when entering the address in “addressInput”, or, is there a test to ensure my “searchLocationsNear” function is contacting my database table (Sheet1)?
Thanks for your time,
Paul
Hi Paul,
We discussed this thru emails a week or so ago with no luck, I am not really sure what might be the problem. Have you had any luck since then? Thanks!