3

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 ?

Pauloscorps
  • 564
  • 1
  • 6
  • 16
  • what is the rendered output of the line which *doesn't work*? – Michal Klouda Oct 31 '12 at 09:42
  • Nothing appears, I don't even have errors in my JS console. – Pauloscorps Oct 31 '12 at 10:43
  • have you checked the page source to make sure the php code is spitting out the lat and lng correctly? The only other thing that I can think is that the map has not finished initializing by the time you are trying to add it to the map. In that case I would expect an error but one never knows. Is there any reason you can not put these markers in the call back from the initialize? – hcker2000 Nov 28 '12 at 15:40

1 Answers1

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});
})();
ianstarz
  • 417
  • 4
  • 12