2012-03-18 2 views
2

この機能でマップにマーカーを追加しました。Google Maps API3アプリケーションでマーカーのタイトルが表示されないのはなぜですか?

markers:私のマーカー

// adds new markers to the map. 
function addAMarker(location, myMarkerTitle) { 
    newMarker = new google.maps.Marker({ 
      position: location, 
      map: map 
    }); 
    newMarker.setTitle(myMarkerTitle); 
    markers.push(newMarker); 
} 

それは、地図上のマーカーを追加するために所望のタイトルが、タイトルが、私はに割り当てられた:緯度経度オブジェクト
myMarkerTitleを:マーカーの配列は
locationオブジェクトマーカーは表示されません。どうして?

最後に、マーカーが散らばっている地図が、その上に表示されます。クライアントがマーカーを移動してクリックすると、さらに詳細が表示されます。ありがとうございました。

答えて

5

私が理解したところでは、ツールチップが常に表示されます。そのようなものを作成できるInfoBox Utilityライブラリがあります。非常に柔軟性があり、設定するオプションがたくさんあることを意味します。たとえば、テキストが長すぎてボックスの外側に流れてしまう(つまり、幅を動的に設定する必要がある)場合は、煩わしさがあります。

ドク:http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html ダウンロード:http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/

それはあなたが欲しいものだ場合は、スクリーンショットを参照してくださいinfobox_packed.jsをダウンロードし、以下のコードを試してみてください。

InfoBox example

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html, body, #map_canvas { margin: 0; padding: 0; height: 100% } 
    </style> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="infobox_packed.js"></script> 
    <script type="text/javascript"> 
     var map; 
     var mapOptions = { 
     center: new google.maps.LatLng(0.0, 0.0), 
     zoom: 2, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var count = 0; 

     function initialize() { 
     map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
     google.maps.event.addListener(map, 'click', function (event) { 
      addMarker(event.latLng, "index #" + Math.pow(100, count)); 
      count += 1; 
     }); 
     } 

     function addMarker(pos, content) { 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: pos 
     }); 
     marker.setTitle(content); 

     var labelText = content; 

     var myOptions = { 
      content: labelText 
      ,boxStyle: { 
       border: "1px solid black" 
      ,background: "white" 
      ,textAlign: "center" 
      ,fontSize: "8pt" 
      ,width: "86px" // has to be set manually 
      ,opacity: 1.0 
      } 
      ,disableAutoPan: true 
      ,pixelOffset: new google.maps.Size(-43, -50) // set manually 
      ,position: marker.getPosition() 
      ,closeBoxURL: "" 
      ,pane: "floatPane" 
      ,enableEventPropagation: true 
     }; 

     var ibLabel = new InfoBox(myOptions); 
     ibLabel.open(map); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map_canvas"></div> 
    </body> 
</html> 
+0

ありがとうございました!このツールは簡単で、私のニーズを満たしています。 – dangerChihuahua007

1

AFAICTあなたのコードはうまくいくはずです。わたしにはできる。しかし、タイトルは、マーカーの上にマウスを置くと表示されます。それまでは表示されません。あなたのコメントは、タイトルの仕組みを誤解しているように見えます。彼らの展示はonmouseoverイベントです。あなたのタイトル文字列がヌルか ''である可能性もあります。

2

これは、なぜあなたは新しいマーカーを作成した後のsetTitleを呼び出している、あなたの問題を解決しますがないのだろうか?このような コード:あなたがのsetTitle APIを呼び出す

var newMarker = new google.maps.Marker{ 
    position: location, 
    map: map, 
    title: MyMarkerTitle 
} 

はMVCObjectメソッドのセットを呼び出しますので、上記のコードは同じです:

var newMarker = new google.maps.Marker{ 
    position: location 
}; 
newMarker.setMap(map); 
newMarker.setTitle(myMarkerTitle); 

これはあまりにも動作します:

var newMarker = new google.maps.Marker{ position: location }; 
newMarker.set("map", map); 
newMarker.set("title", myMarkerTitle); 

とこれ:

var newMarker = new google.maps.Marker{ position: location }; 
newMarker.setValues({ map: map, title: myMarkerTitle }); 

Here's the documention.

関連する問題