Google map API, add marker in ajax after initialize the map

Question

I know there have been some questions with related title, but I didn't find the answer that would suit me.

Here is my issue :

I am trying to print a map, with multiple marker in it, generated via a database. I have, below the map, some checkbox that would allow me to filter the marker on the map.

So, the first time I am loading the map, everything is well filtred (depending on what is checked by default), by I don't really understand how to add / remove marker from the map once it is already initialized. Do I have to reload the map, or am I missing something ?

Here is the relevant code :

<form> <input class="test" type="checkbox" name="type" value="1" onclick="test()" checked/>1<br/> <input class="test"type="checkbox" name="type" value="2" onclick="test()" checked/>2<br/> <input class="test"type="checkbox" name="type" value="3" onclick="test()" checked/>3<br/> <input class="test"type="checkbox" name="type" value="4" onclick="test()" checked/>4<br/>

<script> var checkedValues = $('input:checkbox:checked').map(function() { return this.value; }).get().join('-'); function fetchPlace(filtreType){ $.ajax({ url: "ajaxmap.php?type=" + filtreType, type : 'GET', dataType: 'json', success : function(data) { // Loop through our array of markers & place each one on the map for( i = 0; i < data.marker.length; i++ ) { var myLatlng = new google.maps.LatLng(data.marker[i].log,data.marker[i].lat); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'Hello World!' }); } } , error: function(){ /// traiter les erreur }, async : true }); }; function test (){ var checkedValues = $('input:checkbox:checked').map(function() { return this.value; }).get().join('-'); fetchPlace(checkedValues); }; fetchPlace(checkedValues);

Thanks for any help you could provide.

Loneept

I am filtering regarding the checkbox checked in the form. My ajax page then generate the array with markers latitude and longitude regarding wich checkbox are checked. — Loneept
– Loneept, Commented Apr 23, 2015 at 7:49
Right. What I'd do: add your markers to an array with the filterType in your ajax success function. This way you can easily reference them, toggle their display on the map, etc. Do you need an example? — MrUpsidown
– MrUpsidown, Commented Apr 23, 2015 at 8:06
Yes please. Is this the same kind of way that dgig is talking about in the answer below ? Because I still have some trouble understanding how it would work :/ — Loneept
– Loneept, Commented Apr 23, 2015 at 8:14

MrUpsidown · Accepted Answer · 2015-04-23 09:58:45Z

Here is what I did:

The 2 arrays of coords correspond to what you would get in your AJAX success.

markers is an array. In the addMarkers function, I create an array with the filter type value. Something like markers[filterType] = new Array();

This way, you can now easily identify markers of each type and toggle them on or off.

Of course you will need to adapt this to your needs (I used buttons, you used checkboxes, etc.) and maybe you only need to load your markers once, etc. But you should be able to get the idea.

var map; var markers = new Array(); var coords_1 = [ new google.maps.LatLng(60.32522, 19.07002), new google.maps.LatLng(60.45522, 19.12002), new google.maps.LatLng(60.86522, 19.35002), new google.maps.LatLng(60.77522, 19.88002), new google.maps.LatLng(60.36344, 19.36346), new google.maps.LatLng(60.56562, 19.33002)]; var coords_2 = [ new google.maps.LatLng(59.32522, 18.07002), new google.maps.LatLng(59.45522, 18.12002), new google.maps.LatLng(59.86522, 18.35002), new google.maps.LatLng(59.77522, 18.88002), new google.maps.LatLng(59.36344, 18.36346), new google.maps.LatLng(59.56562, 18.33002)]; function initialize() { var mapOptions = { zoom: 7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(59.76522, 18.35002) }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); $('button').on('click', function() { if ($(this).data('action') === 'add') { addMarkers($(this).data('filtertype')); } else { removeMarkers($(this).data('filtertype')); } }); } function addMarkers(filterType) { var temp = filterType === 'coords_1' ? coords_1 : coords_2; markers[filterType] = new Array(); for (var i = 0; i < temp.length; i++) { var marker = new google.maps.Marker({ map: map, position: temp[i] }); markers[filterType].push(marker); } } function removeMarkers(filterType) { for (var i = 0; i < markers[filterType].length; i++) { markers[filterType][i].setMap(null); } } initialize();

JSFiddle demo

So in your case, you could do:

var markers = new Array(); // declare this at the beginning of your script ... // Loop through our array of markers & place each one on the map markers[filtreType] = new Array(); for (i = 0; i < data.marker.length; i++) { var myLatlng = new google.maps.LatLng(data.marker[i].log, data.marker[i].lat); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'Hello World!' }); markers[filtreType].push(marker); }

Edit:

Another solution would be to add the filter type to the marker itself and push all markers to the same array. You can still identify them.

var markers = new Array(); // declare this at the beginning of your script ... // Loop through our array of markers & place each one on the map for (i = 0; i < data.marker.length; i++) { var myLatlng = new google.maps.LatLng(data.marker[i].log, data.marker[i].lat); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'Hello World!', filterType: filtreType }); markers.push(marker); }

Now if you want to remove markers of a certain filter type you can do:

function removeMarkers(filterType) { for (var i = 0; i < markers.length; i++) { if (marker.filterType === filterType) { markers[i].setMap(null); } } }

Note: I don't know if it's a typo, but make sure you don't mess up with filterType and filtreType. I would change everything to filterType to avoid confusion...

Thanks a lot for this example, I hope I'll be able to test this tonight !

dmgig · Accepted Answer · 2015-04-22 21:15:20Z

The main thing is you need an array to store the references to your markers in, then you can loop through all of them and either set their "map" property to null, or just delete the array altogether.

You can try to do like so:

function fetchPlace(filtreType){ var markers = []; $.ajax({ url: "ajaxmap.php?type=" + filtreType, type : 'GET', dataType: 'json', success : function(data) { // Loop through our array of markers & place each one on the map for( i = 0; i < data.marker.length; i++ ) { var myLatlng = new google.maps.LatLng(data.marker[i].log,data.marker[i].lat); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'Hello World!' }); /* <----- AT THIS POINT, MARKER IS CREATED AND PLACED ON THE MAP BY SETTING "map" PROPERTY */ markers.push(marker); /* <----- HERE YOU ARE STORING THEM, AND YOU CAN ACCESS THEM LATER IN YOUR FUNCTION */ } } , error: function(){ /// traiter les erreur }, async : true }); }

I believe what will happen here (though not tested) is that when you fire fetchPlace again, all of your original markers will be cleared, then the new ones added in the loop again.

Hmmm, OK, so, are you saying that I should fill all my marker (stored into the array "marker" into the markers array, and then iterate trough it to populate my markers ?
Well, as you make your marker objects, they appear on the map. So just after you create them, store them in the "markers" array as I have shown. This allows you access to them in the future. When your loop is done, you'll have them all stored in the markers array, and then you can iterate over them and do as you like. But you dont NEED to iterate through them to add them - as soon as you make them they'll be on the map. Having them in the "markers" array allows you to iterate through them again at any time. Otherwise, they get added to the map, but you don't have (a easy) way to refer to them
I added some annotations, hope it helps make sense. In reality, you might even move the "markers" array outside of your function. Then you can refer to it in different functions.
The idea is here but this alone will not help OP to toggle certain markers by type.
My impression isn't that he's toggling them, but that each time the filter is changed he does a new AJAX call and recreates them all. Is that incorrect?

Collectives™ on Stack Overflow

Google map API, add marker in ajax after initialize the map

2 Answers 2

1 Comment

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

9 Comments

Related