Google지도에 여러 마커 놓기

저는 JS에서 약간의 초보자입니다. 노드의 좌표를 반복하여 Google지도에 배치하려고합니다. Google지도에 여러 마커 놓기

이

내 코드

var lis = document.getElementById("showNames").getElementsByTagName("li"); 
var lat = document.getElementById("showLat").getElementsByTagName("li"); 
var lng = document.getElementById("showLng").getElementsByTagName("li"); 
var length = lis.length; 

for (var i = 0; i < length; i++) { 
    new google.maps.Marker({ 
     position: new google.maps.LatLng(lat[i].innerHTML, lng[i].innerHTML), 
     icon: '/panasonic/images/store-icons.png' 
    }).setMap(map); 

}

이 작동하지 않습니다, 나는 빈지도를 얻을 수 있지만, 불을 지르고는 오류를 보여줍니다.

내가 그것을 루프를 필요로하지만 내 DB에서

감사

출처

2013-03-02 A. Mo

무엇입니까? –

를 업데이트한다 등을 통해 내가 루프

new google.maps.Marker({ 
    position: new google.maps.LatLng(lat[0].innerHTML, lng[0].innerHTML), 
    icon: '/panasonic/images/store-icons.png' 
    //animation:google.maps.Animation.BOUNCE 
}).setMap(map);

외부 이렇게하면 당신은 아래의 예를 확인할 수 있습니다. "Add Some Markers"링크를 클릭하면지도에 나타나는 좌표 배열이 있습니다.

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>Google Maps</title> 
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script> 
     <script type="text/javascript"> 

      var cityList = [ 
        ['Chicago', 41.850033, -87.6500523, 1], 
        ['Illinois', 40.797177,-89.406738, 2] 
       ], 
       demoCenter = new google.maps.LatLng(41,-87), 
       map; 

      function initialize() 
      { 
       map = new google.maps.Map(document.getElementById('map_canvas'), { 
        zoom: 7, 
        center: demoCenter, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }); 
      } 

      function addMarkers() 
      { 
       var marker, 
       i, 
       infowindow = new google.maps.InfoWindow(); 

       for (i = 0; i < cityList.length; i++) 
       { 
        marker = new google.maps.Marker({ 
         position: new google.maps.LatLng(cityList[i][1], cityList[i][2]), 
         map: map, 
         title: cityList[i][0] 
        }); 

        google.maps.event.addListener(marker, 'click', (function(marker, i) { 
         return function() { 
          infowindow.setContent(cityList[i][0]); 
          infowindow.open(map, marker); 
         } 
        })(marker, i)); 
       } 
      } 

      $(document).ready(function() { 
       initialize(); 
      }); 

      $(document).on('click', '.add-markers', function(e) { 
       e.preventDefault(); 
       addMarkers(); 
      }); 

     </script> 
    </head> 
    <body> 
     <div id="basic-map"> 
      <div id="map_canvas" style="height:350px;"></div> 
      <a href="#" class="add-markers">Add Some Markers</a> 
     </div>  
    </body> 
</html>

자동으로 마커를 보여 대답을 업데이트 :

이 lat``lis``와`lng` 포함

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>Google Maps</title> 
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script> 
     <script type="text/javascript"> 

      var cityList = [ 
        ['Chicago', 41.850033, -87.6500523, 1], 
        ['Illinois', 40.797177,-89.406738, 2] 
       ], 
       demoCenter = new google.maps.LatLng(41,-87), 
       map; 

      function initialize() 
      { 
       map = new google.maps.Map(document.getElementById('map_canvas'), { 
        zoom: 7, 
        center: demoCenter, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }); 
      } 

      function addMarkers() 
      { 
       var marker, 
       i, 
       infowindow = new google.maps.InfoWindow(); 

       for (i = 0; i < cityList.length; i++) 
       { 
        marker = new google.maps.Marker({ 
         position: new google.maps.LatLng(cityList[i][1], cityList[i][2]), 
         map: map, 
         title: cityList[i][0] 
        }); 

        google.maps.event.addListener(marker, 'click', (function(marker, i) { 
         return function() { 
          infowindow.setContent(cityList[i][0]); 
          infowindow.open(map, marker); 
         } 
        })(marker, i)); 
       } 
      } 

      $(document).ready(function() { 
       initialize(); 
       addMarkers(); 
      }); 

     </script> 
    </head> 
    <body> 
     <div id="basic-map"> 
      <div id="map_canvas" style="height:350px;"></div> 
     </div>  
    </body> 
</html>

출처

2013-03-02 11:48:20

답장을 보내 주셔서 감사합니다. 코드를 사용하여 클릭 기능을 사용하지 않고 마커를 표시하려면 어떻게해야합니까? 페이지로드시 마커를 자동으로 표시하십시오. –

답변을 업데이트했습니다. 천만에요. –

그건 고마워. 고마워. –

Google지도에 여러 마커 놓기

답변

관련 문제