2012-03-30 33 views
0

複数のマーカーを追加して各マーカーにinfowindowを表示すると、新しいGoogleマップのAPIに問題があります。すべてのマーカーが表示されていますが、私の主な問題はinfoWindow私はeverywereを見てきましたが、適切なソリューションを見つけることができないようです。表示されるすべての情報がデータベースから来ているので、xmlhttp.responseTextを使用して別の関数から情報を取得します。 getDataです。google api infoWindow google maps api

私のコードは

function showMap(data){  

//Changing the json respose back to the javascript array 
    var LongLat = eval('(' + data + ')'); 

    // Creating a new map 
    var map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(-26.1981, 28.0488), 
    zoom: 5, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 


for (var i = 0; i < LongLat.length; i++) { 

    latLng = new google.maps.LatLng(LongLat[i][0],LongLat[i][1]); 

    // Creating a marker and putting it on the map 
    var marker = new google.maps.Marker({ 
    position:latLng, 
    map: map, 
    title: LongLat[i][0] 
    }); 


    var infoWindow = new google.maps.InfoWindow(); 
    // Attaching a click event to the current marker 

    google.maps.event.addListener(marker, "click", function(point){ 
     getData(this.position); 
     xmlhttp.onreadystatechange=function() 
     { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
       infoWindow.setContent(xmlhttp.responseText); 
       infoWindow.open(map,marker); 
      } 
     }    
     }); 
    } 
} 

以下のようで、私のgetData関数は

function getData(d){ 
を以下の通りです。

//対象を緯度と経度に分ける p =(d.toString());

c = p.indexOf(','); 
e = p.indexOf(')'); 
lat = p.substring(1,c); 
lon = p.substring(c+1,e); 

if(d == "results"){ 
    var htmlCode = t; 
} 

if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
    else 
    {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      document.getElementById('results').innerHTML = xmlhttp.responseText; 
     } 
    } 

    if(xmlhttp.readyState==4 && xmlhttp.status==200){ 
     alert(xmlhttp.responseText); 
     return xmlhttp.responseText; 
    } 
var html = xmlhttp.open("GET","mapmaker.php?lat="+lat+"&lon="+lon,true); 
xmlhttp.send(); 
} 
+0

他の同様の質問で回答を探すようにしましたか?私はこの質問を何度か見た気がします... – slawekwin

答えて

1

あなたのコード、ほとんど、良い:)ちょうど少数のミスです:グローバル

var map = null; 
    var infoWindow = null; 

    function initialize() 
    { 
     // Fill w/ sample data 
     var LongLat = new Array(); 
     LongLat[0] = new Array(-26.5, 28.5); 
     LongLat[1] = new Array(-26.0, 28.0); 

     // Creating a new map 
     map = new google.maps.Map(document.getElementById("map-canvas"), { 
      center: new google.maps.LatLng(-26.1981, 28.0488), 
      zoom: 5, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

     infoWindow = new google.maps.InfoWindow(); 

     for(var i = 0; i < LongLat.length; i++) 
     { 
      var latLng = new google.maps.LatLng(LongLat[i][0], LongLat[i][1]); 

      AddMarkerToMap(latLng, i); 

     } // END FOR (LatLng) 
    } 

移動マーカーとして

入れマップは、情報ウィンドウ私の作品、このスニペットを見て機能を分離するための作成。これにより変数の変更が隠されます

function AddMarkerToMap(latLng, i) 
    { 
     var marker = new google.maps.Marker({ 
      position:latLng, 
      map:map 
     }); 

     google.maps.event.addListener(marker, 'click', function() 
     { 
      infoWindow.setContent("Title: " + i); 
      infoWindow.open(map, marker); 
     }); 
    } 
+0

感謝、私はxmlhttp.onreadystatechange = function()をイベントリスナーの中に入れて、infowindow情報がxml応答テキストになるようにしました... –

1

私は、1つのinfoWindowを再利用する方が良いと思います。

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


function addToMap() { 

    for (var i = 0; i < marker_data.length; i++) { 

     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(marker_data[i].lat, marker_data[i].lng), 
      clickable: true, 
      id:marker_data[i].id 
     }); 

     google.maps.event.addListener(marker, "click", function() { 
      infowindow.close(); 
      load_content(this, this.id); 
     }); 

     marker.setMap(map); 

     /* here we keep track of the markers that we have added to the page */ 
     markers_on_map.push(marker); 
    } 
} 

function load_content(marker, id){ 
    $.ajax({ 
     url: '/map/getMarkerWindow/' + id, 
     success: function(data){ 
      infowindow.setContent(data); 
      infowindow.open(map, marker); 
     } 
    }); 
}