Developing a custom store locator map: Embed your map into an HTML page

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 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=<span style="color: #ff0000;">YOUR-OWN-KEY</span>"
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 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 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

  • Pingback: Developing a custom store locator map: Create a PHP file to output the XML « Icode4you – PHP, CSS, HTML, and Javascript coding tips, tricks, help, and more()

  • Stephen

    I have the XML file working I believe, I just can to seem to get the map to work.

    • http://thelibzter.com Libby Fisher

      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!

  • http://www.sicassracing.com Mike

    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!

  • http://www.sicassracing.com Mike

    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!

    • http://thelibzter.com Libby Fisher

      Hi Mike,

      Awesome, I am glad to hear you got it figured out! It’s a great feeling, isnt it?? :)

      ~Libby

  • Paul

    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

    • http://thelibzter.com Libby Fisher

      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!