Google지도 목록

배열에 포함 된 각 주소에 대해 Google지도를 보여주는 PHP 페이지를 만들어야합니다. 필자가 작성한 코드는 잘못되었습니다. 마지막으로 표시된지도를 제외하고는 여러 개의 마커가 포함 된 회색지도 열이 있습니다. 대신 하나의 마커가있는 맵 목록을 원합니다. 주소 배열은 php를 사용하여 데이터베이스에서 가져옵니다.이 배열은 json_encode 함수를 사용하여 javascript에 전달됩니다.Google지도 목록

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

    <html xmlns="http://www.w3.org/1999/xhtml"> 
     <head> 

      <meta http-equiv="content-type" content="text/html;charset=UTF-8"/> 
      <link rel="stylesheet" type="text/css" href="../public/css/style.css"/> 
      <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 

      <script type='text/javascript'> 
      var addresses = <?php echo json_encode($addresses); ?>; 
      </script>  
      <script type="text/javascript" src="../public/js/maps.js"></script> 

     </head> 
     <body> 
        <!-- mappe Google --> 
        <div id="content_map-canvas">   
        </div>    
     </body> 
    </html>

코드 자바 스크립트 :

function initialize() { 
     var count = -1; //Is used to number the div (one per address) 
     var descriptions = new Array(); //Array of descriptions 

     //I copy the contents of the addresses array in the descriptions array 
     for(var i=0; i<addresses.length; i++) { 
      var address = addresses[i]; 
      var description = addresses[i]; 

      var geoc = "geocoder" + i; 
      eval("var " + geoc);  

      var map = "map" + i; 
      eval("var " + map); 

      geoc = new google.maps.Geocoder(); 
      var options = { 
       zoom: 15, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 

      count = count + 1; 

      var id = "map-canvas" + count; 
      var div = document.createElement("div"); 
      div.id = id; 
      div.style.width= "300px"; 
      div.style.height= "300px"; 

      var content_map_canvas = document.getElementById("content_map-canvas"); 

      content_map_canvas.appendChild(div); 

      map = new google.maps.Map(document.getElementById(id), options); 

      geoc.geocode({'address': address}, function(results, status) { 
      if(status === google.maps.GeocoderStatus.OK) { 
       map.setCenter(results[0].geometry.location); 
       var marker = new google.maps.Marker 
         ({map: map, 
         position: results[0].geometry.location, 
         title: description 
         }); 
       marker.setAnimation(google.maps.Animation.DROP); 

       contentString = description; 
       var infowindow = new google.maps.InfoWindow({ 
        content: contentString 
       }); 

       google.maps.event.addListener(marker, 'click', function() { 
        infowindow.open(map, marker); 
       }); 
      } 
      else { 
       alert("Geocode failed: " + status + ", " + address); 
      } 
      });  
     } 
    } 
    google.maps.event.addDomListener(window, 'load', initialize);

나는이 이미지는 당신이 더 나은 내가 원하고 내가 내 코드 대신 enter link description here

코드 HTML로 수를 이해하는 데 도움 수 있기를 바랍니다 내가 잘못? 감사합니다

출처

2014-02-06 user3207923

클로저 문제. 모든 마커는 for 루프의 마지막지도로 설정되며 목록의 마지막지도 만 제대로 정의됩니다. geocode 부분을 다음과 같이 묶어야합니다.

... 
(function(address, map) { 
    geoc.geocode({'address': address}, function(results, status) { 
     console.log(address + ', status: ' + status); 
     if (status === google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 
      var marker = new google.maps.Marker 
       ({map: map, 
       position: results[0].geometry.location, 
       title: description 
      }); 
      marker.setAnimation(google.maps.Animation.DROP); 

      contentString = description; 
      var infowindow = new google.maps.InfoWindow({ 
       content: contentString 
      }); 

      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.open(map, marker); 
      }); 
     } 
     else { 
      alert("Geocode failed: " + status + ", " + address); 
     } 
    });  
})(address, map) 
...

출처

2014-02-06 18:59:22

완벽하게 작동합니다. 고마워요! :) – user3207923

Google지도 목록

답변

관련 문제