4

What I want to acchieve (and couldn't find anything so far) is that the infoWindow is not attached to the marker. I'd like to place it on a static position in my viewport and just exchange the content based on what marker is clicked.

Q: How can I place (and not just offset) a google maps marker infowindow on a fixed location.

Kara
  • 6,115
  • 16
  • 50
  • 57
kaiser
  • 21,817
  • 17
  • 90
  • 110

1 Answers1

6

Answering my own Q - in case someone needs this:

// Add somewhere before creating your map to hide the info window as long as it got no content:
<script type="text/javascript">
jQuery( '#info' ).hide();
</script>

<script type="text/javascript">
function createMarker( lat, lng, whatever ) {
    // map_object_name = the name of your map when you init()
    html = "<strong>" + whatever + "</strong>";

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

    // This snippet adds the content on the fly (when you click the marker)
    google.maps.event.addListener( marker, 'click', function() {
        // This pans the viewport/centers the marker in your viewport
        map_object_name.panTo( new google.maps.LatLng( lat, lng ) );

        // This shows the html-element with the id "info" and adds the html content
        jQuery( '#info' ).show();
        // This clears the content before you add new one
        jQuery( '#info' ).empty();
        jQuery( '#info' ).append( html );

        // Commented out - just as reference
        // infoWindow.setContent( html ); // the original infoWindow as you know it from Google Maps
        // infoWindow.open( map_object_name, marker ); // the same, just the callback
    } );
}
</script>

The "placing"/positioning of the #info element can than be done with normal html & css.

kaiser
  • 21,817
  • 17
  • 90
  • 110
  • Question. Is your custom infowindow on the map or off the map? Thanks! – Seano666 Oct 22 '13 at 18:40
  • @Seano666 The question is 2 1/2 years old, but from looking at the code, I'd say the `#info` DOM element is outside the map, but the commented out `infoWindow` should be on the map - you'd still have to create it. Hm. You could just set the `#map` container to `position: relative; z-index: 1;` and the `#info` element to `position: absolute; top: XYpx; left/right: XYpx; z-index: 10;` to get it into a static position above the map. – kaiser Oct 22 '13 at 18:47