Help with Google Maps

24 posts by 9 authors in: Forums > CMS Builder
Last Post: January 20, 2010   (RSS)

By hvbuilder - August 2, 2008

I have installed CMS Builder and making good progress, I do require a bit of advice on using Google maps. I have a business directory and would like a map at the bottom of the page. I have read the other posts, but need more of a basic starting point. Can you head me in the right direction?

Re: [hvbuilder] Help with Google Maps

By Jake - August 3, 2008

Hi hvbuilder,

Thanks for posting!

I'm going to spend some time writing out a tutorial on this for you - I'll post back soon with a full set of instructions.

In the meantime, you may want to sign up for a Google Maps API key here:

http://code.google.com/apis/maps/signup.html
-----------------------------------------------------------
Cheers,
Jake Marvin - Product Specialist
support@interactivetools.com

Hire me!
Save time by getting our experts to help with your project. Template changes, advanced features, full integration, whatever you need. Whether you need one hour or fifty, get it done fast with Priority Consulting.

Re: [Jake] Help with Google Maps

By hvbuilder - August 4, 2008

Hi Jake,

Thank you. I've obtained my key from Google, so whenever you are ready, your student awaits. [:)]

Re: [hvbuilder] Help with Google Maps

By Jake - August 4, 2008 - edited: August 10, 2008

Hi hvbuilder,

Thanks for your patience. [:)]

To set this up, 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 makers 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 htmlspecialchars($record['address'], ENT_QUOTES) ?>, <?php echo htmlspecialchars($record['city'], ENT_QUOTES) ?>')
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 I linked to above 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 htmlspecialchars($record['address'], ENT_QUOTES) ?>, <?php echo htmlspecialchars($record['city'], ENT_QUOTES) ?>')

Let me know if you have any other questions about setting this up!
-----------------------------------------------------------
Cheers,
Jake Marvin - Product Specialist
support@interactivetools.com

Hire me!
Save time by getting our experts to help with your project. Template changes, advanced features, full integration, whatever you need. Whether you need one hour or fifty, get it done fast with Priority Consulting.

Re: [Jake] Help with Google Maps

By hvbuilder - August 4, 2008

Hi Jake,

Thanks for the tutorial! I believe that i stepped the entire process, but I only get a empty frame, however when I view the source code of the frame it appears it should be working.

Here is the Code of the frame:



<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><style media="screen" type="text/css">.gmnoscreen{display:none}</style><style media="print" type="text/css">.gmnoprint{display:none}</style></head><body onunload="GUnload()" onload="load()"><br>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAHBwf1f8dELka4LCuwUkvKBS2xR7anLdQ5NTT5UBg8vOWXebijhQkt55p8ERLsgfaxEdePXkRlHHBxw" type="text/javascript"></script><script src="http://maps.google.com/intl/en_us/mapfiles/121/maps2.api/main.js" 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(41.79959934251389, -74.74574089050293), 13);
}

var point = new GLatLng(41.79955135365717,-74.74579453468323);
var marker = createMarker(point,'1 North Main Street, Liberty')
map.addOverlay(marker);
var point = new GLatLng(,);
var marker = createMarker(point,'1643 State Route 17B , White Lake')
map.addOverlay(marker);
var point = new GLatLng(,);
var marker = createMarker(point,'2352 State Route 97, Pond Eddy')
map.addOverlay(marker);

}
//]]>
</script>

<div id="map" style="width: 500px; height: 300px;"></div>
</body></html>

Any more help would be appreciated.

Thanks again,

James

Re: [hvbuilder] Help with Google Maps

By Jake - August 5, 2008

Hi hvbuilder,

Thanks for your reply. [:)]

There could be a problem with the <iframe> code, as the code your provided looks OK - could you provide me with the link to the page where you're trying to set this up? If you'd rather not post this to the forum, you can send me a private message or email to jake@interactivetools.com.

Thanks!
-----------------------------------------------------------
Cheers,
Jake Marvin - Product Specialist
support@interactivetools.com

Hire me!
Save time by getting our experts to help with your project. Template changes, advanced features, full integration, whatever you need. Whether you need one hour or fifty, get it done fast with Priority Consulting.

Re: [Jake] Help with Google Maps

By jposwald - November 18, 2008

Hi Jake, great data, thank you!

See how Google Maps API works here:

http://www.utahreoexperts.com/featured-homes/detail/?CROWD-PLEASER-4

It's all controlled under IT CMS and maps gets centered automatically!

But I need to know how can I put all featured homes under only 1 Google Maps and if you click on it then redirect to selected home.

This is Featured Homes listing:

http://www.utahreoexperts.com/featured-homes/

So under that page create the same google map box as I have in Property Details but with all Property Records on CMS.

Is that posible? Thank you, Juan.

Re: [jposwald] Help with Google Maps

By designer - November 18, 2008

I'm about to start development on a new property website and would be most interested in seeing how this would works.

I'm currently evaluating the CMS Builder system, so was really interested to see the utahreoexperts.com site.

Jake how successful have you found this system in fulfilling your clients requirements. I noticed the search tool for its filter options, is this all managed via the CMS Builder?

Regards,
Martin - Sanders Design - http://www.sandersdesign.net

Re: [jposwald] Help with Google Maps

By jposwald - November 24, 2008

FYI

Hi Jake, great data, thank you!

See how Google Maps API works here:

http://www.utahreoexperts.com/featured-homes/detail/?CROWD-PLEASER-4

It's all controlled under IT CMS and maps gets centered automatically!

But I need to know how can I put all featured homes under only 1 Google Maps and if you click on it then redirect to selected home.

This is Featured Homes listing:

http://www.utahreoexperts.com/featured-homes/

So under that page create the same google map box as I have in Property Details but with all Property Records on CMS.

Is that posible? Thank you, Juan.