Как добавить несколько маркеров на Google карту используя данные из базы через PHP и JavaScript

Оффтоп javascript
1

Помогите решить проблему с отображением множественных маркеров на Google Maps

У меня есть код, который показывает один маркер на карте с фиксированными координатами 31.5 и 74.3:

var mapMarker = new google.maps.Marker({
  position: new google.maps.LatLng(31.5, 74.3),
  map: myMap,
  title: 'Привет Лахор!'
});

Также есть функция, которая получает координаты из базы данных через выпадающие списки:

function GetCoordinates() {
  var longitudeCount = document.getElementById('lonSelect').length;
  for(var x=0; x<longitudeCount; x++) {
    alert(document.getElementById('lonSelect').options[x].text);
  }
  var latitudeCount = document.getElementById('latSelect').length;
  for(var y=0; y<latitudeCount; y++) {
    alert(document.getElementById('latSelect').options[y].text);
  }
}

Проблема в том, что когда я пытаюсь передать координаты из цикла в параметр position для маркера, получаю синтаксическую ошибку. Как правильно создать несколько маркеров на карте, используя координаты из базы данных? Буду благодарен за любую помощь с отображением множества маркеров.

2

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

3

Создавай маркеры внутри цикла, а не один раз снаружи. Попробуй так:

function GetCoordinates() {
  var longitudeCount = document.getElementById('lonSelect').length;
  for(var x=0; x<longitudeCount; x++) {
    var lon = document.getElementById('lonSelect').options[x].text;
    var lat = document.getElementById('latSelect').options[x].text;
    
    new google.maps.Marker({
      position: new google.maps.LatLng(parseFloat(lat), parseFloat(lon)),
      map: myMap
    });
  }
}

Используй parseFloat() для строк в числа, иначе координаты сломаются.

4

У меня была похожая задача пару месяцев назад, и я получал координаты прямо из базы данных с помощью PHP. Пропусти селекты - просто создай JSON массив в PHP и передай его в JavaScript. Пример: $coordinates = json_encode($db_results);, а потом обрабатывай этот массив в JS. Так гораздо проще работать с данными, и не будет проблем с селектами. Не забудь проверить координаты - пустые значения сломают твою карту.