Menu
I'm trying to add a set of poly lines to a google map from an array.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 90% }
body { height: 90%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var poly;
var map;
function initialize() {
var latlng = new google.maps.LatLng(38.698044, -77.210411);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
//var myLatLng = new google.maps.LatLng(0, -180);
}
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
var path = new MVCArray;
$.getJSON('json.php', function(data) {
//var items = [];
$.each(data, function(key, val) {
path.push(new google.maps.LatLng(val.lat, val.longi));
});
});
var myOptions = {
zoom: 12,
//center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:90%; height:100%"></div>
</body>
</html>
<html>
<head>
</head>
<body>
</body>
</html>
Any thoughts on why the line path.push(new google.maps.LatLng(val.lat, val.longi)); isn't adding the data in?
Or is there a better way for me to loop the data in?
435
So you loop over the contents of data, adding things into the array, path.... and then, what? Nothing as far as I can see. Presumably you then want to use that path array to set the path for your polyline.
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
var path = new MVCArray;
$.getJSON('json.php', function(data) {
//var items = [];
$.each(data, function(key, val) {
path.push(new google.maps.LatLng(val.lat, val.longi));
});
// now update your polyline to use this path
poly.setPath(path);
});
PS: Your HTML structure is all wrong:
<body onload="initialize()">
<div id="map_canvas" style="width:90%; height:100%"></div>
</body>
</html>
<html>
<head>
</head>
<body>
</body>
</html>
shouldn't that just be
<body onload="initialize()">
<div id="map_canvas" style="width:90%; height:100%"></div>
</body>
</html>
You should put all your code within the initialize function:
<script type="text/javascript">
var poly;
var map;
function initialize() {
var latlng = new google.maps.LatLng(38.698044, -77.210411);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//map is already declared
//var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
var path = new MVCArray;
// every time the path is updated, automatically the map will update the polyline
poly.setPath(path);
$.getJSON('json.php', function(data) {
//var items = [];
$.each(data, function(key, val) {
path.push(new google.maps.LatLng(val.lat, val.longi));
});
});
var myOptions = {
zoom: 12,
//center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
}
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
