Cannot load in Google Map lat/long coordinates from outside external initialize script

Question

Have a look at this question to see the code set-up which all works fine.

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 initialize() script pick it up but I can't get this to work.

I added 2 lat/long var's to the initialize() script:

function initialize(lat, long) {
    var myLatlng = new google.maps.LatLng(lat, long);

and then on the page needing a map I tried this:

<script>
    window.onload = function() {
        if (typeof(map) != 'undefined') {
             initialize(-33.867487,151.20699);
        }
    }
</script>

But the coordinates aren't picked up: enter image description here

I'm sure it's related to how everything is loading in i.e. the initialize() script is being AJAX'd in via jQuery load() then once that is loaded the Maps API loads in via jQuery's $.getScript and this all happens on $(window).load. I'm just stuck on how the lat/long coordinates can tie in with this set-up?

--EDIT--

I'll break down the code set-up as easy as I can:

In my external global JS file I've got this to set-up the adaptive Google Map solution which uses the Enquire JS library:

$(window).load(function() {

    var mapContainer = $('.map'),
    mapStaticContainer = $('.map__static'),
    mapDynamicContainer = $('<div class="map__dynamic"/>');

    /* --Enquire library-- */
    enquire.register(BPlap, {

        deferSetup: true,

        setup: function() {
            mapContainer.prepend(mapDynamicContainer);
            mapDynamicContainer.html('<span class="preloader"><span class="preloader__spinner"></span> <em>Loading map&#8230;</em></span>').load('/includes/modules/adaptive-google-map/js.php', function() {
                $.getScript('http://maps.google.com/maps/api/js?sensor=false&callback=initialize', function(){});
            });
        },

        // Not palm size viewport
        match: function() {
            mapStaticContainer.hide();
            mapDynamicContainer.show();
            // Need this so the map fully renders when going from `match` -> `unmatch` -> `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();

});

The contents of the file AJAX'd in via jQuery load(): /includes/modules/adaptive-google-map/js.php:

<div id="map_canvas"></div>
<script>
//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);
    });
}
</script>

If I hardcode the lat/long coords in the initialize() script above (commented out lines) everything works fine it's when I'm trying to pass in the lat / long var's from within the page the map is being inserted that I can't do.

You have to do more than just create a LatLng object to get Google Maps to initialise, can you post the rest of that function? — Richard, Mar 19 '13 at 06:44
See my other question for the entire code set-up (link above) including the `initialize()` script. — Chris Pearce, Mar 19 '13 at 06:52

score 0 · Answer 1 · answered Mar 20 '13 at 03:41

I figured it out, I needed to remove the vars from here:

function initialize(lat, long) {

So it was just this:

function initialize() {
    var myLatlng = new google.maps.LatLng(lat, long);

Then just have this inline JS on the page the map was being used:

<script>
var lat     = 53.43072,
    long    = -3.049134;
</script>

Cannot load in Google Map lat/long coordinates from outside external initialize script

1 Answers1