Google map infowindow position on right side

问题:

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

screenshot example here

回答1:

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>

回答2:

It been a while now, and probably you do move your interest on this topic. But i would to say that it is possible without using any third party tools... just add pixelOffset to the infowindow like this:

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

Also, you may would to rotate the arrow as well, just add those style lines:

#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);
}

May it help you or help someone else...

cheers.

回答3:

Based from this Can a Google maps infoWindow be on right or left side a marker? thread, you can use pixelOffset property of the infowindow that accepts a google.maps.Size as a value.

The offset, in pixels, of the tip of the info window from the point on the map at whose geographical coordinates the info window is anchored. If an InfoWindow is opened with an anchor, the pixelOffset will be calculated from the anchor's anchorPoint property.

For example:

var infowindow = new google.maps.InfoWindow({
      content: "hello world",
      pixelOffset: new google.maps.Size(100,100)
  });

You can check on these related threads:

• Google Maps InfoBubble pixelOffset (Moving from default position above marker)
• Example from GitHub: https://gist.github.com/carloscabo/cca62ae31a0d42438873

Hope this helps!

回答4:

There is a property called anchorPoint by which you can change position of your info window.