Hi Guys,
I have the following code:
It basically looks into a HTML list and geocodes and markets each item. it does it correctly 8 out of ten but sometimes I get an error I set for show in the console.
I can't think of anything. Any thoughts is much appreciated.
$(function () {
var map = null;
var geocoder = null;
function initialize() {
if (GBrowserIsCompatible()) {
// Specifies that the element with the ID map is the container for the map
map = new GMap2(document.getElementById("map"));
// Sets an initial map positon (which mainly gets ignored after reading the adderesses list)
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Instatiates the google Geocoder class
geocoder = new GClientGeocoder();
map.addControl(new GSmallMapControl());
// Sets map zooming controls on the map
map.enableScrollWheelZoom();
// Allows the mouse wheel to control the map while on it
}
}
function showAddress(address, linkHTML) {
if (geocoder) {
geocoder.getLatLng(address,
function (point) {
if (!point) {
console.log('Geocoder did not return a location for ' + address);
}
else {
map.setCenter(point, 8);
var marker = new GMarker(point);
map.addOverlay(marker);
// Assigns the click event to each marker to open its balloon
GEvent.addListener(marker, "click", function () {
marker.openInfoWindowHtml(linkHTML);
});
}
}
);
}
} // end of show address function
initialize();
// This iterates through the text of each address and tells the map
// to show its location on the map. An internal error is thrown if
// the location is not found.
$.each($('.
addresses li a'), function () {
var addressAnchor = $(this);
showAddress(addressAnchor.text(), $(this).parent().html());
});
});
which looks into this HTML:
<ul class="
addresses">
<li><a href="#">Central London</a></li>
<li><a href="#">London WC1</a></li>
<li><a href="#">London Shoreditch</a></li>
<li><a href="#">London EC1</a></li>
<li><a href="#">London EC2</a></li>
<li><a href="#">London EC3</a></li>
<li><a href="#">London EC4</a></li>
</ul>
