Google지도 API 자동 열기 infoWindow

Question

코드가 완벽하게 작동합니다. 내가보고있는 문제는 Markers가 처음로드되었을 때 Auto-Open을하지 않는다는 것입니다.

여기 내 코드입니다. 첫 번째 시도에서 "infoWindow.open (map, marker);" For 문 양쪽 모두에서 for 문 결론을 진행하십시오.

또한 현재 코드가있는 codepen도 있습니다. https://codepen.io/designsbycamaron/pen/evPWbL

jQuery(function($) { 
    // Asynchronously Load the map API 
    var script = document.createElement('script'); 
    script.src = "//maps.googleapis.com/maps/api/js?key=AIzaSyCHlDHe3KZYAMqQIQoklenAKqi6jE2lxPA&callback=initMap"; 
    document.body.appendChild(script); 
}); 
function initMap() { 
     var mapOptions = { 
      center: new google.maps.LatLng(markers[0].lat, markers[0].lng), 
      zoom: 10, 
      mapTypeControl: false, 
     draggable: false, 
     scaleControl: false, 
     scrollwheel: false, 
     navigationControl: false, 
     streetViewControl: false, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("main_map"), mapOptions); 

     //Create and open InfoWindow. 
     var infoWindow = new google.maps.InfoWindow(); 

     for (var i = 0; i < markers.length; i++) { 
      var data = markers[i]; 
      var myLatlng = new google.maps.LatLng(data.lat, data.lng); 
      var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map, 
       title: data.title 
      }); 

      //Attach click event to the marker. 
      (function (marker, data) { 
       google.maps.event.addListener(marker, "click", function (e) { 
        //Wrap the content inside an HTML DIV in order to set height and width of InfoWindow. 
        infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.description + "</div>"); 

       }); 

      })(marker, data); 

     } 
     infoWindow.open(map,marker); 
    } 

Answer 1

각 마커에 대해 infoWindow가 필요합니다. 그들을 배열에 저장하십시오. 처음부터 모두 엽니 다. 또한 클릭 할 때 올바른 이벤트 리스너를 열고 다른 이벤트 리스너를 닫는 이벤트 리스너가 있습니다. 당신은 당신이 어떤 내용으로, 페이지로드에있는 정보창을 열고, 다음 뭔가 그 정보창의 내용을 설정하는 순간 ... 메이커 클릭에

Link to forked codepen here

var markers = [{"title": "City A","lat": "44.6299425","lng": "-123.0813560","description": "lore lipsum epsum ipsum", "deptID":"29","provID":"119"},{"title": "City B","lat": "44.5671365","lng": "-123.2745664","description": "lore lipsum epsum ipsum", "deptID":"28","provID":"120"}]; 
jQuery(function($) { 
    // Asynchronously Load the map API 
    var script = document.createElement('script'); 
    script.src = "//maps.googleapis.com/maps/api/js?key=AIzaSyCHlDHe3KZYAMqQIQoklenAKqi6jE2lxPA&callback=initMap"; 
    document.body.appendChild(script); 
}); 

var markersList = []; 

function initMap() { 

    var mapOptions = { 
    center: new google.maps.LatLng(markers[0].lat, markers[0].lng), 
    zoom: 10, 
    mapTypeControl: false, 
    draggable: false, 
    scaleControl: false, 
    scrollwheel: false, 
    navigationControl: false, 
    streetViewControl: false, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

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

    for (var i = 0; i < markers.length; i++) { 

    var data = markers[i]; 

    var myLatlng = new google.maps.LatLng(data.lat, data.lng); 

    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title: data.title 
    }); 

    var infowindow = new google.maps.InfoWindow({ 
     content: "<div style = 'width:200px;min-height:40px'>" + markers[i].description + "</div>" 
    }); 

    marker.infobox = infowindow; 

    markersList.push(marker); 

    //Attach click event to the marker. 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 

     console.log(i); 

     // Close all other infoboxes 
     for (var j = 0; j < markersList.length; j++) { 
      markersList[j].infobox.close(map); 
     } 

     // Open correct info box 
     markersList[i].infobox.open(map, markersList[i]); 
     } 
    })(marker, i)); 
    } 

    // Open all on page load 
    for (var j = 0; j < markersList.length; j++) { 
    markersList[j].infobox.open(map, markersList[j]); 
    } 
}