Question

我在同一页面上添加了两张谷歌地图，但它在点击标记上显示相同的位置信息，请任何人都能看到我错误的地方？你也可以在这里查看codepen

https://codepen.io/expertsuraz/pen/ZxyRMV 提前致谢以下是代码：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCiaU3JVL6ZiGg74Z9jLynvjaWpbkjfMD4"></script>
<script>
google.maps.event.addDomListener(window, 'load', init);
function init() {
    var address = "<p>228 Park Ave s New York NY 10003</p>";
    var address1 = "<p>5737 Kanan Road #330 Agoura Hills, CA 9130</p>"; 
    var myLatlng = new google.maps.LatLng(40.7376487, -73.9886182); 
    var myLatlng1 = new google.maps.LatLng(34.1555359, -118.7602428);   
    var mapOptions = {
        // How zoomed in you want the map to start at (always required)
        zoom: 16,
        // The latitude and longitude to center the map (always required)
        center: myLatlng, // New York
        // How you would like to style the map. 
        // This is where you would paste any style found on Snazzy Maps.        

        styles: [{"featureType": "water", "elementType": "geometry", "stylers": [{"color": "#193341"}]}, {"featureType": "landscape", "elementType": "geometry", "stylers": [{"color": "#2c5a71"}]}, {"featureType": "road", "elementType": "geometry", "stylers": [{"color": "#29768a"}, {"lightness": -37}]}, {"featureType": "poi", "elementType": "geometry", "stylers": [{"color": "#406d80"}]}, {"featureType": "transit", "elementType": "geometry", "stylers": [{"color": "#406d80"}]}, {"elementType": "labels.text.stroke", "stylers": [{"visibility": "on"}, {"color": "#3e606f"}, {"weight": 2}, {"gamma": 0.84}]}, {"elementType": "labels.text.fill", "stylers": [{"color": "#ffffff"}]}, {"featureType": "administrative", "elementType":"geometry", "stylers": [{"weight": 0.6}, {"color": "#1a3541"}]}, {"elementType": "labels.icon", "stylers": [{"visibility": "off"}]}, {"featureType": "poi.park", "elementType": "geometry", "stylers": [{"color": "#2c5a71"}]}]

    };
    var mapOptions1 = {
        // How zoomed in you want the map to start at (always required)
        zoom: 16,
        // The latitude and longitude to center the map (always required)
        center: myLatlng1, // New York
        // How you would like to style the map. 
        // This is where you would paste any style found on Snazzy Maps.        

        styles: [{"featureType": "water", "elementType": "geometry", "stylers": [{"color": "#193341"}]}, {"featureType": "landscape", "elementType": "geometry", "stylers": [{"color": "#2c5a71"}]}, {"featureType": "road", "elementType": "geometry", "stylers": [{"color": "#29768a"}, {"lightness": -37}]}, {"featureType": "poi", "elementType": "geometry", "stylers": [{"color": "#406d80"}]}, {"featureType": "transit", "elementType": "geometry", "stylers": [{"color": "#406d80"}]}, {"elementType": "labels.text.stroke", "stylers": [{"visibility": "on"}, {"color": "#3e606f"}, {"weight": 2}, {"gamma": 0.84}]}, {"elementType": "labels.text.fill", "stylers": [{"color": "#ffffff"}]}, {"featureType": "administrative", "elementType":"geometry", "stylers": [{"weight": 0.6}, {"color": "#1a3541"}]}, {"elementType": "labels.icon", "stylers": [{"visibility": "off"}]}, {"featureType": "poi.park", "elementType": "geometry", "stylers": [{"color": "#2c5a71"}]}]

    };
    // We are using a div with id="map" seen below in the <body>
    var mapElement = document.getElementById('map');
    var mapElement1 = document.getElementById('map1');
    // Create the Google Map using our element and options defined above
    var map = new google.maps.Map(mapElement, mapOptions);
    var map1 = new google.maps.Map(mapElement1, mapOptions1);

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

    var infowindow1 = new google.maps.InfoWindow({
        content: address1
    });

    var cmarker = "https://www.myarchway.com/wp-content/themes/archway/images/map-marker.png";
    var cmarker1 = "https://www.myarchway.com/wp-content/themes/archway/images/map-marker.png";

    var marker = new google.maps.Marker({
        position: myLatlng,
        icon: cmarker,
        map: map,
        title: ''
    });
    var marker1 = new google.maps.Marker({
        position: myLatlng1,
        icon: cmarker1,
        map: map1,
        title: ''
    });

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

google.maps.event.addListener(marker1, 'click', function() {
        infowindow.open(map1,marker1);
    });
    // show map, open infoBox 
    google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
        infowindow.open(map, marker);
    });

    // show map, open infoBox 
    google.maps.event.addListenerOnce(map1, 'tilesloaded', function() {
        infowindow.open(map1, marker1);
    });
}
</script>

这是地图的CSS：

 #map {width: 100%; height: 450px;}
        div#map1 {
    width: 100%;
    height: 400px;
    margin-top: 50px;
}
    .gm-style-iw {background: #274052; border:2px solid #f57e20; border-radius:50px; padding:10px; }
    .gm-style-iw p {width:230px; vertical-align: middle; display: table-cell; text-align: center; color:#fff; font-size:18px;}

这是MAP的HTML代码。我添加到divs里面调用那些地图。

<div id="map"></div>

<div id="map1"></div>

Answer 1

这里：

google.maps.event.addListener(marker1, 'click', function() {
    infowindow1.open(map1,marker1);
});

而不是调用infowindow.open

在同一页面上添加两个Google地图

1 个答案: