如何在2个不同的页面上显示2个谷歌地图?

时间:2016-12-08 11:41:42

标签: javascript wordpress google-maps google-maps-api-3

我继承了一个自定义WordPress网站,其中包含一个显示地图和标记的位置页面。我正在尝试使用不同的位置创建该页面的副本。

我的问题是我的第二张地图根本没有显示,我知道它正在工作,因为如果我将第二张地图放在第一页上,两张地图都能正确显示,只有在不同的页面才能显示地图无法加载,有什么问题?

这是代码,

function initialize() {

    directionsDisplay = new google.maps.DirectionsRenderer();

    var mapOptions = {
        zoom: 13,
        center: cityliving,
        panControl: false,
        zoomControl: true,
        scrollwheel: false,
        navigationControl: false,
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: false,
        draggable: true
    }

    var mapOptions2 = {
        zoom: 13,
        center: bishopsgate,
        panControl: false,
        zoomControl: true,
        scrollwheel: false,
        navigationControl: false,
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: false,
        draggable: true
    }

    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    map2 = new google.maps.Map(document.getElementById('map_canvas2'), mapOptions2);

    directionsDisplay.setMap(map);
    directionsDisplay.setMap(map2);

    var image = '<?php bloginfo('
    template_directory ');?>/img/dot.png';

    marker = new google.maps.Marker({
        position: cityliving,
        title: "City Living London",
        icon: image
    });

    marker2 = new google.maps.Marker({
        position: bishopsgate,
        title: "City Living London",
        icon: image
    });

    var contentString = '<div id="content">' +
        '<div id="siteNotice">' +
        '</div>' +
        '<h1><img src="<?php bloginfo('
    template_directory ');?>/img/cityliving.svg" height="50px"></h1>' +
        '<div id="bodyContent">' +
        '<p>21 Bowling Green Lane <br>London EC1R 0BD</p>' +
        '</div>' +
        '</div>';

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
    });

    google.maps.event.addListener(marker2, 'click', function() {
        infowindow.open(map2, marker2);
    });

    marker.setMap(map);
    marker2.setMap(map2);

    calculateDistances();
}

google.maps.event.addDomListener(window, 'load', initialize);

//修改

enter image description here

1 个答案:

答案 0 :(得分:0)

我认为您在其他页面上有不同的脚本导致javascript错误,否则您没有正确嵌入脚本。

这段代码对我来说非常好,你在错误的地方寻找问题。

如果控制台(chrome - &gt; inspect element - &gt; console)返回任何错误,请尝试检查这两个页面。