This tutorial is helpful for getting lattitude and longitude from json web service in Java Script and it shows on map with marker when user clicks each marker a label open and when user click on the label an alert will called.
Here is The Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Multiple Markers Google Maps</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.11&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
// check DOM Ready
var latArray=new Array();
var longArray=new Array();
$(document).ready(function() {
// execute
getJson();
});
function createMap(){
(function() {
// map options
var options = {
zoom: 5,
center: new google.maps.LatLng(2.68158, 101.562), // centered US
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: false
};
// init map
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
// NY and CA sample Lat / Lng
var southWest = new google.maps.LatLng(40.744656, -74.005966);
var northEast = new google.maps.LatLng(34.052234, -118.243685);
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
// set multiple marker
for (var i = 0; i < latArray.length; i++) {
// init markers
var marker = new google.maps.Marker({
position: new google.maps.LatLng(latArray[i], longArray[i]),
map: map,
title: 'Click Me ' + i
});
// process multiple info windows
(function(marker, i) {
// add click event
google.maps.event.addListener(marker, 'click', function() {
infowindow = new google.maps.InfoWindow({
content: '<div style="width:100px;height:50px;color:#0ff;font-size:20px;"><div style="position:fixed;height:30px;width:50px;" onclick="openAlert();">Label</div><div style="height:50px;width:50px;position:fixed;margin-left:100px;"><img src="images/cir_star.PNG"/></div></div>'
});
infowindow.open(map, marker);
});
})(marker, i);
}
})();
}
function getJson(){
$.ajax({
type:"GET",
url:"http://www.json-generator.com/j/bPNwZIlvZu?indent=4",
dataType: "json",
success: function(data){
var len=data.jsontable.length;
for(var i=0;i<len;i++){
latArray[i]=data.jsontable[i].Y;
longArray[i]=data.jsontable[i].X;
}
createMap();
},
error: function(errorMsg){
alert(errorMsg);
}
});
}
function openAlert(){
alert("You Click on Map.");
}
</script>
</head>
<body>
<div id="map_canvas" style="width: 800px; height:500px;"></div>
</body>
</html>
Output Like This:
