Display Multiple Points On Google Map By Fetching The Names From Database
I am new in JSP. I have a requirement where i have to build a webpage which will fetch records of address fields(consist of Street,region,city,exchange,country name) from Database
Solution 1:
You can iterate on your array of localtion (retrieved form database) and then add the marker eg: this way..
for (var i = 0; i < locations.length; i++) {
addMarker(locations[i].lat, locations[i].lng);
}
Solution 2:
If you want to display multiple markers on the same map but you only have a address .You can use geocoder function from google Maps API v3.
Here's a demo of how it works this code
<!DOCTYPE html><html><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>Mapa</title><metacharset="utf-8" /><styletype="text/css">body {
margin: 0;
padding: 0;
font: 12px sans-serif;
}
h1, p {
margin: 0;
padding: 0;
}
</style></head><body><divid="googleMap"style="height: 400px;"></div><scripttype="text/javascript"src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script><script>/*
* declare map as a global variable
*/var map;
var myMarkers = [];
/*
* create a initialize function
*/functioninitialize() {
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
var mapOptions = {
center: myCenter,
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
SetMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);
functionSetMarkers() {
var geocoder = new google.maps.Geocoder();
var myData = [];
// here you can change this JSON for a call to your database
myData = [
{name: "London", address: "London, Reino Unido"},
{name: "Oxford", address: "Oxford, Reino Unido"},
{name: "Bedford", address: "Bedford, Reino Unido"},
];
for(i = 0; i < myData.length; i++) {
geocoder.geocode({ 'address': myData[i].address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
myMarkers[i] = new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
} else {
alert("We can't found the address, GoogleMaps say..." + status);
}
});
}
}
</script></body></html>
Post a Comment for "Display Multiple Points On Google Map By Fetching The Names From Database"