Gossamer Forum
Home : Products : Gossamer Links : Discussions :

[Help] :: How to Add Google Map to Site

Quote Reply
[Help] :: How to Add Google Map to Site
Hi there,

I was wondering if anyone had idea on how to add Google map on the Detailed Page for the listing.

All the listings have following address fields

AddressLine1
AddressLine2
City
State
ZipCode


Here is the basic code for the map, however it does not have a marker for the Listing address. :(

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

//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}

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

I can't figure out on how to get the LatLng for the address. Also, it might be much simpler if there was a way to be insert address in the Map, so it can be done for every listing.

Any help would be much appreciated.

Thank you.

Vishal
-------------------------------------------------------
Quote Reply
Re: [SWDevil.Com] [Help] :: How to Add Google Map to Site In reply to
Have a look at the info about geocoding here:

http://www.google.com/...vices.html#Geocoding

If you are still having problems PM me and I'll give you a link to a site where I have it working with Links .

Last edited by:

aus_dave: Nov 12, 2007, 3:18 PM
Quote Reply
Re: [SWDevil.Com] [Help] :: How to Add Google Map to Site In reply to
Hi there,

I had a go at doing this without geocoding on my site with this result;
Stagelink Google Map Detailed Listing

I call the following as an include.txt file into the detailed page (if the link has a postcode);

1) Look towards the bottom and you can see my field names being put into the code;
<%Det_Address_1%>, <%Det_Address_2%>, <%Det_Address_3%> etc etc

2) You also need to enter your google API map key (I've put 'your_google_maps_key' for this example)

3) This doesn't require geocoding which is not advised for busy sites, as there is an unwelcome hit on google's servers and therefore the page will load far slower (and breaks the terms and conditions of Google mapping).

I couldn't work out a clean way of setting up the geocoding to happen automatically for new or changed address information - something I'd like to implement in the future.


Code:
<!-- ++Begin Map Search Control Wizard Generated Code++ -->
<!--
// Created with a Google AJAX Search Wizard
// http://code.google.com/apis/ajaxsearch/wizards.html
-->

<!--
// The Following div element will end up holding the map search control.
// You can place this anywhere on your page
-->
<div id="mapsearch">
<span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading Google Map...</span>
</div>

<!-- Maps Api, Ajax Search Api and Stylesheet
// Note: If you are already using the Maps API then do not include it again
// If you are already using the AJAX Search API, then do not include it
// or its stylesheet again
//
// The Key Embedded in the following script tags is designed to work with
// the following site:
// http://www.yoursite.com
-->
<script src="http://maps.google.com/maps?file=api&v=2&key=your_google_maps_key"
type="text/javascript"></script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-msw&key=your_google_maps_key"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/css/gsearch.css");
</style>

<!-- Map Search Control and Stylesheet -->
<script type="text/javascript">
window._uds_msw_donotrepair = true;
</script>
<script src="http://www.google.com/uds/solutions/mapsearch/gsmapsearch.js?mode=new"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/solutions/mapsearch/gsmapsearch.css");
</style>

<style type="text/css">
.gsmsc-mapDiv {
width : 650px;
}

.gsmsc-idleMapDiv {
height : 450px;
}

#mapsearch {
width : 700px;
margin: 10px;
padding: 4px;
}
</style>
<script type="text/javascript">
function LoadMapSearchControl() {

var options = {
zoomControl : GSmapSearchControl.ZOOM_CONTROL_ENABLE_ALL,
title : "<%Title%> Located by Stagelink.com",
url : "<%db_cgi_url%>/jump.cgi?ID=<%ID%>",
idleMapZoom : GSmapSearchControl.ACTIVE_MAP_ZOOM,
activeMapZoom : GSmapSearchControl.ACTIVE_MAP_ZOOM
}

new GSmapSearchControl(
document.getElementById("mapsearch"),
"<%Det_Address_1%>, <%Det_Address_2%>, <%Det_Address_3%>, <%Det_City%>, <%Det_County%>, <%Det_Postcode%>, <%Det_Country%>",
options
);

}
// arrange for this function to be called during body.onload
// event processing
GSearch.setOnLoadCallback(LoadMapSearchControl);
</script>
<!-- ++End Map Search Control Wizard Generated Code++ -->

Last edited by:

Piers1: Nov 13, 2007, 3:33 PM
Quote Reply
Re: [Piers1] [Help] :: How to Add Google Map to Site In reply to
Hi Piers1,
that's working fine on my profile pages.
Thanks for sharing

Matthias
gpaed.de