Infowindows가있는 Google Maps API 다중 마커

92

클릭하면 표시되는 자체 정보 창이있는 여러 마커를 각각 추가하려고합니다. 정보창을 표시하는 데 문제가 있습니다. 시도 할 때 정보창없이 하나의 마커 만 표시됩니다.

감사합니다. 추가 정보가 필요하면 알려주세요.

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
html {
    height: 100%
}

body {
    height: 100%;
    margin: 0;
    padding: 0
}

#map_canvas {
    height: 100%
}
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&sensor=false">
</script>
<script type="text/javascript">

var locations = [
    ['loan 1', 33.890542, 151.274856, 'address 1'],
    ['loan 2', 33.923036, 151.259052, 'address 2'],
    ['loan 3', 34.028249, 151.157507, 'address 3'],
    ['loan 4', 33.80010128657071, 151.28747820854187, 'address 4'],
    ['loan 5', 33.950198, 151.259302, 'address 5']
];

function initialize() {

    var myOptions = {
        center: new google.maps.LatLng(33.890542, 151.274856),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP

    };
    var map = new google.maps.Map(document.getElementById("default"),
        myOptions);

    setMarkers(map, locations)
}


function setMarkers(map, locations) {

    var marker, i
    for (i = 0; i < locations.length; i++) {

        var loan = locations[i][0]
        var lat = locations[i][1]
        var long = locations[i][2]
        var add = locations[i][3]

        latlngset = new google.maps.LatLng(lat, long);

        var marker = new google.maps.Marker({
            map: map, title: loan, position: latlngset
        });
        map.setCenter(marker.getPosition())

        var content = "Loan Number: " + loan + '</h3>' + "Address: " + add

        var infowindow = new google.maps.InfoWindow()

        google.maps.AddListener(marker, 'click', function (map, marker) {
            infowindow.setContent(content)
            infowindow.open(map, marker)
        });
    }
}


</script>
</head>
<body onload="initialize()">
<div id="default" style="width:100%; height:100%"></div>
</body>
</html>
javascript  google-maps  google-maps-api-3  google-maps-markers  infowindow 
— 스택 트레이시
소스
2
마커 앞에 생성 된 정보창을 하나만 사용하세요. 그러면 각 마커에 대한 클릭 이벤트가 올바르게 작동합니다. content이벤트 리스너 내부 의 변수 는 해당 함수 내에 정의되어 있지 않습니다.
— js1568
1
간단한 설명처럼 코드의 형식을 잘 지정하면 읽기가 훨씬 쉽습니다.
— paullb
1
@paullb 나는 그것을 다시 포맷 할 것입니다, 나는 내가 더 초보자 였을 때 4 년 전처럼이 질문을 썼습니다. :)
— stacktraceyo
클릭 및 호버 여러 마커 정보창 표시하려면이 자습서를 확인 freakyjolly.com/...을
— 코드 스파이에게

답변:

206

클로저를 사용할 수 있습니다. 다음과 같이 코드를 수정하십시오.

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

여기 데모입니다

— 공학자
소스
2
이 작업을 수행했지만 다른 마커를 클릭하면 다른 마커를 클릭 할 때마다 계속해서 더 많은 정보 창을 여는 대신 이전에 열려 있던 정보 창을 대체하는 정보 창이 열리도록 코드를 어떻게 변경합니까?
— railsy
효과가있다! 하지만 누군가 pls가 왜 이런 식으로 작동하는지 설명 할 수 있습니까?
— Lakshay
1
당신은 유사한 문제에 대한 읽을 수 @Lakshay 여기
— 엔지니어
1
이 경우지도 외부를 클릭 할 때 정보창을 어떻게 닫아야합니까?
— Rohit Tigga
정보창을 닫는 방법? infowindow.close()작동하지 않습니다.
— mokiSRB
10

확실히 작동하는 코드 스 니펫은 다음과 같습니다. jsFiddle 및 설명에 대한 자세한 내용 은 아래 링크 를 방문하십시오 . 완벽한 확대 / 축소로 Google지도에서 여러 주소를 찾는 방법

var infowindow = new google.maps.InfoWindow();  
google.maps.event.addListener(marker, 'mouseover', (function(marker) {  
           return function() {  
               var content = address;  
               infowindow.setContent(content);  
               infowindow.open(map, marker);  
           }  
         })(marker));
— Evaipar
소스
5

소스 링크

데모 링크

다음 코드는 InfoWindow가있는 다중 마커를 보여줍니다 . 코드 주석을 제거하여 Hover에 정보를 표시 할 수도 있습니다.

여기에 이미지 설명 입력

            var map;
            var InforObj = [];
            var centerCords = {
                lat: -25.344,
                lng: 131.036
            };
            var markersOnMap = [{
                    placeName: "Australia (Uluru)",
                    LatLng: [{
                        lat: -25.344,
                        lng: 131.036
                    }]
                },
                {
                    placeName: "Australia (Melbourne)",
                    LatLng: [{
                        lat: -37.852086,
                        lng: 504.985963
                    }]
                },
                {
                    placeName: "Australia (Canberra)",
                    LatLng: [{
                        lat: -35.299085,
                        lng: 509.109615
                    }]
                },
                {
                    placeName: "Australia (Gold Coast)",
                    LatLng: [{
                        lat: -28.013044,
                        lng: 513.425586
                    }]
                },
                {
                    placeName: "Australia (Perth)",
                    LatLng: [{
                        lat: -31.951994,
                        lng: 475.858081
                    }]
                }
            ];

            window.onload = function () {
                initMap();
            };

            function addMarkerInfo() {
                for (var i = 0; i < markersOnMap.length; i++) {
                    var contentString = '<div id="content"><h1>' + markersOnMap[i].placeName +
                        '</h1><p>Lorem ipsum dolor sit amet, vix mutat posse suscipit id, vel ea tantas omittam detraxit.</p></div>';

                    const marker = new google.maps.Marker({
                        position: markersOnMap[i].LatLng[0],
                        map: map
                    });

                    const infowindow = new google.maps.InfoWindow({
                        content: contentString,
                        maxWidth: 200
                    });

                    marker.addListener('click', function () {
                        closeOtherInfo();
                        infowindow.open(marker.get('map'), marker);
                        InforObj[0] = infowindow;
                    });
                    // marker.addListener('mouseover', function () {
                    //     closeOtherInfo();
                    //     infowindow.open(marker.get('map'), marker);
                    //     InforObj[0] = infowindow;
                    // });
                    // marker.addListener('mouseout', function () {
                    //     closeOtherInfo();
                    //     infowindow.close();
                    //     InforObj[0] = infowindow;
                    // });
                }
            }

            function closeOtherInfo() {
                if (InforObj.length > 0) {
                    InforObj[0].set("marker", null);
                    InforObj[0].close();
                    InforObj.length = 0;
                }
            }

            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 4,
                    center: centerCords
                });
                addMarkerInfo();
            }
— 코드 스파이
소스
이 솔루션에 대한 요구 사항은 그렇지 않으면 작동하지 않음 .. 정보창과 마커 const를 사용하는 것입니다
— 짐 흰꽃
2

정보 창 닫기를 일부 이벤트에 바인딩하려면 다음과 같이 시도하십시오.

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
    return function() {
        infowindow.setContent(content);
        infowindow.open(map,marker);
        windows.push(infowindow)
        google.maps.event.addListener(map,'click', function(){ 
            infowindow.close();
        }); 
    };
})(marker,content,infowindow));
— 비나 약 카니 야라 칼
소스
0 
function setMarkers(map,locations){

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

 var loan = locations[i][0];
 var lat = locations[i][1];
 var long = locations[i][2];
 var add =  locations[i][3];

 latlngset = new google.maps.LatLng(lat, long);

 var marker = new google.maps.Marker({  
          map: map, title: loan , position: latlngset  
 });
 map.setCenter(marker.getPosition());


 marker.content = "<h3>Loan Number: " + loan +  '</h3>' + "Address: " + add;


 google.maps.events.addListener(marker,'click', function(map,marker){
          map.infowindow.setContent(marker.content);
          map.infowindow.open(map,marker);

 });

 }
}

그런 다음 기능으로 이동 var infowindow = new google.maps.InfoWindow()하십시오 initialize().

function initialize() {

    var myOptions = {
      center: new google.maps.LatLng(33.890542, 151.274856),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP

    };
    var map = new google.maps.Map(document.getElementById("default"),
        myOptions);
    map.infowindow = new google.maps.InfoWindow();

    setMarkers(map,locations)

  }
— js1568
소스
1
google.maps.events.AddListener있어야합니다google.maps.event.addListener
— Patrick Yan
내 initialize () 함수 내부에 TypeError: map.infowindow is undefined포함하면 얻을var infowindow = new google.maps.InfoWindow();
— invot
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.