Добавление нескольких маркеров на карту Jquery-ui

Question

Я пытаюсь добавить несколько маркеров и связанное с ними информационное окно в jquery-ui-map, и не могу достичь никакого результата.

Я попробовал это:

$('#map').gmap('addMarker', {'position': '<?php echo $city->city_latitude; ?>,<?php echo $city->city_longitude; ?>', 'bounds': true});

Но это не работает.

Моя карта инициализируется до этого кода и работает:

$(function() {
    $('#map').gmap({'zoom':8, 'center': '45.558295,5.776062'});
});

Кто-нибудь знает как это сделать?

Answer 1

Кажется, что вы пытаетесь запустить php в браузере, который не будет работать. Попробуйте сначала добавить маркер с жестко заданными значениями, а затем подумайте, как передать эти значения в браузер. Пример:

(function() {
  var $map = $('#map');
  $map.gmap({zoom:8, center: '45.558295,5.776062'});
  $map.gmap('addMarker', {position: '45.558295,5.776062', bounds: true});
})();

Если это работает для вас, тогда вы можете начать думать о том, как вы хотите передать эти координаты широты и долготы с сервера в браузер. Вы можете использовать атрибуты данных или ajax-вызовы, например. Вот как вы можете использовать атрибуты данных:

PHP / HTML:

<?php $city_lat_lng = "{$city->city_latitude},{$city->city_longitude}"; ?>

<div id="city-data" data-lat-lng="<?php echo $city_lat_lng; ?>" style="display:none;"></div>
...rest of your html code below

JS:

(function() {
  var $map = $('#map');
  var cityLatLng = $('#city-data').data('lat-lng');
  $map.gmap({zoom:8, center: '45.558295,5.776062'});
  $map.gmap('addMarker', {position: cityLatLng, bounds: true});
})();