web-dev-qa-db-fra.com

Google map position de l'infowindow sur le côté droit

Comment puis-je afficher InfoWindow avec une flèche à gauche et à la place en bas?

exemple de capture d'écran ici

javascriptgoogle-mapsgoogle-api
8
Misha Kav

Vous ne pouvez pas faire cela avec un google.maps.InfoWindow . Vous pouvez utiliser l’un des remplaçants tiers d’InfoWindow et le personnaliser pour que la flèche se trouve à gauche.

preuve de concept fiddle (using InfoBox )

 InfoBox with arrow on left

extrait de code: 

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>

5
geocodezip

Cela faisait un moment maintenant, et vous avez probablement déplacé votre intérêt pour ce sujet. Mais je dirais qu'il est possible de ne pas utiliser d'outils tiers ... ajoutez simplement pixelOffset à la infowindow comme ceci:

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

Vous pouvez également faire pivoter la flèche en ajoutant simplement ces lignes de style:

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

Puisse-t-il vous aider ou aider quelqu'un d'autre ...

à votre santé.

6
Malek Boubakri

Basé sur ceci Un info Google Maps peut-il être placé à droite ou à gauche d'un marqueur? thread, vous pouvez utiliser pixelOffset propriété de l'infowindow qui accepte un google.maps.Size en tant que valeur. 

Décalage, en pixels, de la pointe de la fenêtre d’information par rapport au point de la carte dont les coordonnées géographiques sont ancrées. Si une fenêtre d'information est ouverte avec une ancre, le pixelOffset sera calculé à partir de la propriété anchorPoint de l'ancre.

Par exemple:

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

Vous pouvez vérifier sur ces threads liés:

J'espère que cela t'aides!

2
abielita

Il existe une propriété appelée anchorPoint grâce à laquelle vous pouvez modifier la position de votre fenêtre d’information.

0
Chaturvedi Saurabh