如何在2個不同頁面上顯示2個谷歌地圖？

Question

我已經繼承了一個自定義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); 

//編輯

Answer 1

我覺得你有不同的腳本導致其他網頁上的JavaScript錯誤，否則你不會嵌入您腳本正確。

這段代碼對我來說看起來非常好，你在錯誤的地方尋找問題。

如果console（chrome - > inspect element - > console）返回任何錯誤，請嘗試檢查兩個頁面。