Google지도 InfoWindow는 1보다는 배열의 모든 주소를 표시합니다.

Question

Google지도가 있고 InfoWindow에 정보 창에 모든 주소가 표시됩니다. foreach 배열에서 php 변수를 이동하면 배열의 마지막 항목 만 표시됩니다. 배열을 완성하지 못했거나 infoWindow 함수 내에서 제대로 선언하지 않았습니까?

여기 지지체 내 코드 :

업데이트 된 코드가 NOW MARKER_0 IN, MARKER_1 요법 대신 어드레스 (A, B, C, D)의 끌어.

<script type="text/javascript"> 
    $(document).ready(function() { 
    //create an array to store lat n lon and type 
    var lat= []; 
    var lon= []; 
    var type= []; 
    var address= []; 

    var restaurant = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=B|FF0000|000000'; 
    var bar = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|FF0000|000000'; 

    var x=0; //to store index for looping 
    var map = null; //create a map and define it's value to null 
    var markerArray = []; //create a global array to store markers 
    var infowindow; //create infowindow to show marker information 


    //looping for getting value from database using php 
    <?php foreach($latlong as $row): ?> 
     lat.push(<?php echo $row['lat']; ?>); 
     lon.push(<?php echo $row['long']; ?>); 
     type.push(<?php echo $row['type']; ?>); 
     address.push("<?php echo $row['address']; ?>"); 
    x++; 
    <?php endforeach; ?> 

     function initialize() { 
      //set center from the map 
      var myOptions = { 
       zoom: 10, 
       center: new google.maps.LatLng(lat[0], lon[0]), 
       mapTypeControl: true, 
       mapTypeControlOptions: { 
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
       }, 
       navigationControl: true, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
      //make a new map 
      map = new google.maps.Map(document.getElementById("map"), myOptions); 


      //define value and size for infowindow 
      infowindow = new google.maps.InfoWindow({ 
       size: new google.maps.Size(150, 50) 

      }); 

      // Add markers to the map 
      // Set up markers based on the number of elements within the array from database 
      for (var i = 0; i < x; i++) { 
       createMarker(new google.maps.LatLng(lat[i], lon[i]), type[i],address[i], 'marker_'+i); 
       ; 
      } 
     } 
    function createMarker(latlng, type, id, address){ 
     var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      icon: type, 
      id: id, 
      address:address 
     }); 
     google.maps.event.addListener(marker, 'mouseover', onMarkerClick); 
     markerArray.push(marker); //push local var marker into global array 
    } 

    //create a function that will open infowindow when a marker is clicked 
     var onMarkerClick = function(latlng) { 
      var marker = this; 
      var latLng = marker.getPosition(); 
      infowindow.setContent('<h3>Marker address is:</h3>'+ marker.address +'</div>'); 
      infowindow.open(map, marker, marker.address); 

     }; 


    window.onload = initialize;  
    }); 
</script> 

내 스크립트 섹션의 방화 광에서 데이터가 이렇게 출력되므로 올바른 정보를 얻을 수 있습니다!

// PHP

lat.push(lat); 
lon.push(lng); 
type.push(restaurant); 
address.push("A"); 
x++; 
lat.push(lat); 
lon.push(lng); 
type.push(bar); 
address.push("B"); 
x++; 
lat.push(lat); 
lon.push(lng); 
type.push(restaurant); 
address.push("C"); 
x++; 
lat.push(lat); 
lon.push(lng); 
type.push(bar); 
address.push("D"); 
x++; 

어떤 도움이 많이 주시면 감사하겠습니다을 사용하여 데이터베이스에서 값을 얻기 위해 반복.

function createMarker(latlng, type, id){ 

그 함수 선언은 안,

createMarker(new google.maps.LatLng(lat[i], lon[i]), type[i], address[i], 'marker_'+i); 

하지만 당신은 단지 그들 중 3을 사용 :

Answer 1

당신은 당신의 createMarker 기능에 사 개 인수를 전달

function createMarker(latlng, type, address, id){ 

그리고 주소를 마커에 속성으로 추가 할 수 있습니다 :

당신은 다음과 같이 참조 할 수

var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      icon: type, 
      id: id, 
      address: address 
     }); 

:

var onMarkerClick = function(latlng) { 
      var marker = this; 
      var latLng = marker.getPosition(); 
      infowindow.setContent('<h3>Marker address is:</h3>'+ marker.address +'</div>'); 
      infowindow.open(map, marker, marker.address); 
     };