[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2098
  • Last Modified:

InfoWindow Auto-Open on Google Maps API v3, not auto panning

Hello,

I am trying to implement an infowindow that automatically opens on pageload using google maps v3 API.  The infowindow opens as expected, however the window ends up out of the screen of the map.  I have looked in to modifying the height, however that does not really solve the problem (or work).  According to the documentation the infowindow is supposed to autopan by default, however it is not.  I have even tried to set that parameter to true and that does not have an impact either.

Here is the page I am having issues with:  http://www.thelocalgolfer.com/mobile/course_info_display.php?course=21913

Thanks in advance for your help.
0
neilsav
Asked:
neilsav
1 Solution
 
Tom BeckCommented:
Yes, it's supposed to auto pan but Google Maps leave a ton of padding around markers. If the map is too small to fit the marker's padding and the info window it will not auto pan to fit the info window.

May I suggest using an infoBox instead of an info window. you have much more control over shape and positioning and they take up less room. Here's a sample:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
var map;

function initialize() {

  var myLatlng = new google.maps.LatLng(26.5921053, -81.6567014);

  var mapOptions = {

    zoom: 14,

    center: myLatlng,

    mapTypeId: google.maps.MapTypeId.ROADMAP

  }



  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);



  // Add 5 markers to the map at random locations.

 

var marker = new google.maps.Marker({

	position: myLatlng, 

	map: map

}); 

var boxText = document.createElement("div");
		boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: white; padding: 5px;";
		boxText.innerHTML = "Hello World!";

		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: 1
			  ,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(map, marker);   

  }
</script>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height:270px;width:458px }
</style>
</head>
<body onLoad="initialize()">
<div id="map_canvas"></div>
</body>
</html>

Open in new window

0
 
neilsavAuthor Commented:
Thanks - I  infobox is definitely a good option.  I decided to use pixelOffset: new google.maps.Size(0, 25), to make the window fit in to the map size.
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now