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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Mapa</title>
<meta charset="utf-8" />
<style type="text/css">
body {
margin: 0;
padding: 0;
font: 12px sans-serif;
}
h1, p {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="googleMap" style="height: 400px;"></div>
<script type="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
*/
function initialize() {
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);
function SetMarkers() {
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"