How can i load markers using an ajax call - codeigniter

Question

i saw an example on how to load markers dynamically on this page
https://developers.google.com/maps/articles/phpsqlsearch_v3
and i saw another code igniter Google-maps api from BIOSTALL.
but this(http://biostall.com/codeigniter-google-maps-v3-api-library) library doesn't load the markers dynamically how can i achieve that using the library it self.
should i try to fetch the markers on map init or does the library provide a way to load these markers using ajax

Answer 1

Firstly, thanks for using my library. It's worth noting that the library is merely a way to simplify the generation of the Google Maps code. It constructs the JavaScript and HTML on your behalf making it quick and easy to add maps to your page.
There are a million and one ways that a developer might want to interact with the Google Maps API and it's impossible for the library to cater for every single instance. As a result, there are times where, in a bespoke situation like this, you may need to add your own code so it performs as you require.
As a result, might I suggest you simply add in the custom JS you require after you do echo $map['js']. There is a function available that comes with the library called createMarker() which, if you view the source code, you will see.
In pseudocode this will look like so:
<?php echo $map['js']; ?>
<script type="text/javascript">
// Get marker(s) with ajax
// Call createMarker() function to add marker(s) to map
</script>
I hope that helps somewhat.

Answer 2

Trying the pseudocode suggested by Biostall, this is what i have implemented:
$.ajax({
url: '*URL*',
type: "POST",
data: ({value : *value*}),
dataType: "json", //retrieved Markers Lat/lng in Json, thus using this dataType
success: function(data){
//Removing already Added Markers//////////
for(var i=0; i < markers.length; i++){
markers[i].setMap(null);
}
markers = new Array();
//////////////////////////////////////////
// Adding New Markers////////////////////
for (var i = 0, len = data.length; i < len; ++i) { // Iterating the Json Array
var d = data[i];
var lat = parseFloat(d.lattitude);
var lng = parseFloat(d.longitude);
var myLatlng = new google.maps.LatLng(lat,lng);
var marker = {
map:map,
position:myLatlng // These are the minimal Options, you can add others too
};
createMarker(marker);
}
}
}
);
Note: If an array of Markers is being sent to this ajax call, it must be json encoded with the php function json_encode(). And thus you can use the dataType: "json" as mentioned in the ajax call parameters.
This worked for me, hope this might help.