在一個頁面上具有多個標記的多重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);