右侧谷歌地图信息窗口位置 [英] Google map infowindow position on right side

问题描述

如何在左侧显示带有箭头的信息窗口，而不是在底部?

代码片段:

function initialize() {var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);var myMapOptions = {变焦:15,中心:secheltLoc,mapTypeId: google.maps.MapTypeId.ROADMAP};var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);var 标记 = 新的 google.maps.Marker({地图:地图，可拖动:真实，位置:新 google.maps.LatLng(49.47216, -123.76307),可见:真实});var boxText = document.createElement("div");boxText.style.cssText = "边框:1px 纯黑色；margin-top:0px；margin-left:6px；背景:黄色；padding:5px；";boxText.innerHTML = "市政厅，塞谢尔特<br>不列颠哥伦比亚省<br>加拿大";var myOptions = {内容:boxText,disableAutoPan: 假,最大宽度:0,pixelOffset: 新的 google.maps.Size(10, -50),zIndex: 空,boxStyle: {背景:网址('http://www.geocodezip.com/images/tipbox90pad.gif')不重复"，不透明度:0.75，宽度:150px"},closeBoxMargin: "10px 2px 2px 2px",closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",infoBoxClearance: 新的 google.maps.Size(1, 1),isHidden: 假，窗格:浮动窗格",enableEventPropagation: 假};google.maps.event.addListener(标记，点击"，功能(e){ib.open(theMap, this);});var ib = new InfoBox(myOptions);ib.open(theMap, 标记);}google.maps.event.addDomListener(window, "load", initialize);

html, body, #map_canvas {高度:100%；宽度:100%；边距:0px；填充: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>

How I can show InfoWindow with arrow on the left side like instead on bottom?

screenshot example here

解决方案

You can't do that with a native google.maps.InfoWindow. You can use one of the third party InfoWindow replacements and customize them to have the arrow on the left side.

proof of concept fiddle (using InfoBox)

code snippet:

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>

这篇关于右侧谷歌地图信息窗口位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！