Google Map API V3 - 마커를 클릭합니다. 오버레이로 추가 정보 콘텐츠 표시 (예 : Google지도에서)

Google지도 Api V3을 사용하여 HTML 컨테이너에 Google지도를로드합니다. 우리는 위치 검색 양식을 가지고 있습니다. 제출시 가능한 위치를 얻고지도에 마커를 설정합니다. 마커가로드되면 각 마커를 클릭하면 제목, 주소 세부 정보 및 Google지도에있는 것과 같은 디자인을 표시해야합니다. (Google지도에서 - 빨간색 마커를 클릭하면 별, 길 찾기, 근처 검색,지도에 저장 ...)Google Map API V3 - 마커를 클릭합니다. 오버레이로 추가 정보 콘텐츠 표시 (예 : Google지도에서)

내장 된 API 함수가 있습니까? 위와 같이 오버레이 상자를로드하십시오. 또는 현재 Google지도에있는 것과 같은 세부 정보를로드 할 수있는 기능이 없습니다.

Google에서 검색하고 문서를지도 할 때 오버레이 창을 표시하고 상자 안의 내용을 쓰는 옵션을 볼 수 있습니다. 그러나 나는 필요한대로 내용을로드하는 옵션을 보지 못했습니다.

아래 코드를 참조 용으로 붙여 넣었습니다.

 var map = null; 
     gmap_ready = function(){ 
    var myLatlng = new google.maps.LatLng(43.834527,-103.564457); 
    var myOptions = { 
     zoom: 3, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

}

function fnLoadMarkers(){ 
var locations = [ 
    ['S Dakota', 43.834527,-103.564457, 1], 
    ['Texas', 31.428663,-99.418947, 2], 
    ['California', 36.668419,-120.249025, 3], 
    ['Newyork', 43.197167,-76.743166, 4], 
    ['Missouri', 38.410558,-92.73926, 5] 
]; 
setMarkers(map,locations); 
    } 
function setMarkers(map, locations) { 
var image = 'images/marker.gif'; 

for (var i = 0; i < locations.length; i++) { 
    var currLocation = locations[i]; 
    var latLng = new google.maps.LatLng(currLocation[1], currLocation[2]); 
    var marker = new google.maps.Marker({ 
     position: latLng, 
     map: map, 
     icon: image, 
     title: currLocation[0], 
     zIndex: currLocation[3] 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
     var latitude = this.position.lat(); 
     var longitude = this.position.lng(); 
     window.open("http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q="+latitude+","+longitude+"&sll="+latitude+","+longitude+"&sspn=0.172749,0.4422&ie=UTF8&ll="+latitude+","+longitude+"&spn=0.162818,0.4422&z=11&iwloc=A"); 
    }); 
    }

} 이러한 결과를 달성하는 방법에 대한 힌트가있는 경우

, 도움이 될 것입니다. 또한 Google API V3를 통해 가능한지 여부를 안내해 주시기 바랍니다. 사전에

감사합니다,

감사

Srinivasan.C

출처

2012-06-12 Srinivasan

를 체크 아웃 InfoBubble 라이브러리 .. @Srinivasan이 도움을했던 표준 정보 창 https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows – gorelative

모습? – Ray

당신이 Google지도 API 마커에서 Google지도에 새로운 창을 열어 왜 이해가 안? URL을 통해 Google지도에 정보 창을 추가 할 수 없습니다.

이것은 내가하는 방법입니다.

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
// Initiate map 
function initialize(data) { 
    // Make position for center map 
    var myLatLng = new google.maps.LatLng(data.lng, data.lat); 

    // Map options 
    var myOptions = { 
    zoom: 10, 
    center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.HYBRID 
    }; 

    // Initiate map 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    // Info window element 
    infowindow = new google.maps.InfoWindow(); 

    // Set pin 
    setPin(data); 
} 
// Show position 
function setPin(data) { 
    var pinLatLng = new google.maps.LatLng(data.lng, data.lat); 
    var pinMarker = new google.maps.Marker({ 
    position: pinLatLng, 
    map: map, 
    data: data 
    }); 

    // Listen for click event 
    google.maps.event.addListener(pinMarker, 'click', function() { 
    map.setCenter(new google.maps.LatLng(pinMarker.position.lat(), pinMarker.position.lng())); 
    map.setZoom(18); 
    onItemClick(event, pinMarker); 
    }); 
} 
// Info window trigger function 
function onItemClick(event, pin) { 
    // Create content 
    var contentString = pin.data.text + "<br /><br /><hr />Coordinate: " + pin.data.lng +"," + pin.data.lat; 

    // Replace our Info Window's content and position 
    infowindow.setContent(contentString); 
    infowindow.setPosition(pin.position); 
    infowindow.open(map) 
} 
</script> 
</head> 
<body onload="initialize({lat:-3.19332,lng:55.952366,text:'<h2>Edinburgh</h2><i>Nice city!</i>'})"> 
    <div id="map_canvas"> 
</div> 
</body> 
</html>

출처

2012-06-13 18:37:27 transilvlad

에 – transilvlad

Google지도에서지도 핀을 클릭하면 OP가 왼쪽 사이드 바에 대해 말하고 있다고 생각합니다. (즉, maps.google.com은 infowindow를 사용하지 않습니다.) –

매우 멋진 친구입니다! :) –

Google Map API V3 - 마커를 클릭합니다. 오버레이로 추가 정보 콘텐츠 표시 (예 : Google지도에서)

답변

관련 문제