Unable to display redrawn markers

Question

I am using google maps in my real estate site for displaying projects in different location

The locations are displayed in green markers as in below link

Map Link

var markers = new Array();
var i;


function DrawMap(locations)
{   
  var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 10,
              center: new google.maps.LatLng(-33.92, 151.25),
              mapTypeId: google.maps.MapTypeId.ROADMAP
        });

var flagIcon_front = new google.maps.MarkerImage("images/marker.png");

var flagIcon_shadow = new google.maps.MarkerImage("images/marker_shadow.png")
flagIcon_shadow.size = new google.maps.Size(105, 53);
flagIcon_shadow.anchor = new google.maps.Point(20, 52);         
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; padding: 5px; display:block; ";

var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-261, -268)
,zIndex: null
,boxStyle: { 
background: "url('images/metro-plot-bg-1.png') no-repeat -286px -1361px"
,opacity: 1
,width: "393px"
,height: "233px"
}
,closeBoxMargin: "11px 32px 2px 2px"
,closeBoxURL: "images/close_small.png"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false              
};  
var infowindow = new google.maps.InfoWindow();  
var marker;
for (i = 0; i < locations.length; i++) 
{  
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: flagIcon_front,
shadow: flagIcon_shadow,         
map: map
});       
markers.push(marker);
}
for(i=0;i<locations.length;i++) 
{  
 marker1 = markers[i];
google.maps.event.addListener(marker1, 'click', (function(marker1, i) {
return function() {
          //infowindow.setContent(locations[i][0]);
          //infowindow.open(map, marker);
          ib.setContent(locations[i][0]);
          ib.open(map, marker1);
          }
      })(marker, i));
 //marker.setMap(null);
var ib = new InfoBox(myOptions);
//ib.open(map, marker);
}   
}

var locations = [
                              ['<div class="map_view"></div>', -33.890542, 151.274856, 4],
                              ['<div class="map_view"></div>', -33.923036, 151.259052, 5],
                              ['<div class="map_view"></div>', -34.028249, 151.157507, 3],
                              ['<div class="map_view"></div>', -33.80010128657071, 151.28747820854187, 2],
                              ['<div class="map_view"></div>', -33.950198, 151.259302, 1]
                            ];



                            $('document').ready(function(e) {
                               DrawMap(locations);
                            });

The DrawMap() function above takes latitude and longitude as parameter

 var locations = [
                              ['<div class="map_view"></div>', -33.890542, 151.274856, 4],
                              ['<div class="map_view"></div>', -33.923036, 151.259052, 5],
                              ['<div class="map_view"></div>', -34.028249, 151.157507, 3],
                              ['<div class="map_view"></div>', -33.80010128657071, 151.28747820854187, 2],
                              ['<div class="map_view"></div>', -33.950198, 151.259302, 1]
                            ];



                            $('document').ready(function(e) {
                               DrawMap(locations);
                            });

The map is working fine when the page loads first time. All the markers are displayed the right way.But when i populate the map by supplying latitude and longitude as parameter which I got as responseText for ajax call on button click the map is displaying markers grouped at one place.

The script for ajax call is as below

function getLocations()
{
  for(i=0;i<locations.length;i++) 
  {
    markers[i].setMap(null);
  }
  url = 'map.php';      
  $.post(
  url,
  {
   "act" : "getLocations"   
  },
  function(responseText){                                       
   DrawMap(responseText);
  },
  "html"
);
}

The working copy is uploaded in the following link

Map Link

Click the button at bottom for getting latitude and longitude as response text from ajax request

Please let me know which my markers are not redrawn to new location

Thanks in advance

Answer 1

In the button click, you are calling a $.post, but then sending the responseText to the DrawMap method. DrawMap is expecting a javascript array, not JSON text, so you'll probably want to call that method like so:

function(responseText) {
    DrawMap($.parseJSON(responseText));
}

Also, what you're passing from the server isn't JSON that jQuery can parse. To wit:

jQuery.parseJSON docs:
    ...
    {'test': 1} ('test' is using single quotes instead of double quotes).
    ...

You're JSON code looks like this:

[
    ['<div class="map_view"></div>', -33.790542, 151.274856, 4],
    ['<div class="map_view"></div>', -33.983036, 151.259052, 5],
    ['<div class="map_view"></div>', -34.128249, 151.157507, 3],
    ['<div class="map_view"></div>', -33.85010128657071, 151.28747820854187, 2],
    ['<div class="map_view"></div>', -33.900198, 151.259302, 1]     
]

Try changing the quotes around, like this:

[
    ["<div class='map_view'></div>", -33.790542, 151.274856, 4],
    ["<div class='map_view'></div>", -33.983036, 151.259052, 5],
    ["<div class='map_view'></div>", -34.128249, 151.157507, 3],
    ["<div class='map_view'></div>", -33.85010128657071, 151.28747820854187, 2],
    ["<div class='map_view'></div>", -33.900198, 151.259302, 1]     
]