Adding multiple markers on a Jquery-ui map

Question

I am trying to add multiple markers and their associated info window to a jquery-ui-map, and I can't reach any result.

I tried this :

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

But it doesn't work.

My map is initialized before this code and works :

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

Does anyone know how to do ?

Answer 1

It seems as though your are trying to execute php in the browser, which will not work. Try adding the marker with hardcoded values first, then you can think about how to pass those values to the browser. Example:

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

If that works for you, then you can start thinking about how you want to pass those latitude and longitude coordinates from the server to the browser. You could use data attributes or ajax calls for example. Here's how you could use data attributes:

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});
})();