Google지도에 마커를 추가하는 더 효율적인 방법 v3

Question

프로그래밍 방식으로이 JS를 구축하고 있습니다. 각 마커는 marker_0, marker_1 등의 별도 변수로 표시됩니다.이 방법이 효과적이지만 우아한 방법으로 마커 & 정보 창을 생성 할 수 있습니까?

  <script type="text/javascript"> 
    var map; 

    function initialize() { 
     var mapOptions = { 
     zoom: 8, 
     center: new google.maps.LatLng(41.056466,-85.3312009), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

     var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 

     //************************************************************** 
     //Add 1st marker 
     //************************************************************** 
     var contentString_0 ='<strong>Club name: Fort Wayne Time Corners</strong>'; 
     var infowindow_0 = new google.maps.InfoWindow({ 
      content: contentString_0 
     }); 


     var image_0 = '/js/markers/marker1.png'; 
     var Latlng_0 = new google.maps.LatLng(41.057814980291,-85.329851919709); 
     var marker_0 = new google.maps.Marker({ 
       position: Latlng_0, 
       title:"0", 
       icon: image_0}); 

     marker_0.setMap(map); 

     google.maps.event.addListener(marker_0, 'click', function() { 
      infowindow_0.open(map,marker_0); 
     }); 

    //************************************************************** 
     //Add 2nd marker 
     //************************************************************** 
     var contentString_1='<strong>Club name: Roanoke</strong>'; 

     var infowindow_1 = new google.maps.InfoWindow({ 
      content: contentString_1 
     }); 


     var image_1 = '/js/markers/marker2.png'; 
     var Latlng_1 = new google.maps.LatLng(41.17805990,-85.4436640); 
     var marker_1 = new google.maps.Marker({ 
     position: Latlng_1, 
     title:"1", 
     icon: image_1}); 

     marker_1.setMap(map); 

     google.maps.event.addListener(marker_1, 'click', function() { 
      infowindow_1.open(map,marker_1); 
     }); 


} 

function loadScript() { 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = "http://maps.googleapis.com/maps/api/js&sensor=false&callback=initialize"; 
    document.body.appendChild(script); 
} 

window.onload = loadScript;    
</script> 

Answer 1

예, 당신은 쉽게이 작업을 수행 할 수 있습니다

1. 각 마커를 설명하는 데이터의 배열을 만듭니다.
2. 해당 배열의 한 항목에있는 설명을 기반으로 단일 마커를 추가하는 함수를 작성하십시오.
3. 해당 배열의 각 항목에 대해 해당 함수를 호출하십시오.

그래서 동적으로 생성해야하는 부분은 데이터 배열입니다. 모든 실제 마커 코드는 모든 마커에서 공유됩니다. 이처럼

:

var map; 

var places = [ 
    { 
     lat: 41.057814980291, 
     lng: -85.329851919709, 
     image: 'marker1', 
     title: '0', 
     club: 'Fort Wayne Time Corners' 
    }, 
    { 
     lat: 41.17805990, 
     lng: -85.4436640, 
     image: 'marker2', 
     title: '1', 
     club: 'Roanoke' 
    } 
]; 

function initialize() { 
    var mapOptions = { 
     zoom: 8, 
     center: new google.maps.LatLng(41.056466,-85.3312009), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(
     document.getElementById("map-canvas"), 
     mapOptions 
    ); 

    for(var i = 0; i < places.length; i++) { 
     addPlace(places[i]); 
    } 

    function addPlace(place) { 
     var content = '<strong>Club name: ' + place.club + '</strong>'; 
     var infowindow = new google.maps.InfoWindow({ 
      content: content 
     }); 

     var image = '/js/markers/' + place.image + '.png'; 
     var latlng = new google.maps.LatLng(place.lat, place.lng); 
     var marker = new google.maps.Marker({ 
      position: latlng, 
      title: place.title, 
      icon: image 
     }); 

     marker.setMap(map); 

     google.maps.event.addListener(marker, 'click', function() { 
      infowindow.open(map, marker); 
     }); 
    } 
} 

function loadScript() { 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = "http://maps.googleapis.com/maps/api/js&sensor=false&callback=initialize"; 
    document.body.appendChild(script); 
} 

window.onload = loadScript;