How to make google maps show up in a store locator in Magento:
These instructions were created using Magento 1.2.1 and the store locator plugin v1.3 created by ellisoj.
The first step is to install the store locator plugin. Get the store locator extension key form the link above and use magento connect to install the plugin. Next you need to apply for a google maps API key. If you are installing this on a local installation of magento and your are using a host name like “localMagento ” here are a few notes:
1. As of Magento 1.2.1 it appears that you need to use a name like “localMagento.com”.
2. Your local build will need it’s own google api key.
You will need to place the google maps api key that you recieved into the Data.php file, located in the app/code/local/Eroi/Locator/Helper folder.
Below are the code updates to incorperate google maps. The main changes I made were to add the google maps javascript code, the html container for the map, and create the xml code for use by the google map javascript functions. I also change the unit of distance from Km to Miles. This is just a basic map. Check out the google api for more cool things to do with the map.
First add the javascript to the top of the page.
<script src="http://maps.google.com/maps?file=api&v=2&key=helper('locator')->getGoogleAPIKey();?>" type="text/javascript">
//<![CDATA[
var map;
var geocoder;
function load() {
if (GBrowserIsCompatible()) {
geocoder = new GClientGeocoder();
map = new GMap2($('map'));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(40, -100), 4);
}
}
function showLocations(data){
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName('marker');
map.clearOverlays();
var sidebar = $('sidebar');
sidebar.innerHTML = '';
if (markers.length == 0) {
sidebar.innerHTML = 'No results found.';
map.setCenter(new GLatLng(40, -100), 4);
return;
}
var bounds = new GLatLngBounds();
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));
}
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;
}
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;
}
//]]>
Add this html just below the closing form tag.
Div containers for the map and side bar.
<div style="width:615px;font-family:Arial, sans-serif;font-size:11px;border:1px solid black">
<div id="map" style="width:615px;height:400px"></div>
</div>
<div id="sidebar"></div>
In the project I used this on we were only allowing search by zip code. So my code looked like this:
Replace
while ($row = $readresult->fetch())
{
$locationID = $row['locator_id'];
$locator = Mage::getModel('locator/locator')->load($locationID);
echo "n <li><h3>" . $locator->getName() . "</h3> " . $this->__('distance') . ": " . number_format($row['distance'], 1) . " kilometers";
echo "n<br />" . $locator->getAddress()
. "<br />" . $locator->getCity() . ", " . $locator->getState()
. " " . $locator->getPostalCode() . "<br />" . $locator->getPhone() . "</li>";
}
echo '</ul>';
With
//Start XML file, create parent node
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);
//header("Content-type: text/xml");
//Iterate through the rows, adding XML nodes for each
while ($row= $readresult->fetch()){
$locationID = $row['locator_id'];
$marker = Mage::getModel('locator/locator')->load($locationID);
//
$node = $dom->createElement("marker");
$newNode = $parnode->appendChild($node);
$newNode->setAttribute("name", $marker->getName());
$newNode->setAttribute("address", $marker->getAddress());
$newNode->setAttribute("lat", $marker->getLatitude());
$newNode->setAttribute("lng", $marker->getLongitude());
$newNode->setAttribute("distance", $row['distance']);
}
//remove xml tag and trim white spaces
$jsXmlLocations = substr($dom->saveXML(),21);
$jsXmlLocations = trim($jsXmlLocations);
?>
Put this Javascript code just below the php code above.
load();
showLocations();
Now just echo “addslashes(jsXmlLocations)” inside of the showLocations() function you just inserted. This is how the Google javascript functions at the top of the page get the data for the locations on the map. NOTE: This will only work on searching by zip code. You should be able to use simmilar code to get the search by state working with the maps.
If I have missed something let me know.
Need help with a Magento site. Let us help.
