Actually the Googlemap snippet won’t do what you want, and neither will the variant linked to above since it only supports one point per map. However check out the Google Maps API, it is actually quite easy to create a custom snippet to pass multiple lat/long points and output corresponding markers on a Google map. The hard bit is actually how you geocode the points for each user when their account is created. Essentially you would need to create text entry fields for the user’s address and a geocode button to position a marker on a Google map; the marker should be draggable so the user can reposition dynamically. The marker position would update lat and long fields with it’s position, and then these values would be stored in the webloginpe extended atrributes table when the user registers or updates their profile. Lucky for you I’ve already done something like this
In the <head>:
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQ..."></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script language="JavaScript" type="text/javascript">
function showAddress(address, fallback) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
if (fallback !=='') {
showAddress(fallback);
} else {
alert(address + ' not found.');
}
} else {
$('input[name=lat]').attr('value',point.lat().toFixed(5));
$('input[name=long]').attr('value',point.lng().toFixed(5));
renderPosition(point);
}
}
);
}
}
function renderPosition(point) {
map.clearOverlays();
map.setCenter(point, 14);
var marker = new GMarker(point, {draggable: true});
map.addOverlay(marker);
GEvent.addListener(marker, 'dragend', function() {
var pt = marker.getPoint();
map.panTo(pt);
$('input[name=lat]').attr('value',pt.lat().toFixed(5));
$('input[name=long]').attr('value',pt.lng().toFixed(5));
GEvent.addListener(marker, 'dragend', function() {
var pt = marker.getPoint();
map.panTo(pt);
$('input[name=lat]').attr('value',pt.lat().toFixed(5));
$('input[name=long]').attr('value',pt.lng().toFixed(5));
});
});
GEvent.addListener(map, 'moveend', function() {
map.clearOverlays();
var center = map.getCenter();
var marker = new GMarker(center, {draggable: true});
map.addOverlay(marker);
$('input[name=lat]').attr('value',center.lat().toFixed(5));
$('input[name=long]').attr('value',center.lng().toFixed(5));
GEvent.addListener(marker, 'dragend', function() {
var pt = marker.getPoint();
map.panTo(pt);
$('input[name=lat]').attr('value',pt.lat().toFixed(5));
$('input[name=long]').attr('value',pt.lng().toFixed(5));
});
});
}
$("input[name=lat]").after(' <input type="button" id="geocode" value ="Geocode" /><br /><br /><div id="map" style="width: 400px; height: 300px"></div>');
$("input[name=long]").parent().parent().next().remove();
$('#geocode').click(function() {
var address = $('input[name=address1]').attr('value');
var city = $('input[name=city]').attr('value');
var zip = $('input[name=zip]').attr('value');
var country = $('select[name=country]').attr('value');
if (address !== '' && city !== '' && country) {
if (zip !== '') {
// use zip if it's set
showAddress(address+', '+city+', '+zip+', '+country, city+', '+country);
} else {
showAddress(address+', '+city+', '+country, city+', '+country);
}
} else {
alert('You need to fill in at least Address 1, Town/City, and Country to use Geocoding');
}
return false;
});
// init
var geocoder = new GClientGeocoder();
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
var lat = $('input[name=lat]').attr('value');
var long = $('input[name=long]').attr('value');
if (lat == '' && long =='') {
// default
showAddress('31 Finsbury Circus, London, EC2M 5SQ, UK');
} else {
point = new GLatLng(lat, long);
renderPosition(point);
}
</script>
For this to work you need your form to include the following input fields with name and id values: lat, long, address1, city, country, zip
