Hey Victor,
Here's some basic JS I've used in a project to plot client locations, and to show their name and phone when the marker is clicked:
var locations = {{ locations|safe }};
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 11,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
lat_log_split = locations[i][1].split(",");
marker = new google.maps.Marker({
position: new google.maps.LatLng(parseFloat(lat_log_split[0]),parseFloat(lat_log_split[1])),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var popup = '<strong>'+locations[i][0]+' </strong><p>'+locations[i][2]+'</p><p><a href="tel:'+locations[i][3]+'">M:'+locations[i][3]+'</a></p>';
infowindow.setContent(popup);
infowindow.open(map, marker);
}
})(marker, i));
}
You'll see that the following code is plotting the marker on the map using lat and long, which I've obtained by geocoding the client's address on the server side.
marker = new google.maps.Marker({
position: new google.maps.LatLng(parseFloat(lat_log_split[0]),parseFloat(lat_log_split[1])),
map: map
});
You have to link to maps api before this code with:
I'm just passing an array inside {{ locations|safe }} where each array item contains customer info.
Cheers,
M