My goal is to display markers on a PHP page using the Google Maps API controlled by radio buttons. All marker data is loading correctly (via JSON), but the map itself is not rendering. I have checked for script exceptions in the console and the run() method successfully retrieves all latitude, longitude, and value data!
<script>
var latlng = { lat: 19.7999, lng: 42.5121 };
var marker;
var map;
var markers=[];
function addmarker(map, lat, lng, title ){
marker = new google.maps.Marker({
position:{ lat:lat,lng:lng },
title:title,
draggable:true,
map:map
});
markers.push( marker );
}
function initialize() {
var mapCanvas = document.getElementById('mapArea');
var mapOptions = {
center: latlng,
zoom: 19,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
function run() {
var radio = "";
for (i = 0; i < document.getElementsByName('rd').length; i++) {
if (document.getElementsByName('rd')[i].checked) {
radio = document.getElementsByName('rd')[i].value;
}
}
initialize();
$.ajax({
dataType: 'JSON',
url: 'http://ws.net/data.php?' + radio,
success: function(data) {
markers.forEach( function( e,i,a ){
e.setMap( null );
});
for( var o in data ){
var lat=Number(data[o].lat);
var lng=Number(data[o].lon);
var val= data[o].value;
addmarker.call( this, map, lat, lng, val );
}
},
error: function( err ){
console.log( err );
}
})
}
</script>
<body >
<form action="" method="post">
<input type="radio" value="car" name="rd" />Car.
<input type="radio" value="bike" name="rd" />Bike
<input type="button" value="send" onclick="run();"/>
</form>
<div id="mapArea" style="width: 1000px; height: 600px;"> </div>
</body>
</html>