title: Google Maps Why does the entire page get redrawn when adding new markers
body: <p>I have a map application and i have markers that get loaded when document.ready() and i have others that get loaded when i click a button however when i click the button the markers added at the document. ready() gets lost.</p>
  
  <p>When the button is clicked the entire page gets <strong>submitted and redrawn</strong>. This is also causing my map to move really <strong>slow on zooming and scrolling</strong>. Can someone assist. Under is my code. I would like to get the page running faster and i don't want to have it redrawn on every ajax request.</p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>  &lt;script type="text/javascript"&gt;
  
  
        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
                    });
                  }
              });
          });
      });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;body onload="initialize()"&gt;
    &lt;div id="map_canvas" style="width:100%; height:90%"&gt;
  
     &lt;!-- MAP GOES IN HERE --&gt;
  
    &lt;/div&gt;
  
    &lt;div id="toolbar"&gt;
      &lt;button class="btn" id="getCitizens" onclick="" type="button"&gt;Get Citizens&lt;/button&gt;
      &lt;button class="btn" id="startTracking" onclick="" type="button"&gt;Start Tracking&lt;/button&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>