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(); });
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
Post a Comment