Googleマップインフォウィンドウの位置を変更するには

Question

インフォウィンドウをGoogleマップに配置するにはどうすればよいですか？

小さなインデントがマーカーの方に向いているように、マーカーの下にウィンドウを開きたいと思います。

ここに私のコードがあります。私はpixeloffsetが変更するオプションだとは思っていましたが、わかりません。 yを70に調整すると、マーカーの下に表示されますが、インデントをどのように変更して反転させることができますか？

$infowindow = new google.maps.InfoWindow({ 
 
    content: "Drag the map to re-center location", 
 
    pixelOffset: new google.maps.Size(0, 70), // want the window to open underneathe with the indent facing up 
 
});

Answer 1

あなたが探している行動は、（現在は）ネイティブgoogle.maps.InfoWindowによってサポートされていません。 feature request in the issue tracker for the Google Maps JavaScript API v3を作成することができます。今仕事と何かのために

、InfoBoxは、あなたが探しているものを行う可能性があり、example in the documentation

コードスニペット参照：はいインフォボックスはそれをしないが、それだ

function initialize() { 
 
    var secheltLoc = new google.maps.LatLng(49.47216, -123.76307); 
 

 
    var myMapOptions = { 
 
    zoom: 15, 
 
    center: secheltLoc, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions); 
 

 

 
    var marker = new google.maps.Marker({ 
 
    map: theMap, 
 
    draggable: true, 
 
    position: new google.maps.LatLng(49.47216, -123.76307), 
 
    visible: true 
 
    }); 
 

 
    var boxText = document.createElement("div"); 
 
    boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: white; padding: 5px; text-align: center;"; 
 
    boxText.innerHTML = "Drag the map to re-center location"; 
 

 
    var myOptions = { 
 
    content: boxText, 
 
    disableAutoPan: false, 
 
    maxWidth: 0, 
 
    pixelOffset: new google.maps.Size(-140, 0), 
 
    zIndex: null, 
 
    boxStyle: { 
 
     background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat", 
 
     opacity: 0.75, 
 
     width: "280px" 
 
    }, 
 
    closeBoxMargin: "10px 2px 2px 2px", 
 
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif", 
 
    infoBoxClearance: new google.maps.Size(1, 1), 
 
    isHidden: false, 
 
    pane: "floatPane", 
 
    enableEventPropagation: false 
 
    }; 
 

 
    google.maps.event.addListener(marker, "click", function(e) { 
 
    ib.open(theMap, this); 
 
    }); 
 

 
    var ib = new InfoBox(myOptions); 
 

 
    ib.open(theMap, marker); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="http://maps.googleapis.com/maps/api/js"></script> 
 
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> 
 
<div id="map_canvas" style="width: 100%; height: 400px"></div> 
 
<p> 
 
    This example shows the "traditional" use of an InfoBox as a replacement for an InfoWindow.