如何獲得放置在Google地圖上的JSON結果？

Question

我有我的JSON結果顯示如下，我已經退出了我的數據庫，Iwant顯示在谷歌地圖上使用基於位置顯示的標記這裏是結果;

{ 
    "user": [{ 
     "name" : "xxxxxxxxx", 
     "posn" : [53.491314, -2.249451] 
    }, { 
     "name" : "xxxxxxxxxx", 
     "posn" : [54.949231, -1.620483] 
    }] 
} 

如何獲取用戶名和位置放置在谷歌地圖上？爲我的googlemaps編碼如下;

<div id="map_canvas" style="width:800px; height:600px;"></div> 

    <script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 

    <script src="/Scripts/markermanager.js" type="text/javascript"></script> 
    <script src="/Scripts/google_northamerica_offices.js" type="text/javascript"></script> 

    <script type="text/javascript"> 

     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 < 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(); 
     }); 

    </script> 

我試着做它像這樣，不知道它在做它，使用JSON第一次以正確的方式;

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(); 
} 

UPDATE：使用AJAX我能添加一個基於JSON結果兩個標記，試圖找出如何添加一個窗口彈出所以它會顯示這個人在窗口的圖像。我知道我需要一個google.maps.event.addListener，下一步它對我來說現在正在研究，希望下面的AJAX能夠幫助其他遇到類似問題的人幫助我。

$.ajax({ 
        url: "/Home/GetUser", 
        context: document.body, 
        success: function (data) { 
         for (var i = 0; i < 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 
          }); 

Answer 1

這是我的JSON結果，我希望能夠得到這當用戶點擊標記時，圖像進入谷歌地圖上的信息窗口

image":"http://graph.facebook.com/10000090226****/picture?type=large" 

這裏是編碼的一部分谷歌地圖

<script type="text/javascript"> 

    var map; 
    var bounds = new google.maps.LatLngBounds(); 
    var mgr; 

    function initialize() { 
     var myOptions = { 
      zoom: 2, 
      center: new google.maps.LatLng(53.491314, -2.249451), 
      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() { 
      $.ajax({ 
       url: "/Home/GetUser", 
       context: document.body, 
       success: function (data) { 
        for (var i = 0; i < 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 
         }); 

         mgr.addMarker(marker, 0); 

        } 
        //adding google maps window popup... 
        var infowindow = new google.maps.InfoWindow(); 
        google.maps.event.addListener(marker, 'click', function() { 
         infowindow.open(map, marker); 
        }); 
       } 

      }); 

      mgr.refresh(); 

      map.fitBounds(bounds); 
     }); 
    } 
    $(document).ready(function() { 
     initialize(); 
    }); 

    </script> 

目前它不打開一個窗口，不會它甚至打開，如果裏面沒有內容？有點困惑，試圖讓內部窗口內的圖像。我將不得不繼續挖掘，看看我是否可以設法訪問那裏的URL圖像。

添加窗口彈出位是否需要刷新標記後才能出現？

UPDATE;排序的問題，是在錯誤的地方添加編碼位，需要一些調整。 現在發生的事情是，當您單擊第一個標記時，它會在第二個標記上打開信息窗口並顯示名稱，但最初單擊的第一個標記不會打開infoWindow。

function initialize() { 
     var myOptions = { 
      zoom: 10, 
      center: new google.maps.LatLng(0, 0), 
      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() { 

      $.ajax({ 
       url: "/Home/GetUser", 
       context: document.body, 
       success: function (data) { 
        for (var i = 0; i < 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); 
         map.fitBounds(bounds); 

         var marker = new google.maps.Marker({ 
          position: latlng, 
          title: label 
         }); 

         var infowindow = new google.maps.InfoWindow({ content: data.user[i].name }); 
         google.maps.event.addListener(marker, 'click', function() { 
          infowindow.open(map, marker); 
         }); 

         mgr.addMarker(marker, 1); 

最後更新：正確的，我可以停止恐慌，設法得到它拍打自己醒來，閱讀的東西的3倍以上:)

Answer 2

在上面的示例代碼的循環中，循環10次添加隨機點 - 您需要用循環代替點。

具體該位：

 // loop over your points 
      for (var i = 0; i < 10; i++) { 
       // use your points lat/lng 
       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 
        // use your points name 
        title: "RedStar Creative Marker #" + i 
       }); 
       mgr.addMarker(marker, 0); 
      } 

這是一個未經考驗的第一個去，沒有擔保，等等等等:)

 // loop over your points 
     for (var j in layer["users"]) { 
       var place = layer["users"][j]; 
       // use your points lat/lng 
       var latlng = new google.maps.LatLng(place["posn"][0], place["posn"][1]); 
       bounds.extend(latlng); 
       var marker = new google.maps.Marker({ 
        position: latlng, 
        // animation: google.maps.Animation.DROP, // animation disabled because it slows down performance 
        // use your points name 
        title: place["name"] 
       }); 
       mgr.addMarker(marker, 0); 
      }