Создайте карту Google v3 после нажатия на элемент

Question

То, что я хотел бы сделать, это создать карту после нажатия на элемент. Я использую Google Maps v3.

У меня есть страница со списком недвижимости, которая показывает 15 результатов / свойств на страницу. Вместо создания 15 карт, я бы хотел, чтобы при нажатии на элемент была создана 1 карта. После нажатия происходит процесс генерации карты. Карта холст / div изначально скрыта.

Я думал, что отношение элемента click и элемента карты будет примерно таким:

<span id="12-1234" lat="10.101010" lng="-25.252525" class="view-map">View Map</span>
... other markup ...
<div id="12-1234-map" class="google-map"></div>

Используя HTML5, я добавляю пользовательские атрибуты к элементу о свойстве, такие как id , широта и долгота , чтобы я мог изменить значок и отцентрировать карту.

У меня есть действующая карта, из которой я загружаю маркеры из динамически генерируемого XML-файла на основе параметров поиска.

Я смотрел на addListener и addDomListener, но мне не повезло. Большинство поисков просто выявляют проблемы, связанные с маркерами.

У меня была такая странная штука, которая использовала jQuery. Примерно так:

$('.view-map').click(function(){
     google.maps.event.addDomListener( this, 'click', initialize );
     $("#" + this.id + "-map").toggle();
});

Очевидно, что это не было идеально, так как вам нужно было щелкнуть элемент еще пару раз, прежде чем увидеть карту, поскольку вы связали с ней еще одно событие щелчка после того, как уже щелкнули по нему.

Я чувствую, что упускаю что-то очевидное.

Answer 1

function initialize(link) {
  var mapDiv = $('#' + link.attr('id') + '-map');
  mapDiv.toggle();

  var options = {
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(link.attr('lat'), link.attr('lng'))
  };

  var map = new google.maps.Map(mapDiv[0], options);
}

$('.view-map').click(function(){
  initialize(this);
});

Answer 2

В вашей функции щелчка карты-вида просто вызовите метод инициализации карты, передав соответствующие значения.Эта функция инициализации может затем показать div карты, а затем соответствующим образом инициализировать карту.

Уродливый и непроверенный пример:

var params = {
  lat : 47.5,
  lng : -122.5 }

$('.view-map').click(params, function(){
  params.id = this.id //e.g. 1234
  initialize(params);
  });

function initialize(params){
 // show the 1234-map div, initialize the map
}