Google Map API V3 - マーカーをクリックオーバーレイとして詳細情報のコンテンツを表示する（Googleマップのように）

Google Map Api V3を使用してHTMLコンテナにGoogleマップを読み込みます。私たちは場所検索フォームを持っています。提出すると、地図上に利用可能な場所とマーカーを設定します。マーカーがロードされると、各マーカーをクリックすると、タイトル、アドレスの詳細、Googleマップにあるようなデザインが表示されます。（Googleマップで - 赤いマーカーをクリックすると、星、道順、近くの検索、Save to Mapなど）の詳細情報オーバーレイボックスが表示されます。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ライブラリ..標準の情報ウィンドウに – gorelative

見https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows – 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

@Srinivasanは、このヘルプをしましたか？ – transilvlad

Googleマップの地図ピンをクリックするとOPがスライドする左側のサイドバーについて話していると思います。（つまり、maps.google.comはinfowindowを使用しません） –

非常に素晴らしいメイトです！ :) –

Google Map API V3 - マーカーをクリックオーバーレイとして詳細情報のコンテンツを表示する（Googleマップのように）

答えて

関連する問題