Google Maps initialize() with new JSON mapOptions won't work -


this standard google code , loads map fine.

var mapoptions = {             center: { lat: -34.397, lng: 150.644 },             zoom: 8         };  function initialize() {                          var map = new google.maps.map(document.getelementbyid('map-canvas'),             mapoptions);         }         google.maps.event.adddomlistener(window, 'load', initialize); 

but, after search xml file values , set them mapoptions, won't initialize god of me. i've tried everything.

$(xml).find("location").each(function(){                       var lat = $(this).find("lat").text();                     var lng = $(this).find("lng").text();                      mapoptions.center.lat = lat;                     mapoptions.center.lng = lng;                      initialize();             }); 

i added alerts inside initialize() , work new coordinates xml. why won't map load beyond me...

function initialize() {             alert(mapoptions.center.lat);             alert(mapoptions.center.lng);              var map = new google.maps.map(document.getelementbyid('map-canvas'),             mapoptions);         }         google.maps.event.adddomlistener(window, 'load', initialize); 

solution: user geocodezip suggested, solution use parsefloat() when setting variables.

var lat = parsefloat($(this).find("lat").text()); 

i error uncaught invalidvalueerror: setcenter: not latlng or latlngliteral: in property lat: not number. note zoom mandatory/required mapoption. works me:

$(xml).find("location").each(function () {      var lat = parsefloat($(this).find("lat").text());     var lng = parsefloat($(this).find("lng").text());      mapoptions.center.lat = lat;     mapoptions.center.lng = lng;      initialize(); }); 

working fiddle

code snippet:

var geocoder;  var map;  var mapoptions = {center: {}, zoom:5};    function initialize() {      var map = new google.maps.map(document.getelementbyid('map-canvas'),      mapoptions);  }    function parsexml(str) {      if (window.activexobject) {          var doc = new activexobject('microsoftxmldom');          doc.loadxml(str);          return doc;      } else if (window.domparser) {          return (new domparser()).parsefromstring(str, 'text/xml');      }  }  var xmldata = "<markers><location><lat>45</lat><lng>-72</lng></location></markers>";  var xml = parsexml(xmldata);      $(xml).find("location").each(function () {        var lat = parsefloat($(this).find("lat").text());      var lng = parsefloat($(this).find("lng").text());        mapoptions.center.lat = lat;      mapoptions.center.lng = lng;        initialize();  });
html, body, #map-canvas {      height: 500px;      width: 500px;      margin: 0px;      padding: 0px  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://maps.googleapis.com/maps/api/js"></script>  <div id="map-canvas" style="border: 2px solid #3872ac;"></div>


Comments

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -