Databases
StackOverflow2013
Postsdbo
POCannot load in Google Map lat/long coordinates from outside external initialize script
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCannot load in Google Map lat/long coordinates from outside external initialize script
    text
    copied!<p>Have a look at <a href="https://stackoverflow.com/questions/14931819/google-map-not-showing-when-in-a-hidden-div">this question</a> to see the code set-up which <strong>all works fine</strong>.</p> <p>I'm working on a real-estate site that uses this exact same adaptive map solution but I have many pages in the site requiring a map (property detail pages) so I need a way to embed the lat/long coordinates within each property detail page and have the external <code>initialize()</code> script pick it up but I can't get this to work.</p> <p>I added 2 <code>lat</code>/<code>long</code> var's to the <code>initialize()</code> script:</p> <pre><code>function initialize(lat, long) { var myLatlng = new google.maps.LatLng(lat, long); </code></pre> <p>and then on the page needing a map I tried this:</p> <pre><code>&lt;script&gt; window.onload = function() { if (typeof(map) != 'undefined') { initialize(-33.867487,151.20699); } } &lt;/script&gt; </code></pre> <p>But the coordinates aren't picked up: <img src="https://i.stack.imgur.com/w7Vky.png" alt="enter image description here"></p> <p>I'm sure it's related to how everything is loading in <strong>i.e.</strong> the <code>initialize()</code> script is being AJAX'd in via jQuery <code>load()</code> then once that is loaded the Maps API loads in via jQuery's <code>$.getScript</code> and this all happens on <code>$(window).load</code>. I'm just stuck on how the lat/long coordinates can tie in with this set-up?</p> <p><strong>--EDIT--</strong></p> <p>I'll break down the code set-up as easy as I can:</p> <p>In my external global JS file I've got this to set-up the adaptive Google Map solution which uses the <a href="http://wicky.nillia.ms/enquire.js/" rel="nofollow noreferrer"><strong>Enquire JS</strong></a> library:</p> <pre><code>$(window).load(function() { var mapContainer = $('.map'), mapStaticContainer = $('.map__static'), mapDynamicContainer = $('&lt;div class="map__dynamic"/&gt;'); /* --Enquire library-- */ enquire.register(BPlap, { deferSetup: true, setup: function() { mapContainer.prepend(mapDynamicContainer); mapDynamicContainer.html('&lt;span class="preloader"&gt;&lt;span class="preloader__spinner"&gt;&lt;/span&gt; &lt;em&gt;Loading map&amp;#8230;&lt;/em&gt;&lt;/span&gt;').load('/includes/modules/adaptive-google-map/js.php', function() { $.getScript('http://maps.google.com/maps/api/js?sensor=false&amp;callback=initialize', function(){}); }); }, // Not palm size viewport match: function() { mapStaticContainer.hide(); mapDynamicContainer.show(); // Need this so the map fully renders when going from `match` -&gt; `unmatch` -&gt; `match` if (typeof(map) != 'undefined') { var center = map.getCenter(); google.maps.event.trigger(map, 'resize'); map.setCenter(center); } }, // Palm size viewport unmatch: function() { mapStaticContainer.show(); mapDynamicContainer.hide(); } }, true).listen(); }); </code></pre> <p>The contents of the file AJAX'd in via jQuery <code>load()</code>: <strong>/includes/modules/adaptive-google-map/js.php</strong>:</p> <pre><code>&lt;div id="map_canvas"&gt;&lt;/div&gt; &lt;script&gt; //function initialize() { function initialize(lat, long) { var myLatlng = new google.maps.LatLng(lat, long); //var myLatlng = new google.maps.LatLng(-33.867487, 151.20699); var myOptions = { zoom: 15, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false } map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map, animation: google.maps.Animation.DROP }); // Center Google Maps on browser resize (https://stackoverflow.com/questions/8792676/center-google-maps-v3-on-browser-resize-responsive) var center; function calculateCenter() { center = map.getCenter(); } google.maps.event.addDomListener(map, 'idle', function() { calculateCenter(); }); google.maps.event.addDomListener(window, 'resize', function() { map.setCenter(center); }); } &lt;/script&gt; </code></pre> <p>If I hardcode the lat/long coords in the <code>initialize()</code> script above (commented out lines) everything works fine it's when I'm trying to pass in the <code>lat</code> / <code>long</code> var's from within the page the map is being inserted that I can't do.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload