Ordinary Web Guy

I’ve seen lots of gmaps website integration samples and tutorials but I mostly found out that it’s still using the old way of getting the latitude and longitude for a particular location in other website’s geocoding services http://rpc.geocoder.us/ for US locations and http://geocoder.ca/ for US and Canada locations then storing it in database, extracting it to xml file or within javascript code. That was when gmaps doesn’t have yet the GClientGeocoder() class. And here’s my version of it.

Extracting data in DB.

gmaps_js.php

var gmarkers = [];
var htmls = [];function gmapsLoad() {
if(GBrowserIsCompatible()) {
if(!document.getElementById(‘map’)) return false;
var map = new GMap2(document.getElementById(‘map’));
//map.enableContinuousZoom();
//map.enableDoubleClickZoom();
map.addControl(new GSmallMapControl());
map.addControl(new GScaleControl());
var geocoder = new GClientGeocoder();

var icon = new GIcon();
var markerStyle = ‘Push-Pin’;
var markerColor = ‘Slate’;
icon.image = ‘http://google.webassist.com/google/markers/pushpin/slate.png’;
icon.shadow = ‘http://google.webassist.com/google/markers/pushpin/shadow.png’;
icon.iconSize = new GSize(40,41);
icon.shadowSize = new GSize(40,41);
icon.iconAnchor = new GPoint(7,38);
icon.infoWindowAnchor = new GPoint(26,4);
icon.printImage = ‘http://google.webassist.com/google/markers/pushpin/slate.gif’;
icon.mozPrintImage = ‘http://google.webassist.com/google/markers/pushpin/slate_mozprint.png’;
icon.printShadow = ‘http://google.webassist.com/google/markers/pushpin/shadow.gif’;
icon.transparent = ‘http://google.webassist.com/google/markers/pushpin/slate_transparent.png’;
0) {

### START OF LOOP ###
var address_ {LOOP INDEX}= {
infowindowtext: “{LOCATION INFO ARRAY }”,
full: “{LOCATION ADDRESS ARRAY}”
};

htmls[] = address_{LOOP INDEX}.infowindowtext;

geocoder.getLatLng (
address_{LOOP INDEX}.full,
function(point) {
if(point) {
map.setCenter(point, 13);
var marker = new GMarker(point, icon);
GEvent.addListener(marker, ‘click’, function() {
marker.openInfoWindowHtml(address_{LOOP INDEX}.infowindowtext);
});
gmarkers[] = marker;
map.addOverlay(marker);
}
else {
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}

}
); /*end geocoder.getLatLng*/

### END OF LOOP ###

} /*endif*/
} /*end function */

function myclick(i) {
if (gmarkers[i])
gmarkers[i].openInfoWindowHtml(htmls[i]);
else {
var htstring = htmls[i];
var stripped = htstring.replace(/(]+)>)/ig,”");
alert(“Location not found: ” + stripped);
} /*endif*/
} /*end function */

gmaps_call.js

window.onunload = function() {
GUnload();
}
/*gmaps_onload*/
if(window.gmapsLoad) gmapsLoad();

See demo here or download files here.