Javascript 在一个页面中显示两个谷歌地图

谷歌代码适用于一张地图，但我设法在一个页面中显示两张地图。问题是

infowindow

和

marker

对于第二个映射不起作用。如何正确设置

HTML

---

如何将函数区分为两个映射，以便它分别加载

infowindow

和

marker

的值？

请尝试以下方法

function init_map() {
    var myOptions = {
        zoom: 16,
        styles: [{
            stylers: [{
                saturation: -50
            }]
        }],
        center: new google.maps.LatLng(28.529627, 77.218068),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var myOptions2 = {
        zoom: 12,
        styles: [{
            stylers: [{
                saturation: -50
            }]
        }],
        center: new google.maps.LatLng(23.529627, 72.218068),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
    map2 = new google.maps.Map(document.getElementById('gmap_canvas2'), myOptions2);

    //FIRST MARKER

    marker1 = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(28.529627, 77.218068)
    });
    infowindow1 = new google.maps.InfoWindow({
        content: 'Welcome'
    });
    google.maps.event.addListener(marker1, 'click', function() {
        infowindow1.open(map, marker1);
    });
    infowindow1.open(map, marker1);


    //SECOND MARKER

    marker2 = new google.maps.Marker({
        map: map2,
        position: new google.maps.LatLng(23.529627, 72.218068)
    });
    infowindow2 = new google.maps.InfoWindow({
        content: 'Welcome'
    });
    google.maps.event.addListener(marker2, 'click', function() {
        infowindow2.open(map2, marker2);
    });
    infowindow2.open(map2, marker2);

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

---

创建两个不同的

google.maps.Map

对象、两个不同的

infoWindow

对象和两个独立的

google.maps.Marker

对象，并将每个标记添加到其关联的映射中。请参阅现有示例

谢谢。如果允许的话，我将在4分钟内将此答案标记为正确：）@ElaineByene很高兴帮助您，希望您将其标记为正确答案。

function init_map() {
    var myOptions = {
        zoom: 16,
        styles: [{
            stylers: [{
                saturation: -50
            }]
        }],
        center: new google.maps.LatLng(28.529627, 77.218068),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var myOptions2 = {
        zoom: 12,
        styles: [{
            stylers: [{
                saturation: -50
            }]
        }],
        center: new google.maps.LatLng(23.529627, 72.218068),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
    map2 = new google.maps.Map(document.getElementById('gmap_canvas2'), myOptions2);

    //I don't know how to call this function below separately?

    marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(28.529627, 77.218068)
    });
    infowindow = new google.maps.InfoWindow({
        content: 'Welcome'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
    });
    infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);

function init_map() {
    var myOptions = {
        zoom: 16,
        styles: [{
            stylers: [{
                saturation: -50
            }]
        }],
        center: new google.maps.LatLng(28.529627, 77.218068),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var myOptions2 = {
        zoom: 12,
        styles: [{
            stylers: [{
                saturation: -50
            }]
        }],
        center: new google.maps.LatLng(23.529627, 72.218068),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
    map2 = new google.maps.Map(document.getElementById('gmap_canvas2'), myOptions2);

    //FIRST MARKER

    marker1 = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(28.529627, 77.218068)
    });
    infowindow1 = new google.maps.InfoWindow({
        content: 'Welcome'
    });
    google.maps.event.addListener(marker1, 'click', function() {
        infowindow1.open(map, marker1);
    });
    infowindow1.open(map, marker1);


    //SECOND MARKER

    marker2 = new google.maps.Marker({
        map: map2,
        position: new google.maps.LatLng(23.529627, 72.218068)
    });
    infowindow2 = new google.maps.InfoWindow({
        content: 'Welcome'
    });
    google.maps.event.addListener(marker2, 'click', function() {
        infowindow2.open(map2, marker2);
    });
    infowindow2.open(map2, marker2);

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