google api infoWindow google maps api에서 1 마커 아래에 표시

Question

여러 마커를 추가하고 각 마커에 infowindow를 표시 할 때 새로운 Google지도 API에 문제가 있습니다. 모든 마커가 표시되지만 내 주요 문제는 InfoWindow 항상 한 곳에서 보여 주지만 everywere를 보았지만 올바른 솔루션을 찾지 못하는 것 같습니다. xmlhttp.responseText를 사용하여 다른 함수에서 정보를 얻으려는 표시되는 모든 정보가 데이터베이스에서 나옵니다. getData입니다.

내 코드

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){ 

을 다음과 같다

// lantitude와 longitude로 개체 분리 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(); 
} 

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

Answer 2

1 개의 정보창을 재사용하는 것이 좋습니다.

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