Am feeding lat and lng variables to google map from dynamic select/options.
In alert() I am seeing that the correct lat and lng are being produced but when passed to mapOptions map doesn't load. Thanks in advance for help.
R
Here is my code:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google Maps API getting Lat and Long with Geocoding</title>
<link rel="stylesheet " type="text/css" href="css/loadList.css" />
<link rel="stylesheet " type="text/css" href="css/gps.css" />
<script src="../jquery/jquery-2.1.4.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" src="../jquery/getHtmlParams.js"></script>
<script type="text/javascript">
var name;
var index;
var address;
var lat;
var lng;
$(document).ready(function(){
loadlist($('#latlng').get(0), /*the 'select' object*/
'getMarkers.php?getlist=latlng', 'name');
function loadlist(selobj, url, nameattr) {
$(selobj).empty();
$.getJSON(url, {}, function(data) {
$.each(data, function(i,obj) {
$(selobj).append($('<option></option>').val(obj[nameattr]).html(obj[nameattr]));
}); //each
$("#latlng").change(function(){
name=$(this).val();
index=this .selectedIndex;
address=data[index]['address'];
lat=data[index]['lat'];
lng=data[index]['lng'];
mapIt(name, address, lat, lng); // off to load google maps
}) // latlng
}); // getJSON
} // loadlist
}); // doc ready
</script>
</head>
<body>
<div id="loadListWrapper">
<label id="markerLbl" >Select Marker For:</label><br>
<select name='latlng' id='latlng' size='5'></select>
</div> <!-- loadListWrap -->
<!-- ====================================================== -->
<script type="text/javascript">
function mapIt(a, b, c, d) { // c & d are lat an lng
var latlng=c+", "+d;
alert(latlng); // shows lat & lng
var mapOptions={
zoom:8,
center: new google.maps.LatLng(latlng),
mapTypeId: google.maps.MapTypeId.ROADMAP
}; // mapOptions
var map=new google.maps.Map($("#map").get(0), mapOptions); // doesn't load
}; // mapIt
</script>
<!-- ============================================================= -->
<div id="map" > <!-- where map goes -->
</div>
</body>
</html>
