谷歌地图infowindow位置在右侧

Question

我如何在左侧显示带有箭头的InfoWindow,而不是在底部？

截图示例在这里

Answer 1

现在已经有一段时间了,可能你确实对这个话题感兴趣了.但我想说,不使用任何第三方工具是可能的...只需添加pixelOffset到infowindow这样:

var infowindow = new google.maps.InfoWindow({
      content: "My custom info window",
      pixelOffset: new google.maps.Size(250, 150)
  });

此外,您也可以旋转箭头,只需添加这些样式行:

#map div div div:last-child div:last-child div div div:nth-child(3) {
  left: 0 !important;
  top: 30px !important;
  border-top-width: 24px;
  position: absolute;
  transform: rotate(90deg);
}

可以帮助你或帮助别人......

干杯.

Answer 2

你不能用原生的google.maps.InfoWindow做到这一点.您可以使用第三方InfoWindow替换之一并自定义它们以使箭头位于左侧.

概念证明小提琴(使用InfoBox)

代码段:

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: 0px; margin-left: 6px; background: yellow; padding: 5px;";
		boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

		var myOptions = {
			 content: boxText
			,disableAutoPan: false
			,maxWidth: 0
			,pixelOffset: new google.maps.Size(10, -50)
			,zIndex: null
			,boxStyle: { 
			  background: "url('http://www.geocodezip.com/images/tipbox90pad.gif') no-repeat"
			  ,opacity: 0.75
			  ,width: "150px"
			 }
			,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%;
    margin: 0px;
    padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map_canvas"></div>