Карты Гугл; добавить карту места в маркер

Как вы можете видеть на следующем изображении, div (вверху слева) показывает текущий адрес маркера/направления/сохранение.

Это было сделано с использованием встроенного кода iframe на картах google. Но как вы можете сделать то же самое с пользовательской "закодированной" картой?

geocoder = new google.maps.Geocoder();
geocoder.geocode({
 "address": nw.google_pointer
}, function(results, status) {
 if (status == google.maps.GeocoderStatus.OK) {
 var myOptions = {
 zoom: parseInt(nw.google_zoom),
 center: results[0].geometry.location,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 var marker = new google.maps.Marker({
 map: map,
 position: results[0].geometry.location,
 title: nw.google_pointer
 });
 } else {
 console.log('Geocode was not successful for the following reason: ' + status);
 }
});
2 ответа

jsbin с моим решением

Фон:

Мне понадобилось лучшее решение проблемы прокрутки колесика мыши здесь и здесь. Лучший способ получить поведение, которое я хотел, - это придерживаться API, но мне очень нравится карта, показанная во встроенной версии.

Метод:

  • Скопированный код карты и связанный css из встроенной версии.
  • В javascript добавьте карту html на визуализированную карту, когда она готова.

Моя настройка:

  • Взял параметр "Сохранить", потому что он не работает.
  • Позиционированная карта в правом верхнем углу - посмотрите на html, который добавлен в javascript, он жестко закодирован с абсолютной позицией, вы можете изменить это или связать его с классом, если хотите.

Надеюсь, это сработает для вас!


Я добавил вторую карту в ответ @jcsmesquita, но на двух картах есть одинаковые карты: http://jsbin.com/vixehodaka/edit?html,css,js,output

поэтому я немного изменил код javascript: jsbin.com/dezorezohe/edit?html,css,js,output

licensed under cc by-sa 3.0 with attribution.