Добавить элементы списка на карту Google

Question

У меня есть PHP-скрипт, который генерирует список мест, и мне нужно добавить их на карту Google на той же странице.Несмотря на МНОГИЕ учебные пособия в Интернете, я не смог найти простой способ сделать это.Мне интересно знать, есть ли для этого простой фрагмент кода javascript / php ... без обращения к плагину JQuery и т. Д.

<ul id="myPlaces">
<li name="Pan Africa Market" address="1521 1st Ave, Seattle, WA" lat="47.608940" lng="-122.340141" type="restaurant">Pan Africa Market</li>
<li name="Buddha Thai & Bar" address="2222 2nd Ave, Seattle, WA" lat="47.613590" lng="-122.344391" type="bar"/>Buddha Bar</li>
<li name="The Melting Pot" address="14 Mercer St, Seattle, WA" lat="47.624561" lng="-122.356445" type="restaurant"/>Melting Pot</li>
</ul>

Карта Google будет просто содержать маркеры с этими местоположениями на ней,Естественно, места будут меняться, поэтому их нельзя будет жестко закодировать.

Answer 1

Простой jQuery может сделать это для вас с каждой функцией. Для примера кода вам нужен объект Google Maps:

$('#myPlaces li').each(function(index, el) {

    new google.maps.Marker({
        position: new google.maps.LatLng($(el).attr("lat"), $(el).attr("lng")),
        map: map,
        title: $(el).attr("name")
    });

});

См. Доку для получения дополнительной информации:

• http://api.jquery.com/each
• http://code.google.com/intl/en-EN/apis/maps/documentation/javascript/reference.html#Marker

В простом JS можно написать больше кода, и это можно сделать с помощью функции getElementsByTagName, которую вы можете вызвать в документе или дочернем узле:

var i, list, places, place, lat, lng, placeName;

list = document.getElementById("myPlaces");
places = list.getElementsByTagName("li");

for (i = 0; i < places.length; i += 1) {
    place = places[i];
    lat = place.getAttribute("lat");
    lng = place.getAttribute("lng");
    placeName = place.getAttribute("name");

    new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: map,
        title: placeName
    });
}

Answer 2

Soc получил первое место, но да, это в основном то, как вы это делаете, но одной из рекомендаций было бы, чтобы php сгенерировал объект JSON с данными и использовал его для генерации списка html и маркеров для карты.Если это часть большого веб-сайта, безусловно, стоит сделать это таким образом.Получение данных для карты из HTML, как правило, не очень хороший дизайн.

Google Maps JavaScript API