한 페이지에 여러 개의 마커가있는 다중 Google지도.

Question

Google지도 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); 
    }); 

    } 

하지만 난이 프로그램을 실행할 때, 첫 번째지도는 잘 작동 등 위치의 정확한 수를 표시하지만 두 번째에 관해서는로드 날을 제공하지 않습니다 콘솔에서이 오류 "Uncaught TypeError : null의 속성 'lat'을 읽을 수 없습니다. 나는 그 일을하는 이유와 내가 전혀 이해할 수없는 것에 너무 당혹 스럽다.

감사합니다.

Answer 1

지도 API의 복잡한 구현을 시도하기 전에 documentation을 읽어 보시기 바랍니다. 2 개 필요한 매개 변수가

:

당신은 등 비 선언 된 변수와 같은 코드에서 몇 가지 문제를 가지고

당신은 확실히 수정해야

한 것은 하는 MapOptions입니다 : center 및 zoom. 또한 mapTypeId은 사용자가 선언 한대로 선언 할 수 없습니다.

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

더 나은 결과가 나오는지 먼저 확인하십시오.

Answer 2

같은지도 인스턴스의 fitBounds -method 두 번 전화 : 이러한 매개 변수가 필요로 정의되어 있지만

map.fitBounds(bounds2); 

map2.fitBounds(bounds2);