Google Map Infobox Position

google map infobox position

set the alignBottom-property of the infoBox to true (default is false). For further adjustments of the position use the pixelOffset-property of the infoBox

How to change position of Google Maps infoWindow

You can use the pixelOffset property.

var infowindow = new google.maps.InfoWindow({
    pixelOffset: new google.maps.Size(200,0)
});

See https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions

Working code snippet:

function initialize() {

  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(0, 0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(0, 0),
    map: map,
  });

  var infowindow = new google.maps.InfoWindow({
    content: 'Hello world',
    pixelOffset: new google.maps.Size(200, 0)
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });
}

initialize();

#map-canvas {
  height: 180px;
}

<div id="map-canvas"></div>
<script src="//maps.googleapis.com/maps/api/js?key= AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

Google Maps infobox position next to marker not over the marker

It is set at 140px in right by default, so set the values for x and y respectively and the box will appear there everytime.

offset values you can arrange yourself.

try this code..

 var infowindows = []; //make it global
 var popup = new InfoBox({
      // size: new google.maps.Size(420,130),
        content:content_info
       ,pixelOffset: new google.maps.Size(10, -100) //these are the offset values to be adjusted accordingly..
       ,disableAutoPan: false
       ,closeBoxMargin: "5px 5px 2px 2px"
       ,boxStyle: {opacity: 0.95
              }

    });

infowindows.push(popup);
 google.maps.event.addListener(marker, 'mouseover', function() {
        close_popups();
        map.panTo(mycenter1);
        popup.open(map, marker);

        // currentPopup = null;
      });

function close_popups(){
      for(var i = 0; i<infowindows.length; i++){
        infowindows[i].close();
      }
    }

Google maps InfoBox is changing position while zooming

About the hours of frustration, we understand. We've all been there, it goes with the turf.

Try this instead:

infobox.setOptions({pixelOffset: new google.maps.Size(-110, -190)});

Google maps objects typically do not update their appearance when you set properties directly.

Google map infowindow position on right side

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>

How to set InfoBox behind Marker - React Google Maps

Fixed it by updating to the newer @react-google-maps/api. You can find it here: https://react-google-maps-api-docs.netlify.com/

Google Maps - Infobox API - scroll pane vs change position

Could be tricky - infowindows are dynamically sized based on the content in them. What you could do, is in the InfoWindowOptions, set disableAutoPan=true. This will prevent the map panning to display the infowindow. Then I'm guessing you could use jQuery (or any other JS you like) to figure out:

• the size of the infowindow based on the position where it's anchored to on the map,
• is the entire infowindow visible
• if not, move the infowindow's position

Google Maps API v3 - how to get infoBox outside Map div

You don't have to use info box. You can just handle the marker click event and populate any div you want with whatever data you want.

That's what's going on in the example you linked to. On the marker click event, it's centering the map on the marker, and loading a div with the corresponding image.

Google Maps V3 infobox always in center

You can use window.onresize to that :

window.onresize=function() {
   map.setCenter(marker.getPosition());
}

see this working demo -> http://jsfiddle.net/Fae26/ - try resize the frames or resize the entire window.

---

Related Topics