Question

我尝试使用Google Maps API V3在页面上放置具有不同位置的多个标记的2个Google地图。我已经走到了这一步：

  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);
});
function initialize() {
    var map,map2,mapOptions,mapOptions2,markers,markers2,infoWindowContent,infoWindowContent2;
    var bounds = new google.maps.LatLngBounds();
    var bounds2 = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap',
        scrollwheel: false,
        styles:[
  {
    "stylers": [
      { "saturation": -100 }
    ]
  }
],
    };

   var mapOptions2 = {
        mapTypeId: 'roadmap',
        scrollwheel: false,
        styles:[
  {
    "stylers": [
      { "saturation": -100 }
    ]
  }
],
    };

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

    // Multiple Markers
    var markers = [
        ['TITLE HERE', 1,1],
        ['TITLE HERE', 1,1]
    ];

    var markers2 = [
        ['TITLE HERE', 1,1],
        ['TITLE HERE', 1,1]
    ];




        var infoWindowContent = [
        ['<div class="info_content">' +
        '<h4>TITLE HERE</h4>' +
        'info here'  +     
           '</div>'],
        ['<div class="info_content">' +
        '<h4>TITLE HERE</h4>' +
        'info here' +
        '</div>']
    ]; 

        var infoWindowContent2 = [
        ['<div class="info_content">' +
        '<h4>TITLE HERE</h4>' +
        'info here'  +     
           '</div>'],
        ['<div class="info_content">' +
        '<h4>TITLE HERE</h4>' +
        'info here' +
        '</div>']
    ];        

    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;
    var infoWindow2 = new google.maps.InfoWindow(), marker2, 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],
            icon: "<?php echo get_stylesheet_directory_uri(); ?>/images/marker.png"

        });

        // 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);
    }


    for( i = 0; i < markers2.length; i++ ) {
        var position2 = new google.maps.LatLng(markers2[i][1], markers2[i][2]);
        bounds2.extend(position2);
        marker2 = new google.maps.Marker({
            position: position2,
            map: map2,
            title: markers2[i][0],
            icon: "<?php echo get_stylesheet_directory_uri(); ?>/images/marker.png"

        });

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

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

    // 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(8);
        google.maps.event.removeListener(boundsListener);
    });

    }

但是当我运行它时，第一张地图将正常工作并显示正确数量的位置等。但是当涉及第二张地图时它不会加载并在控制台中给出我这个错误＆＃34 ;未捕获的TypeError：无法读取属性＆＃39; lat＆＃39; of null＆＃34;。我很困惑，为什么它这样做，我根本无法搞清楚。

谢谢！

Answer 1

我建议您在尝试过度复杂的Maps API实现之前先阅读documentation。

您的代码中存在多个问题，例如未声明的变量等。

您肯定需要解决的一件事是 mapOptions ：

有2个必需参数：center和zoom。此外，mapTypeId也不能像你那样声明。

var mapOptions = {
    center: new google.maps.LatLng(0,0),
    scrollwheel: false,
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

首先尝试解决此问题，看看它是否有所改善。

Answer 2

您同时调用相同Google地图实例的fitBounds - 方法：map

第二个电话：

map.fitBounds(bounds2);

应该是

map2.fitBounds(bounds2);

一页上有多个带有多个标记的Google地图。

2 个答案: