10

Google Map Api V3 を使用して、Google マップを HTML コンテナーに読み込みます。場所検索フォームがあります。送信すると、利用可能な場所が取得され、マップにマーカーが設定されます。マーカーが読み込まれたら、各マーカーをクリックすると、Google マップにあるようなタイトル、住所の詳細、およびデザインを表示する必要があります。(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

4

1 に答える 1

23

Google Maps 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-13T18:37:27.353 に答える