Javascript 谷歌地图API-具有多个地图的多个标记

我正在创建一个新页面，基本上有两个地图，上面有自己的标记

我已经成功地使用这里提供的代码获得了第一张地图，它工作得非常好。。。但是当我尝试复制代码并更改地图画布时，第二个地图不会加载

这是我目前的代码：

jQuery(function($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);

    // Asynchronously Load the map API 
    var script2 = document.createElement('script');
    script2.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize2";
    document.body.appendChild(script2);
});

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);

    // Multiple Markers
    var markers = [
        ['London Eye, London', 51.503454,-0.119562],
        ['Palace of Westminster, London', 51.499633,-0.124755]
    ];

    // Info Window Content
    var infoWindowContent = [
        ['<div class="info_content">' +
        '<h3>London Eye</h3>' +
        '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' +        '</div>'],
        ['<div class="info_content">' +
        '<h3>Palace of Westminster</h3>' +
        '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
        '</div>']
    ];

    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map  
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });

        // Allow each marker to have an info window    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(14);
        google.maps.event.removeListener(boundsListener);
    });

}

function initialize2() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas2"), mapOptions);
    map.setTilt(45);

    // Multiple Markers
    var markers = [
        ['London Eye, London', 51.503454,-0.119562],
        ['Palace of Westminster, London', 51.499633,-0.124755]
    ];

    // Info Window Content
    var infoWindowContent = [
        ['<div class="info_content">' +
        '<h3>London Eye</h3>' +
        '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' +        '</div>'],
        ['<div class="info_content">' +
        '<h3>Palace of Westminster</h3>' +
        '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
        '</div>']
    ];

    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map  
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });

        // Allow each marker to have an info window    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(14);
        google.maps.event.removeListener(boundsListener);
    });

}
</script>

jQuery（函数（$）{
//异步加载映射API
var script=document.createElement（'script'）；
script.src=”http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild（脚本）；
//异步加载映射API
var script2=document.createElement（'script'）；
script2.src=”http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize2";
document.body.appendChild（script2）；
});
函数初始化（）{
var映射；
var bounds=new google.maps.LatLngBounds（）；
变量映射选项={
mapTypeId:“路线图”
};
//在页面上显示地图
map=new google.maps.map（document.getElementById（“map_canvas”），mapOptions）；
地图.设置倾斜（45）；
//多重标记
变量标记=[
[London Eye，London'，51.503454，-0.119562]，
[伦敦威斯敏斯特宫，51.499633，-0.124755]
];
//信息窗口内容
var infoWindowContent=[
['' +
“伦敦眼”+
“伦敦眼是一个巨大的摩天轮，位于泰晤士河岸边。整个结构高135米（443英尺），车轮直径120米（394英尺）。
”+“，
['' +
“威斯敏斯特宫”+
“威斯敏斯特宫是英国议会两院下议院和上议院的会址。通常以其租户而称为议会大厦。
”+
'']
];
//在地图上显示多个标记
var infoWindow=new google.maps.infoWindow（），marker，i；
//在我们的标记阵列中循环并将每个标记放置在地图上
对于（i=0；i”+“，
['' +
“威斯敏斯特宫”+
“威斯敏斯特宫是英国议会两院下议院和上议院的会址。通常以其租户而称为议会大厦。
”+
'']
];
//在地图上显示多个标记
var infoWindow=new google.maps.infoWindow（），marker，i；
//在我们的标记阵列中循环并将每个标记放置在地图上
对于（i=0；i

---

有人做到了吗？

问题是您加载了两次Maps API JS文件，其中

var script = document.createElement('script');
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);

// Asynchronously Load the map API 
var script2 = document.createElement('script');
script2.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize2";
document.body.appendChild(script2);

您不需要这样做，只需加载一次即可

然后，除了地图画布的名称之外，您的两个函数

initialize

和

initialize2

几乎相同。这违背了使用函数的意义。去掉初始化2

将初始化中当前得到的内容移动到它自己的函数中；让我们称之为

createMap

。创建一个新的initialize函数，通过map callback参数调用，该函数使用需要设置的任何参数调用此createMap函数两次

jQuery(function($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
    document.body.appendChild(script);
});

function initialize() {
    createMap('map_canvas');
    createMap('map_canvas2');
}

function createMap(mapCanvas) {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById(mapCanvas), mapOptions);
    map.setTilt(45);

    // Multiple Markers
    var markers = [
        ['London Eye, London', 51.503454,-0.119562],
        ['Palace of Westminster, London', 51.499633,-0.124755]
    ];

    // Info Window Content
    var infoWindowContent = [
        ['<div class="info_content">' +
        '<h3>London Eye</h3>' +
        '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' +        '</div>'],
        ['<div class="info_content">' +
        '<h3>Palace of Westminster</h3>' +
        '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
        '</div>']
    ];

    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map  
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });

        // Allow each marker to have an info window    
        marker.addListener('click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = map.addListener(('bounds_changed', function() {
        this.setZoom(14);
        google.maps.event.removeListener(boundsListener);
    });
}