Google Maps Why does the entire page get redrawn when adding new markers

Question

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.

When the button is clicked the entire page gets submitted and redrawn. This is also causing my map to move really slow on zooming and scrolling. 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.

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>

Answer 1

The following line is causing the problem (inside this function: $('#getCitizens').on('click', function() {).

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

You are creating a new map every time the #getCitizens is being clicked. Use the previously instantiated map instead (the one returned by initialize function). You wont have to reload map in that way.

Answer 2

I am not able to reproduce the said issue may be you can try and check the following code example using Google Maps API V3.11 which is very performant and loads about 250 markers.

<!DOCTYPE html>
<html>
    <head>
        <title>Multiple Markers Google Maps</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.11&sensor=false" type="text/javascript"></script>
        <script type="text/javascript">
        // check DOM Ready
        $(document).ready(function() {
            // execute
            (function() {
                // map options
                var options = {
                    zoom: 5,
                    center: new google.maps.LatLng(39.909736, -98.522109), // centered US
                    mapTypeId: google.maps.MapTypeId.TERRAIN,
                    mapTypeControl: false
                };

                // init map
                var map = new google.maps.Map(document.getElementById('map_canvas'), options);

                // NY and CA sample Lat / Lng
                var southWest = new google.maps.LatLng(40.744656, -74.005966);
                var northEast = new google.maps.LatLng(34.052234, -118.243685);
                var lngSpan = northEast.lng() - southWest.lng();
                var latSpan = northEast.lat() - southWest.lat();

                // set multiple marker
                for (var i = 0; i < 250; i++) {
                    // init markers
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()),
                        map: map,
                        title: 'Click Me ' + i
                    });

                    // process multiple info windows
                    (function(marker, i) {
                        // add click event
                        google.maps.event.addListener(marker, 'click', function() {
                            infowindow = new google.maps.InfoWindow({
                                content: 'Hello, World!!'
                            });
                            infowindow.open(map, marker);
                        });
                    })(marker, i);
                }
            })();
        });
        </script>
    </head>
    <body>
        <div id="map_canvas" style="width: 800px; height:500px;"></div>
    </body>
</html>

Screen preview: