title: How to add Google Map markers from getJSON array?
body: <p>My array from a PHP file looks like this:</p>
  
  <pre><code>[
   {"lat":"4.174475","lon":"73.509564","datetime":"2012-11-23 16:41:40"},
   {"lat":"5.17","lon":"73.50633754680894","datetime":"2012-11-23 05:00:00"},
   {"lat":"6.17","lon":"73.50633754680894","datetime":"2012-11-01 00:00:00"}
  ]
  </code></pre>
  
  <p>When I click the link #Three, it should generate 3 markers using the <code>threeClick()</code> function. Here is the function.</p>
  
  <pre><code>function threeClick () {
    $.getJSON('json.search.php?idcard=&lt;?php echo $idcardno; ?&gt;&amp;limit=3', function(data) {
      var location;
      $.each(data, function (key, val) {
        addMarker(val.lat,val.lon);
      });
    }
  </code></pre>
  
  <p>The add marker function is like this (from: <a href="https://stackoverflow.com/questions/7366861/plotting-latlng-coordinates-from-json-array-on-google-map-the-markers-all-st">Plotting LatLng coordinates from Json Array on Google Map --- the markers all stack up in the same location</a>) </p>
  
  <pre><code>function addMarker(lat,lng) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat,lng),
      map: map,
      icon: "images/mapIcons/red-dot.png"
    });
    markersArray.push(marker);
  }
  </code></pre>
  
  <p>I generated the map using: </p>
  
  <pre><code>var map;
  var markersArray = [];
  function initMap() {
    var latlng = new google.maps.LatLng(4.174475, 73.509564);
    var myOptions = {
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
  }
  </code></pre>
  
  <p>Can anybody suggest me how I can show the markers on click of a link? What is wrong with this code?</p>