Google Maps: Center Auto-Opening infoWindow

Question

I have an auto-opening infoWindow that I'd like to center on my Google Map.

I don't want to center on the marker itself, but the marker PLUS the infoWindow, as it would do automatically if the box when clicked open rather than opened by default.

Here's my code:

    <script>
    function initMap() {
    var occ = {lat: 45.5280879, lng: -122.6630186};
    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    draggable: false,
    scrollwheel: false,
    center: occ
    });
    var contentString = '<div id="content" style="font-family: Poppins, sans-serif; padding: 1em;">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h4 style="margin-bottom: .125em;">The Oregon Convention Center</h4>'+
    '<p>777 NE Martin Luther King Jr Blvd<br>'+
    'Portland, OR 97232<br>'+
    '<a href="https://www.google.com/maps/dir//Oregon+Convention+Center,+777+NE+Martin+Luther+King+Jr+Blvd,+Portland,+OR+97232,+United+States/@45.5280879,-122.6630186,15z/data=!4m12!1m3!3m2!1s0x0:0x610cf37babf5b9df!2sOregon+Convention+Center!4m7!1m0!1m5!1m1!1s0x5495a0adc5ff1af5:0x610cf37babf5b9df!2m2!1d-122.6630186!2d45.5280879" target="_blank">Get directions</a></p>'+
    '</div>';
    var infowindow = new google.maps.InfoWindow({
    content: contentString,
    pixelOffset: new google.maps.Size(0, 15),
    });

    var marker = new google.maps.Marker({
    position: occ,
    map: map,
    title: 'The Oregon Convention Center',
    });

    infowindow.open(map, marker);


    google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
    });
    }
    </script>

Fiddle: http://jsfiddle.net/kz1hnec0/

How do I do this?

Ivan Jovović Ivan Jovović · Accepted Answer · 2015-08-14T13:09:55

Based on this answer: https://stackoverflow.com/a/10722973/1023562

Create a function that will offset your center by some pixels:

function map_recenter(map,latlng,offsetx,offsety) {
    var point1 = map.getProjection().fromLatLngToPoint(
        (latlng instanceof google.maps.LatLng) ? latlng : map.getCenter()
    );
    var point2 = new google.maps.Point(
        ( (typeof(offsetx) == 'number' ? offsetx : 0) / Math.pow(2, map.getZoom()) ) || 0,
        ( (typeof(offsety) == 'number' ? offsety : 0) / Math.pow(2, map.getZoom()) ) || 0
    );  
    map.setCenter(map.getProjection().fromPointToLatLng(new google.maps.Point(
        point1.x - point2.x,
        point1.y + point2.y
    )));
}

Invoke this function using projection_changed event (because map.getProjection() is not available before this event ocurs):

google.maps.event.addListenerOnce(map,"projection_changed", function() {
    map_recenter(map, occ, 0, -100);
 });

Working fiddle: http://jsfiddle.net/kz1hnec0/4/

NOTE:

I have set Y offset to -100. If you know how high your info window will be (it's 155px in this case), then you can pass this value a bit more precise - I guess that would be something like (infoWindow.height + infoWindow.pixelOffset / 2).

Google Maps: Center Auto-Opening infoWindow

1 Answers