在一个页面上具有多个标记的多重Google地图。

Question

我试图用谷歌地图API V3在页面上放置带有不同位置的多个标记的2个谷歌地图。这一步我已经得到了：

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

    } 

但是当我运行此，第一张地图将正常工作和显示位置等正确的号码但是，当涉及到第二个它不会加载，给我控制台中出现此错误“Uncaught TypeError：无法读取属性'lat'为null”。我非常困惑，为什么它这样做，我根本找不到它。

谢谢！

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

你两次调用相同的地图实例的fitBounds - 方法：虽然这些参数被定义为需要

map.fitBounds(bounds2); 

应该

map2.fitBounds(bounds2);