i have ajax function gets array of markers data database , displays on google map. sucessful @ getting 1 marker display placed ajax function on button click event. event fires sucessfully without errors.
the data returned in form of json object. markers not getting drawn map. under code:
ajax function
$('#getcitizens').click(function(){ var mapoptions = {center: new google.maps.latlng(10.670044,-61.515305), zoom: 16, maptypeid: google.maps.maptypeid.roadmap }; var map = new google.maps.map(document.getelementbyid("map_canvas"),mapoptions); var citizens = (function(){ var citizens = null; $.ajax({ type: 'get', async : false, global: 'false', url: 'getlistofmarkers.htm', headers : {accept : 'application/json'}, datatype: 'json', success: function(data){ citizens = data; } }); return citizens; })(); for(var i= 0; i< citizens.length;i++){ console.log(citizens[i].name +' | '+citizens[i].socialsecuritynumber +' | '+citizens[i].latlng); var markertype = citizens[i].citizentype if(markertype = 2){ var citizen_icon = new google.maps.markerimage('resources/icons/a_new.ico',new google.maps.size(100,106),new google.maps.point(0,0),new google.maps.point(50,50)); }else if(markertype = 3){ var b_icon = new google.maps.markerimage('resources/icons/b_new.ico',new google.maps.size(100,106),new google.maps.point(0,0),new google.maps.point(50,50)); }else if(markertype = 4){ var citizen_icon = new google.maps.markerimage('resources/icons/c_new.ico',new google.maps.size(100,106),new google.maps.point(0,0),new google.maps.point(50,50)); } var citizenposition = new google.maps.latlng(citizens[i].latlng); var citizenname = citizens[i].name; var citizenmarker = new google.maps.marker({ position: citizenposition, map:map, icon:citizen_icon, title:citizenname }); } }) json data
{"name":"damien edwards","latlng":"10.67023300000000,-61.51530500000000","socialsecuritynumber":194302025,"citizentype":3}, {"name":"raj hassen","latlng":"10.67030000000000,-61.51530500000000","socialsecuritynumber":198501011,"citizentype":2}, {"name":"richard gibbs","latlng":"10.670044,-61.515305","socialsecuritynumber":198501012,"citizentype":2}, {"name":"sylvester macintosh","latlng":"10.670044,-61.515305","socialsecuritynumber":1985010122,"citizentype":3}, {"name":"howard bugario","latlng":"10.670044,-61.515305","socialsecuritynumber":1985121244,"citizentype":4}, {"name":"lawerence figaro","latlng":"10.670044,-61.515305","socialsecuritynumber":1985121245,"citizentype":4}, {"name":"jessie small","latlng":"10.670044,-61.515305","socialsecuritynumber":1999020214,"citizentype":3}] ;
despite heroic attempts establish citizens, asynchronicity of $.ajax() dictates null @ time for loop executes.
try :
$('#getcitizens').on('click', function() { var mapoptions = { center: new google.maps.latlng(10.670044, -61.515305), zoom: 16, maptypeid: google.maps.maptypeid.roadmap }; var map = new google.maps.map(document.getelementbyid("map_canvas"), mapoptions); $.ajax({ type: 'get', async : true, global: 'false', url: 'getlistofmarkers.htm', headers : {accept: 'application/json'}, datatype: 'json' }).done(function(citizens) { var markersrcs = [ null, null, 'resources/icons/a_new.ico', 'resources/icons/b_new.ico', 'resources/icons/c_new.ico' ]; $.each(citizens, function(i, c) { console.log(c.name + ' | ' + c.socialsecuritynumber + ' | ' + c.latln); var src = markersrcs[c.citizentype]; if(src) { new google.maps.marker({ position: new google.maps.latlng(c.lat, c.lng), map: map, icon: new google.maps.markerimage( src, new google.maps.size(100, 106), new google.maps.point(0, 0), new google.maps.point(50, 50) ), title: c.name }); } }); }); }); i can't see why should need create new map each time new citizen markers created. it's more typical create 1 map , reuse it. need keep reference markers (in array) can removed before adding new ones.
Comments
Post a Comment