2013-11-22 2 views
0

У меня есть карта Google с массивом указателей и infowindows. Я хочу отобразить конкретную информацию, когда загружается страница/карта.Отображать только одно автоматическое предупреждение из массива

Как бы я это сделать:

Это мой код:

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

}

Любая помощь будет здорово, спасибо!

ответ

0

См. example at jsBin.

Я сделал некоторые изменения в вашем примере был добавлен

  • моделирование, правильную высоту и ширину
  • начальный уровень масштабирования отсутствовал
  • infoWindowContent теперь просто массив строки и разметки исправляется (</strong> был отсутствует)
  • LatLngBounds(): ему нужны точки SW и NE. Измененный использовать bounds.extend()
  • InfoWindow сейчас создается в функции, вызываемой из for петли

Вот the 2nd example, который открывает первый информационное окно при загрузке страницы. Вы можете изменить его, чтобы открыть любой из них.

+0

Спасибо за вышесказанное :) Есть ли способ открыть первый маркер по умолчанию при загрузке карты? Спасибо – user3022336

+0

Это должно быть. Но код нужно немного изменить, чтобы сохранить все маркеры и infoWindow. И затем присоедините событие «click» ко всем им и «загрузите» только один из них. –

+0

@ user3022336: Я изменил код, чтобы маркеры и информационные окна были доступны в массивах для использования –

Смежные вопросы