내 Google지도 API JS 코드 유지에 도움이 필요합니다. DRY

Question

자바 스크립트를 쉽게 읽고 이해할 수 있지만 내 코드를 작성하는 데 어려움이 있습니다. 따라서 Google Maps API에 대한 몇 가지 코드를 찾아 보았습니다.이 코드는 제 목적을 달성하기 위해 패치했지만 지나치게 반복적입니다.

저는 특히 각 마커에 .addListener를 별도로 (코드 블록의 끝 부분에) 배치해야하는 부분에 대해 말합니다. 배열을 정리하는 데 Array가 도움이된다고 생각하고 있습니다.하지만 정확히 작동하는 방법을 잃어 버렸습니다. 어떤 도움을 많이 주시면 감사하겠습니다!

<script> 
    function initMap() { 
    // Styles a map in night mode. 
    var map = new google.maps.Map(document.getElementById('cc-qline-map'), { 
     center: {lat: 50.1332, lng: -100.6700}, 
     zoom:4, 
     mapTypeControl: false, 
     scrollwheel: false, 

     styles: [ 
     {elementType: 'geometry', stylers: [{color: '#222222'}]}, 
     {elementType: 'labels.text.stroke', stylers: [{color: '#191919'}]}, 
     {elementType: 'labels.text.fill', stylers: [{color: '#d3d3d3'}]}, 
     { 
      featureType: 'administrative.locality', 
      elementType: 'labels.text.fill', 
      stylers: [{color: '#d3d3d3'}] 
     }, 
     { 
      featureType: 'poi', 
      elementType: 'labels.text.fill', 
      stylers: [{color: '#d3d3d3'}] 
     }, 
     { 
      featureType: 'poi.park', 
      elementType: 'geometry', 
      stylers: [{color: '#191919'}] 
     }, 
     { 
      featureType: 'poi.park', 
      elementType: 'labels.text.fill', 
      stylers: [{color: '#d3d3d3'}] 
     }, 
     { 
      featureType: 'road', 
      elementType: 'geometry', 
      stylers: [{color: '#d3d3d3'}] 
     }, 
     { 
      featureType: 'road', 
      elementType: 'geometry.stroke', 
      stylers: [{color: '#d3d3d3'}] 
     }, 
     { 
      featureType: 'road', 
      elementType: 'labels.text.fill', 
      stylers: [{color: '#d3d3d3'}] 
     }, 
     { 
      featureType: 'road.highway', 
      elementType: 'geometry', 
      stylers: [{color: '#191919'}] 
     }, 
     { 
      featureType: 'road.highway', 
      elementType: 'geometry.stroke', 
      stylers: [{color: '#191919'}] 
     }, 
     { 
      featureType: 'road.highway', 
      elementType: 'labels.text.fill', 
      stylers: [{color: '#d3d3d3'}] 
     }, 
     { 
      featureType: 'transit', 
      elementType: 'geometry', 
      stylers: [{color: '#191919'}] 
     }, 
     { 
      featureType: 'transit.station', 
      elementType: 'labels.text.fill', 
      stylers: [{color: '#191919'}] 
     }, 
     { 
      featureType: 'water', 
      elementType: 'geometry', 
      stylers: [{color: '#d3d3d3'}] 
     }, 
     { 
      featureType: 'water', 
      elementType: 'labels.text.fill', 
      stylers: [{color: '#222222'}] 
     }, 
     { 
      featureType: 'water', 
      elementType: 'labels.text.stroke', 
      stylers: [{color: '#d3d3d3'}] 
     } 
     ] 
    }); 

    var markerBc = new google.maps.Marker({ 
    position: {lat: 49.054201, lng: -122.383454}, 
    map: map, 
    title: '30310-30360 Old Yale Rd, Abbotsford, BC V4X 2N7' 
    }); 
    var markerBcText = '<div class="cc-map-text">'+ 
     '<h3>Q-Line Trucking</h3>'+ 
     '<h4>Abbotsford, British Columbia</h4>'+ 
     '<p>30310-30360 Old Yale Rd, Abbotsford, BC V4X 2N7</p>'+ 
    '</div>'; 
    markerBc.addListener('click', function() { 
     new google.maps.InfoWindow({ 
     content: markerBcText, 
     }).open(map, this); 
    }); 




    var markerAb = new google.maps.Marker({ 
    position: {lat: 53.540016, lng: -113.797466}, 
    map: map, 
    title: '#625-26409 TWP Road 525A, Acheson, AB T7X 5A6' 
    }); 
    var markerAbText = '<div class="cc-map-text">'+ 
     '<h3>Q-Line Trucking</h3>'+ 
     '<h4>Acheson, Alberta</h4>'+ 
     '<p>#625-26409 TWP Road 525A, Acheson, AB T7X 5A6</p>'+ 
    '</div>'; 
    markerAb.addListener('click', function() { 
     new google.maps.InfoWindow({ 
     content: markerAbText, 
     }).open(map, this); 
    }); 



    var markerSk = new google.maps.Marker({ 
    position: {lat: 52.172385, lng: -106.649831}, 
    map: map, 
    title: 'PO Box 110-B RR#4, Corman Industrial Park Saskatoon, SK S7K 3J7' 
    }); 
    var markerSkText = '<div class="cc-map-text">'+ 
     '<h3>Q-Line Trucking</h3>'+ 
     '<h4>Saskatoon, Saskatchewan</h4>'+ 
     '<p>PO Box 110-B RR#4, Corman Industrial Park Saskatoon, SK S7K 3J7</p>'+ 
    '</div>'; 
    markerSk.addListener('click', function() { 
     new google.maps.InfoWindow({ 
     content: markerSkText, 
     }).open(map, this); 
    }); 



    var markerMb = new google.maps.Marker({ 
    position: {lat: 49.177328, lng: -97.936206}, 
    map: map, 
    title: 'PO Box 1870 #6 3rd St S, Winkler, MB R6W 4B7' 
    }); 
    var markerMbText = '<div class="cc-map-text">'+ 
     '<h3>Q-Line Trucking</h3>'+ 
     '<h4>Winkler, Manitoba</h4>'+ 
     '<p>PO Box 1870 #6 3rd St S, Winkler, MB R6W 4B7</p>'+ 
    '</div>'; 
    markerMb.addListener('click', function() { 
     new google.maps.InfoWindow({ 
     content: markerMbText, 
     }).open(map, this); 
    }); 


    var markerIa = new google.maps.Marker({ 
    position: {lat: 42.464988, lng: -92.339417}, 
    map: map, 
    title: '1410 Columbus Dr, Waterloo, IA 50702' 
    }); 
    var markerIaText = '<div class="cc-map-text">'+ 
     '<h3>Q-Line Trucking</h3>'+ 
     '<h4>Waterloo, Iowa</h4>'+ 
     '<p>1410 Columbus Dr, Waterloo, IA 50702</p>'+ 
    '</div>'; 
    markerIa.addListener('click', function() { 
     new google.maps.InfoWindow({ 
     content: markerIaText, 
     }).open(map, this); 
    }); 



    var markerOn = new google.maps.Marker({ 
    position: {lat: 43.576325, lng: -79.812785}, 
    map: map, 
    title: '7105 Auburn Road, Milton, ON L9T7V9' 
    }); 
    var markerOnText = '<div class="cc-map-text">'+ 
     '<h3>Q-Line Trucking</h3>'+ 
     '<h4>Milton, Ontario</h4>'+ 
     '<p>7105 Auburn Road, Milton, ON L9T7V9</p>'+ 
    '</div>'; 
    markerOn.addListener('click', function() { 
     new google.maps.InfoWindow({ 
     content: markerOnText, 
     }).open(map, this); 
    }); 


    } 

Answer 1

은 당신이해야 할 것은 당신의 마커를 만드는 데 필요한 모든 데이터를 배열을 가지고있다. 그걸 반복하십시오. 당신의 <h3>, <h4> 및 <p>위한 경우가 만든 감각을 필요로 각 부분에 당신은 심지어 text 더 고장날 수

var markerData = [ 
    { 
     lat: 49.054201, 
     lng: -122.383454, 
     title: '30310-30360 Old Yale Rd, Abbotsford, BC V4X 2N7', 
     text: '<h3>Q-Line Trucking</h3>'+'<h4>Abbotsford, British Columbia</h4>'+'<p>30310-30360 Old Yale Rd, Abbotsford, BC V4X 2N7</p>' 
    }, 
    { 
     lat: 53.540016, 
     lng: -113.797466, 
     title: '#625-26409 TWP Road 525A, Acheson, AB T7X 5A6', 
     text: '<h3>Q-Line Trucking</h3>' + '<h4>Acheson, Alberta</h4>'+'<p>#625-26409 TWP Road 525A, Acheson, AB T7X 5A6</p>' 
    }, 
    // ... etc 
]; 


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

function createMarker(data) { 
    var marker = new google.maps.Marker({ 
    position: {lat: data.lat, lng: data.lng}, 
    map: map, 
    title: data.title 
    }); 
    var markerText = '<div class="cc-map-text">' + data.text + '</div>'; 
    marker.addListener('click', function() { 
     new google.maps.InfoWindow({ 
     content: markerText, 
     }).open(map, this); 
    }); 
} 

:처럼 뭔가.