i have map application , have markers loaded when document.ready() , have others loaded when click button when click button markers added @ document. ready() gets lost.
when button clicked entire page gets submitted , redrawn. causing map move slow on zooming , scrolling. can assist. under code. page running faster , don't want have redrawn on every ajax request.
code
<script type="text/javascript"> function initialize() { 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 criminal = new google.maps.markerimage('resources/icons/police_new.ico', new google.maps.size(100,106), new google.maps.point(0,0), new google.maps.point(50,50) ); var companypos = new google.maps.latlng(10.670044,-61.515305); var companymarker = new google.maps.marker({ position: companypos, map: map, icon: criminal, title:"first criminal" }); $.ajax({ type:'get', async:false, global:'false', url:'getlistofcrimehotspot.htm', headers : {accept: 'application/json'}, datatype: 'json' }).done(function(hotspot){ $.each(hotspot, function(i,h){ var icon = 'resources/icons/information.ico'; new google.maps.marker({ position:new google.maps.latlng(h.lat,h.lng), map:map, icon: new google.maps.markerimage(icon, new google.maps.size(100, 106), new google.maps.point(0, 0), new google.maps.point(50, 50)), title: 'crime rating : ' + h.crimelevel+' @ ' +h.crimelevelcount+' / ' + h.totalnumberofcrimes }); }); }); return map; }//end initialize var global_citizens; $(document).ready(function(){ map = initialize(); $('#starttracking').on('click',function(){ $.each(global_citizens, function(i, c) { console.log(c.name ); }); }); $('#getcitizens').on('click', function() { /*var mapoptions = { center: new google.maps.latlng(10.670044, -61.515305), zoom: 16, maptypeid: google.maps.maptypeid.roadmap };*/ //map = new google.maps.map(document.getelementbyid("map_canvas"), mapoptions); $.ajax({ type: 'get', async : false, global: 'false', url: 'getlistofmarkers.htm', headers : {accept: 'application/json'}, datatype: 'json' }).done(function(citizens) { global_citizens = citizens; var markersource = [ null, null, 'resources/icons/criminal_new.ico', 'resources/icons/victim_new.ico', 'resources/icons/suspect_new.ico' ]; $.each(citizens, function(i, c) { //console.log(c.name + ' | ' + c.socialsecuritynumber + ' | ' + c.lat+ ' | ' +c.lng); var icon = markersource[c.citizentype]; if(markersource) { new google.maps.marker({ position: new google.maps.latlng(c.lat, c.lng), map: map, icon: new google.maps.markerimage( icon, new google.maps.size(100, 106), new google.maps.point(0, 0), new google.maps.point(50, 50) ), title: c.name +'-' +c.socialsecuritynumber }); } }); }); }); }); </script> html
<body onload="initialize()"> <div id="map_canvas" style="width:100%; height:90%"> <!-- map goes in here --> </div> <div id="toolbar"> <button class="btn" id="getcitizens" onclick="" type="button">get citizens</button> <button class="btn" id="starttracking" onclick="" type="button">start tracking</button> </div> </body>
the following line causing problem (inside function: $('#getcitizens').on('click', function() {).
var map = new google.maps.map(document.getelementbyid("map_canvas"), mapoptions); you creating new map every time #getcitizens being clicked. use instantiated map instead (the 1 returned initialize function). wont have reload map in way.
Comments
Post a Comment