Google maps api V3 - Добавление нескольких маркеров динамически из результатов запроса

Question

Я пытаюсь настроить карту на странице с несколькими ссылками, расположенными под ней, которые при нажатии будут динамически запрашивать мою базу данных и выводить набор результатов на карту.Я потратил довольно много времени на поиски, но не могу найти то, что ищу.Я дошел до того, что использовал AJAX для возврата координат широты и долготы, но я ошибаюсь при попытке создать маркеры на карте, но ничего не появляется, хотя я не генерирую ошибок.

Answer 1

Код не проверен, но вы можете сделать что-то вроде этого

Объявить карту, маркеры

var map;
var markersArray = [];
var myOptions = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),  myOptions);

Ниже функция добавит точку на карту

function plotPoint(srcLat,srcLon,title,popUpContent,markerIcon)
{
    var myLatlng = new google.maps.LatLng(srcLat, srcLon);            
    var marker = new google.maps.Marker({
          position: myLatlng, 
          map: map, 
          title:title,
          icon: markerIcon
      });
    markersArray.push(marker);
    var infowindow = new google.maps.InfoWindow({
        content: popUpContent
    });
      google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });                                          
}

Получите ваши очки и добавьте их как

var lat = 44.856051;
var lng = -93.242539;
plotPoint(lat,lng,'Mall of America','<span class="gBubble"><b>Mall of America</b><br>60 East Brodway<br>Bloomington, MN 55425</span>');

Answer 2

У вас есть это для создания новых маркеров:

var marker = new google.maps.Marker({
    position: results.DATA[i][2],
    map: map,
    title:"New marker"
});
marker.setMap(map);

Значение results.DATA[i][2] похоже на "54.016893, -0,970721". Но позиция должна быть объектом LatLng:

// turn "54.016893,-0.970721" into [54.016893,-0.970721"]
var latLng = results.DATA[i][2].split(",");

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(latLng[0], latLng[1]),
    map: map,
    title:"New marker"
});

PS: также, если вы указываете карту в markerOptions, вам также не нужно вызывать функцию setMap ().