Google Map API V3 — нажмите на маркер, чтобы показать больше информации в виде наложения (как в Google Maps)

Мы используем Google Map Api V3 для загрузки карты Google в HTML-контейнер. У нас есть форма поиска местоположения. При отправке мы получим доступные местоположения и установим маркеры на карте. Как только маркеры загружены, при нажатии на каждый маркер нам нужно показать заголовок, адрес и дизайн, как у нас на карте Google. (В картах Google — при нажатии на красный маркер мы можем увидеть окно дополнительной информации с дополнительными сведениями, такими как звезды, маршруты, поиск поблизости, сохранить на карту, еще ..)

Есть ли у нас встроенная функция API для загрузки? окно наложения, как указано выше. Или у нас нет функции для загрузки деталей, подобных тем, которые у нас есть в настоящее время на карте Google.

При поиске в документах Google и Map я вижу опции для отображения окна наложения и записи содержимого внутри поля. Но я не видел вариантов загрузки контента по мере необходимости.

Я вставил код ниже для справки.

       var map = null;
       gmap_ready = function (){
    var myLatlng = new google.maps.LatLng(43.834527,-103.564457);
    var myOptions = {
      zoom: 3,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

}

   function fnLoadMarkers(){
var locations  = [
    ['S Dakota', 43.834527,-103.564457, 1],
    ['Texas', 31.428663,-99.418947, 2],
    ['California', 36.668419,-120.249025, 3],
    ['Newyork', 43.197167,-76.743166, 4],
    ['Missouri', 38.410558,-92.73926, 5]
];
setMarkers(map,locations);
   }
 function setMarkers(map, locations) {
var image = 'images/marker.gif';

for (var i = 0; i < locations.length; i++) {
    var currLocation = locations[i];
    var latLng = new google.maps.LatLng(currLocation[1], currLocation[2]);
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        icon: image,
        title: currLocation[0],
        zIndex: currLocation[3]
    });
    google.maps.event.addListener(marker, 'click', function() {
        var latitude = this.position.lat();
        var longitude = this.position.lng();
        window.open("http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q="+latitude+","+longitude+"&sll="+latitude+","+longitude+"&sspn=0.172749,0.4422&ie=UTF8&ll="+latitude+","+longitude+"&spn=0.162818,0.4422&z=11&iwloc=A");
    });
  }

}

Если есть какой-либо намек на то, как добиться этих результатов, он будет полезен. Также подскажите, возможно ли это через Google API V3.

Заранее спасибо,

С уважением

Шринивасан.C

9
задан Srinivasan 12 June 2012 в 15:29
поделиться