title: how to get JSON Results placed on Google Maps?
body: <p>I have my JSON Results shown below that i have pulled out of my database, Iwant to display this on google maps using a marker which is displayed based on the position here are the results;</p>
  
  <pre class="lang-js prettyprint-override"><code>{
      "user": [{
          "name" : "xxxxxxxxx",
          "posn" : [53.491314, -2.249451]
      }, {
          "name" : "xxxxxxxxxx",
          "posn" : [54.949231, -1.620483]
      }]
  }
  </code></pre>
  
  <p>How do i get the user name and position placed on google maps? Coding for my googlemaps below;</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="map_canvas" style="width:800px; height:600px;"&gt;&lt;/div&gt;
  
      &lt;script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  
      &lt;script src="/Scripts/markermanager.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="/Scripts/google_northamerica_offices.js" type="text/javascript"&gt;&lt;/script&gt;  
  
      &lt;script type="text/javascript"&gt;
  
          var map;
          var bounds = new google.maps.LatLngBounds();
          var mgr;
  
          function initialize() {
              var myOptions = {
                  zoom: 4,
                  center: new google.maps.LatLng(-34.397, 150.644),
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              };
              map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
              mgr = new MarkerManager(map);
              google.maps.event.addListener(mgr, 'loaded', function () {
                  for (var i = 0; i &lt; 10; i++) {
                      var latlng = new google.maps.LatLng(Math.random() * 180 - 90, Math.random() * 360 - 180);
                      bounds.extend(latlng);
                      var marker = new google.maps.Marker({
                          position: latlng,
                          // animation: google.maps.Animation.DROP, // animation disabled because it slows down performance
                          title: "RedStar Creative Marker #" + i
                      });
                      mgr.addMarker(marker, 0);
                  }
                  mgr.refresh();
  
                  map.fitBounds(bounds);
              });
          }
          $(document).ready(function () {
              initialize();
          });
  
      &lt;/script&gt;
  </code></pre>
  
  <p>i've tried doing it like this, dont know if its the right way of doing it, first time using JSON;</p>
  
  <pre class="lang-js prettyprint-override"><code>    function setupUserMarkers() {
          var markers = [];
          for (var j in layer["users"]) {
              var place = layer["users"][j];
              var title = place["name"];
              var posn = new GLatLng(place["posn"][0], place["posn"][1]);
              var marker = createMarker(posn,title); 
              markers.push(marker);
              allmarkers.push(marker);
          }
          mgr.addMarkers(markers, layer["zoom"][0], layer["zoom"][1]);
      }
      mgr.refresh();
  }
  </code></pre>
  
  <p><strong>UPDATE:</strong> using AJAX i was able to add the two markers based on the JSON Result, trying to figure out how to add a window popup so it will display an image of that person in the window. i know i will need an google.maps.event.addListener and the next bit well its for me to research now, hope the AJAX below will help others who come across a similiar problem to me.          </p>
  
  <pre><code>$.ajax({
                      url: "/Home/GetUser",
                      context: document.body,
                      success: function (data) {
                          for (var i = 0; i &lt; data.user.length; i++) {
                              var label = data.user[i].name;
                              var lat = data.user[i].posn[0];
                              var long = data.user[i].posn[1];
  
                              var latlng = new google.maps.LatLng(lat, long);
                              bounds.extend(latlng);
                              var marker = new google.maps.Marker({
                                  position: latlng,
                                  title: label
                              });
  </code></pre>