2011-07-28 15 views
3

私は複数のマーカーで大きな問題を抱えています。それらはすべて同じタイトルと同じ情報ウィンドウのコンテンツを持っています。GMaps API V3 - Multiple Markers&InfoWindow

私は多くのウェブサイトを検索しましたが、私のコードでどこに問題があるのか​​分かりませんでした。 私は(私はそれがそうであると確信しています!)あなたは私を助けることができるでしょう願ってい

これは私のコードです:

<script type="text/javascript"> 
      var map; 
      var geocoder; 
      $(document).ready(function() { 
       initializeMap(); 
      }); 


      function initializeMap() { 

       var people = [{"userid":"47","lastname":"lastname1","firstname":"firstname1","address":"SomeAddress","phone1":"00000000000","phone2":"","email":"[email protected]"},{"userid":"42","lastname":"lastname2","firstname":"firstname2","address":"SomeAddress2","phone1":"0","phone2":"0","email":"[email protected]"}]; 


       var center = new google.maps.LatLng(40.667, -73.833); 

       var myOptions = { 
        zoom: 8, 
        center: center, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 

       map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
       geocoder = new google.maps.Geocoder(); 

       for (i = 0; i < people.length; i++) { 
        var p = people[i]; 



        geocoder.geocode({ 'address': p["address"]}, function(results, status) { 
         if (status == google.maps.GeocoderStatus.OK) { 
          map.setCenter(results[0].geometry.location); 
          var marker = new google.maps.Marker({ 
           map:map, 
           draggable:false, 
           animation: google.maps.Animation.DROP, 
           title:p["lastname"] + " " + p["firstname"], 
           position: results[0].geometry.location 
          }); 


          var myWindowOptions = { 
           content: 
            '<h3>'+p["lastname"] + " " + p["firstname"]+'</h3>'+ 
            '<p>'+p["address"] 
          }; 

          var myInfoWindow = new google.maps.InfoWindow(myWindowOptions); 

          google.maps.event.addListener(marker, 'click', function() { 
           myInfoWindow.open(map,marker); 
          }); 
        }); 
       } 
      } 

</script> 

私は本当に誰かが私に私のミス(複数可)を表示することができます願っていますし、ありがとう助けをたくさん!


いいえ、私は本当に理解していない、 それは私が私のコードでは表示されませんでした何かをする必要があります:助けを

<script type="text/javascript"> 
      var map; 
      var geocoder; 
      $(document).ready(function() { 
       initializeMap(); 
      }); 


      function initializeMap() { 

       var people = [{"userid":"47","lastname":"lastname1","firstname":"firstname1","address":"SomeAddress","phone1":"00000000000","phone2":"","email":"[email protected]"},{"userid":"42","lastname":"lastname2","firstname":"firstname2","address":"SomeAddress2","phone1":"0","phone2":"0","email":"[email protected]"}]; 


       var center = new google.maps.LatLng(50.833, 25.000); 

       var myOptions = { 
        zoom: 8, 
        center: center, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 

       map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
       geocoder = new google.maps.Geocoder(); 



       var infowindow = new google.maps.InfoWindow(); 

       var marker, i; 

       for (i = 0; i < people.length; i++) { 
        alert(people[i]['address']); 
        geocoder.geocode({ 'address': people[i]["address"]}, function(results, status) { 

         marker = new google.maps.Marker({ 
          position: results[0].geometry.location, 
          map: map 
         }); 

         google.maps.event.addListener(marker, 'click', (function(marker, i) { 
          return function() { 
           infowindow.setContent('<h3>'+people[i]["lastname"] + " " + people[i]["firstname"]+'</h3>'); 
           infowindow.open(map, marker); 
          } 
         })(marker, i)); 
        }); 
       } 

      } 
</script> 

感謝を! :)

答えて

5

すべてのマーカーとすべての情報ウィンドウへの参照を保存する必要があります。それは主な考えです。ここに私が見つけて前に使ったリンクがあります。

http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/ これはよく知られている問題です。それに関する多くの情報があります。捜索することを試みなさいthere

私はそれが役に立つと願っています。

1

私はこれもヒットしました。私はちょうどそれを使い果たしました。

ここでの主な問題は、非同期のgeocoder.geocode()関数です:コードを記述しているインラインコールバックが任意の時間に実行されています(Googleがリクエストに答えるまでの時間)。あなたのためにあなたのことをする。

このためサイクルの短いの実行がサーバに到達して戻ってくるにHTTP要求よりもはるかに高速であるので、あなたのカウンタ変数は、多くの場合、最後の可能な値が含まれます。

主に、溶液はルスランPolutsyganから指摘したように、この

http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/

この

GMaps JS Geocode: Using/Passing Variables With Asynchronous Geocode Function?

toghether結合されています。 本当のトリックは、ジオコーダーのコールバックの外側で何らかの反復操作を保つことでした。だから、これは 'コア' である:

function geocodeSite(site) { 
    geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ 'address': site.place + ', IT'}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     site.position = results[0].geometry.location; 
     addMarker(site); 
    } else { 
     alert("Geocode was not successful for the following reason: " + status); 
    } 
    }); 
} 

function addMarker(site) { 
    marker = new google.maps.Marker({ 
     map: map, 
     position: site.position, 
     animation: google.maps.Animation.DROP, 
     title: site.name 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(site.name); 
    infoWindow.open(map, this); 
    }); 
} 

、これは私がそれを使用する方法です:

データ iはサーバ側で生成されたJSON変数であり、そしてそれは、Aから構成さ
<script type='text/javascript'> 
    var data = <?php print $geodata?>; 
    for (var i = 0; i < witaly_data.length; i++) { 
    geocodeSite(data[i]); 
    } 
</script> 

名前と住所(ジオコーダーに渡す住所)を入力します。

もちろん、他の場所(私はjquery document.ready()で行います)でマップを初期化し、それをinfoWindowインスタンスのようにグローバル変数として宣言する必要があります。ここで

0

は私のために

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script> 
<script> 
    var branches = '@Model.SerializedBranchesMapInfos'; //Info from server 

    function setMarker(map) { 
     if (branches != null && branches.length > 0) { 
      branches = branches.replace(/&amp;/g, "&").replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/&quot;/g, "\""); 
      var branchesList = JSON.parse(branches); 

      for (var i = 0; i < branchesList.length; i++) { 
       addMarker(map, branchesList[i]); 
      } 
     } 
    } 

    function addMarker(map, branch) { 
     var infowindow = new google.maps.InfoWindow(); 
     var marker = new google.maps.Marker({ 
      position: { 
       lat: branch.Latitude, 
       lng: branch.Longitude 
      }, 
      map: map, 
      title: branch.branchCode 
     }); 

     var contentString = '<div><strong>' + branch.BranchCode + '</strong><br>' + 
           branch.Description + '</div>'; 

     google.maps.event.addListener(marker, 'click', function() { 
      if (contentString == infowindow.getContent()) { 
       infowindow.close(map, this); 
       infowindow.setContent(''); 
      } 
      else { 
       infowindow.setContent(contentString); 
       infowindow.open(map, this); 
      } 
     }); 
    } 

    function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(3.872310, 108.160445), // Initiaize with Riau Islands coordinates 
      zoom: 6 
     }; 
     var map = new google.maps.Map(document.getElementById('gmap'), mapOptions); 
     setMarker(map); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
に動作するサンプルコードです
関連する問題