无法从外部外部初始化脚本加载Google Map lat / long坐标

时间:2013-03-19 06:21:09

标签: jquery google-maps-api-3

查看this question以查看一切正常的代码设置。

我正在使用这个完全相同的自适应地图解决方案的房地产网站,但我在网站上有许多页面需要地图(属性详细信息页面)所以我需要一种方法来嵌入lat / long坐标每个属性详细信息页面都有外部initialize()脚本,但我无法使用它。

我在lat脚本中添加了2 long / initialize()个var:

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

然后在需要地图的页面上我尝试了这个:

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

但是没有拾取坐标: enter image description here

我确定这与中的所有内容的加载有关initialize()脚本是通过jQuery load()进行AJAX的,然后一旦加载了地图通过jQuery的$.getScript加载API,这一切都发生在$(window).load上。我只是坚持拉/长坐标如何配合这个设置?

- 编辑 -

我会尽可能简单地分解代码设置:

在我的外部全局JS文件中,我已经设置了使用Enquire JS库的自适应Google Map解决方案:

$(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();

});

通过jQuery load()进行AJAX文件的内容: /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>

如果我在上面的initialize()脚本(注释掉的行)中对lat / long coords进行硬编码,那么当我尝试传入lat / long var时,一切正常从页面内插入我不能做的地图。

1 个答案:

答案 0 :(得分:0)

我想通了,我需要从这里删除变种:

function initialize(lat, long) {

就是这样:

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

然后在地图使用的页面上只有这个内联JS:

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