배열에서 하나의 정보창 만 표시

포인터와 정보 모음 배열을 가진 Google지도가 있습니다. 페이지 /지도가로드 될 때 특정 정보창을 표시하고 싶습니다.배열에서 하나의 정보창 만 표시

내가 할 것이 방법이 :

이 내 코드입니다 :

function initialize() { 

var map; 
var bounds = new google.maps.LatLngBounds(); 
var mapOptions = { 
    center: new google.maps.LatLng(53.47921, -1.00201), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 

}; 


map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
map.setTilt(45); 

// Car Parks 
var markers = [ 
    ['location 1', 53.47921, -1.00201], 
    ['location 2', 53.50726,-1.04641], 
    ['location 3', 53.48313,-1.01016], 
    ['location 4', 53.48197,-1.00954], 
    ['location 5', 53.48319,-1.00842] 
]; 



var infoWindowContent = [ 
    ['<div class="info_content">' + 
    '<strong>text 1' +  
    '</div>'], 
    ['<div class="info_content">' + 
    '<strong>text 2' +  
    '</div>'], 
    ['<div class="info_content">' + 
    '<strong>text 3' +  
    '</div>'], 
    ['<div class="info_content">' + 
    '<strong>text 4' +  
    '</div>'], 
    ['<div class="info_content">' + 
    '<strong>text 5' +  
    '</div>'] 
]; 

// Display multiple markers on a map 
var infoWindow = new google.maps.InfoWindow(), marker, 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] 
    }); 

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

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

}

이 어떤 도움이 좋은 것입니다, 감사합니다!

출처

2013-11-22 user3022336

example at jsBin을 참조하십시오.

가 좀

스타일이 추가 된 당신의 예를 변경, 적절한 높이와 폭
초기 줌 레벨은 이제 문자열과 마크 업 단지 배열가 수정됩니다
infoWindowContent 누락 된 않았다 (</strong>이었다 누락)
LatLngBounds() : SW 및 NE 점이 필요합니다. 지금 for 루프 여기

에서 호출 함수에 생성됩니다 bounds.extend()

정보창을 사용하도록 변경하여 페이지로드의 첫 번째 정보 창이 열립니다 the 2nd example입니다. 당신은 그 중 하나를 열 수 있도록 변경할 수 있습니다.

출처

2013-11-23 19:39:28

위의 감사합니다 :)지도가로드 될 때 기본적으로 첫 번째 마커를 열어 볼 수있는 방법이 있습니까? 감사합니다 – user3022336

해야합니다. 그러나 모든 마커와 infoWindow를 저장하기 위해 코드를 약간 변경해야합니다. 그런 다음 모든 객체에'click' 이벤트를 첨부하고 그 중 하나만로드합니다. –

@ user3022336 : 마커 및 정보 창을 배열로 사용할 수 있도록 코드를 변경했습니다. –

배열에서 하나의 정보창 만 표시

답변

관련 문제