GOOGLE MAPS AND CMSB - Aug 3rd, 2010


Here’s the gist of an excellent tutorial posted by Jake at Interactive Tools. Way to go Jake!!!

A user said: I have a business directory and would like a map at the bottom of the page. Can you head me in the right
direction?

And Jake replied:
To set this up, You’ll need to sign up for a Google Maps API key at:

http://code.google.com/apis/maps/signup.html


Then you'll want to create a field called "latitude" and a field called "longitude" for the section that you'd like to
display maps for, since coordinates for your markers will need to be entered as longitude and latitude values. This site
can be used to obtain coordinates for any location:

http://mapki.com/getLonLat.php

Now, use CMS Builder's Code Generator to create list viewer code for your section. Copy the "STEP 1" piece of code and
paste it at the beginning of a plain text file. Below that, paste the following code:



<!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 Example</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YOUR_GOOGLE_MAPS_API_KEY_HERE"
type="text/javascript"></script>
<script type="text/javascript">

//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {

function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(YOUR_HOME_LATITUDE, YOUR_HOME_LONGITUDE), 13);

}

<?PHP foreach ($your_section_nameRecords as $record): ?>

var point = new GLatLng(<?PHP echo $record['latitude'] ?>,<?PHP echo $record['longitude'] ?>);
var marker = createMarker(point,'<?PHP echo $record['address'] ?>, <?PHP echo $record['city'] ?>')
map.addOverlay(marker);

<?PHP endforeach; ?>

}


//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>

</body>
</html>



We'll need to make some adjustments to this code.

Replace the "YOUR_GOOGLE_MAPS_API_KEY_HERE" text with your Google Maps API key. You'll also want to replace the
"YOUR_HOME_LATITUDE" and "YOUR_HOME_LONGITUDE" text will the coordinates of the location where you'd like the map to be
centered by default. You can use the site http://mapki.com/getLonLat.php to obtain those coordinates. Adjust this line
of code so that it matches up with your section name, and this page will be done:



<?PHP foreach ($your_section_nameRecords as $record): ?>



The last step is adding an <iframe> tag on the page where you'd like the map to be displayed. If you save this file as
"map.php", then your <iframe> tag would look like this:



<iframe src="/path/to/map.php" width="550" height="350"></iframe>



And that should be it!

Note that in my example above, when a user clicks on the map marker the location's address is displayed, followed by its
city. You can adjust the CMS Builder code used in this line if you'd like to change the information displayed there:



var marker = createMarker(point,'<?PHP echo $record['address'] ?>, <?PHP echo $record['city'] ?>')



Here’s a link to the entire post where you can find some web sites that incorporate Google maps:

http://www.interactivetools.com/forum/gforum.cgi?post=64304;



The materials on this web site have been created for use with CMS Builder content management software. CMS Builder software is published and licensed for use by InteractiveTools.com. Please contact Interactive Tools for information on the downloading of the software or the purchasing of licenses.


Terms of Service