CODEWITHSUNDEEP
jquerymapsmarkersjquery-ui-map
Pauloscorps
Pauloscorps

Reputation: 564

Adding multiple markers on a Jquery-ui map

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 ?

Upvotes: 3

Views: 1182

Answers (1)

ianstarz
ianstarz

Reputation: 417

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

Upvotes: 1

Related Questions