googlemap search box problem - help!

AikenDrum · 07-15-2008, 05:20 AM

Hi,

I've successfully set up on my website the example geocoded googlemap with markers from here:

http://code.google.com/support/bin/a...y?answer=65622

I now want to add a search box to geocode a typed in location, and re-center the map on that location. The following code works fine:

<!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>Geocoding With a Map</title>
<script src="http://maps.google.co.uk/maps?file=api&v=2&key=ABQIAAAAX4g7w-cn0uZeONcdmA1HYBR30_VdjOSbYvp8XHZAJPWnMA2DJRRNtMqm bzS1zsu9lGThbHrg5l-qTQ" type="text/javascript"></script>
<script type="text/javascript">

var map = null;
var geocoder = null;

function load()
{
if (GBrowserIsCompatible())
{
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(53.799637, -1.54911), 6);

geocoder = new GClientGeocoder();
}
}

function findAddress(anAddress)
{
if (geocoder)
{
geocoder.getLatLng(anAddress, function(aPoint)
{
if (!aPoint)
{
alert("Sorry, can't locate [" + anAddress + "]");
}
else
{
map.setCenter(aPoint, 13);
var elem = document.getElementById("latLng");
elem.innerHTML = aPoint.lat() + ", " + aPoint.lng();
}
});
}
}

</script>
</head>

<body onload="load()" onunload="GUnload()">
<form action="#" onsubmit="findAddress(this.address1.value); return false">
<p>
<input type="text" size="60" name="address1" value="Type in city/town/village or postcode" />
<input type="submit" value="Go!" />
</p>
<div id="map" style="width: 500px; height: 500px"></div>
<p>Latitude/Logitude: <span id="latLng">51.500789, -0.142264</span></p>

</form>
</body>
</html>

However, when I try to insert this code into the map with markers, it doesn't work. When the location is typed into the search box, the map does not re-center. I've looked at the code until I've gone cross-eyed, and I just cannot figure out why it doesn't work. If anyone can help, I'd be really grateful.

Thanks

Here's the non-working 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 AJAX + MySQL/PHP Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAX4g7w-cn0uZeONcdmA1HYBR30_VdjOSbYvp8XHZAJPWnMA2DJRRNtMqm bzS1zsu9lGThbHrg5l-qTQ"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

var iconBlue = new GIcon();
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(12, 20);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);

var iconRed = new GIcon();
iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconRed.iconSize = new GSize(12, 20);
iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(6, 20);
iconRed.infoWindowAnchor = new GPoint(5, 1);

var customIcons = [];
customIcons["restaurant"] = iconBlue;
customIcons["bar"] = iconRed;

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(53.700637, -1.54911), 6);
geocoder = new GClientGeocoder();

GDownloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker") ;
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type);
map.addOverlay(marker);
}
});
}
}

function findAddress(anAddress)
{
if (geocoder)
{
geocoder.getLatLng(anAddress, function(aPoint)
{
if (!aPoint)
{
alert("Sorry, can't locate [" + anAddress + "]");
}
else
{
map.setCenter(aPoint, 13);
var elem = document.getElementById("latLng");
elem.innerHTML = aPoint.lat() + ", " + aPoint.lng();
}
});
}
}

function createMarker(point, name, address, type) {
var marker = new GMarker(point, customIcons[type]);
var html = "<b>" + name + "</b> <br/>" + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
//]]>
</script>
</head>

<body onload="load()" onunload="GUnload()">
<form action="#" onsubmit="findAddress(this.address.value); return false">
<p>
<input type="text" size="60" name="address" value="" />
<input type="submit" value="Go!" />
</p>
<div id="map" style="width: 500px; height: 500px"></div>
<p>Latitude/Logitude: <span id="latLng">51.500789, -0.142264</span></p>

</form>
</body>
</html>

07-15-2008, 05:20 AM	#1 (permalink)
AikenDrum New Member Join Date: Apr 2008 Posts: 3 0.00 NP$ (Donate)	googlemap search box problem - help! Hi, I've successfully set up on my website the example geocoded googlemap with markers from here: http://code.google.com/support/bin/a...y?answer=65622 I now want to add a search box to geocode a typed in location, and re-center the map on that location. The following code works fine: <!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>Geocoding With a Map</title> <script src="http://maps.google.co.uk/maps?file=api&v=2&key=ABQIAAAAX4g7w-cn0uZeONcdmA1HYBR30_VdjOSbYvp8XHZAJPWnMA2DJRRNtMqm bzS1zsu9lGThbHrg5l-qTQ" type="text/javascript"></script> <script type="text/javascript"> var map = null; var geocoder = null; function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(53.799637, -1.54911), 6); geocoder = new GClientGeocoder(); } } function findAddress(anAddress) { if (geocoder) { geocoder.getLatLng(anAddress, function(aPoint) { if (!aPoint) { alert("Sorry, can't locate [" + anAddress + "]"); } else { map.setCenter(aPoint, 13); var elem = document.getElementById("latLng"); elem.innerHTML = aPoint.lat() + ", " + aPoint.lng(); } }); } } </script> </head> <body onload="load()" onunload="GUnload()"> <form action="#" onsubmit="findAddress(this.address1.value); return false"> <p> <input type="text" size="60" name="address1" value="Type in city/town/village or postcode" /> <input type="submit" value="Go!" /> </p> <div id="map" style="width: 500px; height: 500px"></div> <p>Latitude/Logitude: <span id="latLng">51.500789, -0.142264</span></p> </form> </body> </html> However, when I try to insert this code into the map with markers, it doesn't work. When the location is typed into the search box, the map does not re-center. I've looked at the code until I've gone cross-eyed, and I just cannot figure out why it doesn't work. If anyone can help, I'd be really grateful. Thanks Here's the non-working 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 AJAX + MySQL/PHP Example</title> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAX4g7w-cn0uZeONcdmA1HYBR30_VdjOSbYvp8XHZAJPWnMA2DJRRNtMqm bzS1zsu9lGThbHrg5l-qTQ" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var iconBlue = new GIcon(); iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png'; iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'; iconBlue.iconSize = new GSize(12, 20); iconBlue.shadowSize = new GSize(22, 20); iconBlue.iconAnchor = new GPoint(6, 20); iconBlue.infoWindowAnchor = new GPoint(5, 1); var iconRed = new GIcon(); iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png'; iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'; iconRed.iconSize = new GSize(12, 20); iconRed.shadowSize = new GSize(22, 20); iconRed.iconAnchor = new GPoint(6, 20); iconRed.infoWindowAnchor = new GPoint(5, 1); var customIcons = []; customIcons["restaurant"] = iconBlue; customIcons["bar"] = iconRed; function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(53.700637, -1.54911), 6); geocoder = new GClientGeocoder(); GDownloadUrl("phpsqlajax_genxml.php", function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker") ; for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var address = markers[i].getAttribute("address"); var type = markers[i].getAttribute("type"); var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var marker = createMarker(point, name, address, type); map.addOverlay(marker); } }); } } function findAddress(anAddress) { if (geocoder) { geocoder.getLatLng(anAddress, function(aPoint) { if (!aPoint) { alert("Sorry, can't locate [" + anAddress + "]"); } else { map.setCenter(aPoint, 13); var elem = document.getElementById("latLng"); elem.innerHTML = aPoint.lat() + ", " + aPoint.lng(); } }); } } function createMarker(point, name, address, type) { var marker = new GMarker(point, customIcons[type]); var html = "<b>" + name + "</b> <br/>" + address; GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <form action="#" onsubmit="findAddress(this.address.value); return false"> <p> <input type="text" size="60" name="address" value="" /> <input type="submit" value="Go!" /> </p> <div id="map" style="width: 500px; height: 500px"></div> <p>Latitude/Logitude: <span id="latLng">51.500789, -0.142264</span></p> </form> </body> </html>

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)