I have to add multiple markers to a google map, but the data is in an external json file.
At the moment I'm trying to run it using jquery getJSON. But it will not work at all, and console returns no errors!
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var map_canvas = document.getElementById('map1');
var map_options = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(map_canvas, map_options);
$.getJSON('map_points.json', function(data) {
$.each( data.points, function(i, value) {
var myLatlng = new google.maps.LatLng(value.lat, value.lon);
alert(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
});
});
} //End initialize()
And the Json
{
"points":[
{"id":1,"lat":44.5403,"lon":-79.5463},
{"id":2,"lat":45.5403,"lon":-78.5463},
{"id":3,"lat":45.5403,"lon":-76.5463},
{"id":4,"lat":45.5403,"lon":-77.5463}
]
}
I have to add multiple markers to a google map, but the data is in an external json file.
At the moment I'm trying to run it using jquery getJSON. But it will not work at all, and console returns no errors!
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var map_canvas = document.getElementById('map1');
var map_options = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(map_canvas, map_options);
$.getJSON('map_points.json', function(data) {
$.each( data.points, function(i, value) {
var myLatlng = new google.maps.LatLng(value.lat, value.lon);
alert(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
});
});
} //End initialize()
And the Json
{
"points":[
{"id":1,"lat":44.5403,"lon":-79.5463},
{"id":2,"lat":45.5403,"lon":-78.5463},
{"id":3,"lat":45.5403,"lon":-76.5463},
{"id":4,"lat":45.5403,"lon":-77.5463}
]
}
- $.each loop is working fine? – Jenson M John Commented Jan 28, 2014 at 9:45
- Does the alert give you your LatLng correctly? – ChrisSwires Commented Jan 28, 2014 at 9:55
- No, that entire section of code doesn't seem to work. I've added an alert(myLatlng); at several places. And no console errors – user2559519 Commented Jan 28, 2014 at 18:37
1 Answer
Reset to default 5I've just tested below code & It's working. Just try :
<html>
<head>
<title>Eg. Google Maps Marker using External JSON</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://code.jquery./jquery-latest.min.js"></script>
<script type="text/javascript" src = "http://maps.google./maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
$.getJSON('map_points.json', function(data) {
$.each( data.points, function(i, value) {
var myLatlng = new google.maps.LatLng(value.lat, value.lon);
alert(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "text "+value.lon
});
});
});
}
</script>
</head>
<body onload="initialize()">
<form id="form1" runat="server">
<div id="map_canvas" style="width: 500px; height: 400px"></div>
</form>
</body>
</html>