2017-10-07 2 views
-1

누군가가 Google지도 아이콘을 클릭하면 나타나는 정보에 버튼이있는 방법이 있습니까?Google지도 마커 버튼에 문의하기

사람이 마커 위치 중 하나를 클릭하면 해당 마커와 연결된 정보가 팝업되고 클릭하면 메시지 상자가 팝업되는 메시지 버튼이 표시되도록하려는 것입니다.

나는 초보자이지만 학습 중이며 누군가가 나에게 어떻게하면되는지 알지 못한다고하더라도 프로세스의 정확한 이름을 알려주는 데 도움이 될 것입니다.

+0

"정보 창"에 대한 정보는 https://developers.google.com/maps/documentation/javascript/infowindows – thanhnha1103

+0

에서 확인할 수 있습니다. "마커를 클릭하면 버튼이 숨겨집니다. 사용자가 상호 작용하고 해당 버튼을 클릭하면 메시지 상자 팝업이 표시되고 버튼이 다시 숨겨집니다. 그리고 선택한 마커와 관련된 값을 팝업에 전달할 수 있습니다. " –

답변

0

infowindow을 신고 할 때 infowindowcontent을 매개 변수로 전달해야합니다. 여기

function initMap() { 
    var uluru = {lat: -25.363, lng: 131.044}; 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 4, 
     center: uluru 
    }); 

    var contentString = '<div id="content">'+ 
     '<div id="siteNotice">'+ 
     '</div>'+ 
     '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+ 
     '<div id="bodyContent">'+ 
     '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' + 
     'sandstone rock formation in the southern part of the '+ 
     'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+ 
     'south west of the nearest large town, Alice Springs; 450&#160;km '+ 
     '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+ 
     'features of the Uluru - Kata Tjuta National Park. Uluru is '+ 
     'sacred to the Pitjantjatjara and Yankunytjatjara, the '+ 
     'Aboriginal people of the area. It has many springs, waterholes, '+ 
     'rock caves and ancient paintings. Uluru is listed as a World '+ 
     'Heritage Site.</p>'+ 
     '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+ 
     'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+ 
     '(last visited June 22, 2009).</p>'+ 
     '</div>'+ 
     '</div>'; 

    var infowindow = new google.maps.InfoWindow({ 
     content: contentString 
    }); 

    var marker = new google.maps.Marker({ 
     position: uluru, 
     map: map, 
     title: 'Uluru (Ayers Rock)' 
    }); 
    marker.addListener('click', function() { 
     infowindow.open(map, marker); 
    }); 
    } 

, 당신은 간단한 map, 간단한 marker 거대한 텍스트가있는 infowindow 정의 :이 예입니다.

이 코드 <button type="button">Click Me!</button>contentString에 추가하여 버튼을 추가 할 수 있습니다.

infowindowsgoogle's documentationw3schools 버튼에 대한 예제를 참조하십시오.