Google Map Default InfoWindow on Load

• jomurgel

• January 13, 2015 at 7:50 am

Hi community!

One issue I cannot seem to tackle, and need any help offered. I’m trying to set the map to show the first infoWindow on load rather than just having a map with x markers that require clicking. (Attached photo for reference if that’s vague.)

Any ideas? My code is below for reference (though it’s pretty standard).

Thanks!

<script type="text/javascript">
(function($) {

/*
*  render_map
*
*  This function will render a Google Map onto the selected jQuery element
*
*  @type	function
*  @date	8/11/2013
*  @since	4.3.0
*
*  @param	$el (jQuery element)
*  @return	n/a
*/

function render_map( $el ) {

// var
var $markers = $el.find('.marker');

// vars
var args = {
zoom		: 16,
center		: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [{"featureType":"landscape","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"stylers":[{"hue":"#00aaff"},{"saturation":-100},{"gamma":2.15},{"lightness":12}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"visibility":"on"},{"lightness":24}]},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":57}]}]
};
					
// create map	        	
var map = new google.maps.Map( $el[0], args);

// this is our gem
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center); 
});
					
// add a markers reference
map.markers = [];

// add markers
$markers.each(function(){

add_marker( $(this), map );

});

// center map
center_map( map );

}

// create info window outside of each - then tell that singular infowindow to swap content based on click
var infowindow = new google.maps.InfoWindow({
content		: '' 
});

/*
*  add_marker
*
*  This function will add a marker to the selected Google Map
*
*  @type	function
*  @date	8/11/2013
*  @since	4.3.0
*
*  @param	$marker (jQuery element)
*  @param	map (Google Map object)
*  @return	n/a
*/

function add_marker( $marker, map ) {

// var
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

// create marker
var marker = new google.maps.Marker({
position	: latlng,
map			: map
});

// add to array
map.markers.push( marker );

// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
	// show info window when marker is clicked & close other markers
	google.maps.event.addListener(marker, 'click', function() {
		//swap content of that singular infowindow
				infowindow.setContent($marker.html());
		        infowindow.open(map, marker);
	});

	// close info window when map is clicked
	     google.maps.event.addListener(map, 'click', function(event) {
	        if (infowindow) {
	            infowindow.close(); }
	}); 
}
}

/*
*  center_map
*
*  This function will center the map, showing all markers attached to this map
*
*  @type	function
*  @date	8/11/2013
*  @since	4.3.0
*
*  @param	map (Google Map object)
*  @return	n/a
*/

function center_map( map ) {

// vars
var bounds = new google.maps.LatLngBounds();

// loop through all markers and create bounds
$.each( map.markers, function( i, marker ){

var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

bounds.extend( latlng );

});
					
// only 1 marker?
if( map.markers.length == 1 )
{
// set center of map
map.setCenter( bounds.getCenter() );
map.setZoom( 16 );
}
else
{
// fit to bounds
map.fitBounds( bounds );
}

}

/*
*  document ready
*
*  This function will render each map when the document is ready (page has loaded)
*
*  @type	function
*  @date	8/11/2013
*  @since	5.0.0
*
*  @param	n/a
*  @return	n/a
*/

$(document).ready(function(){

$('.acf-map').each(function(){

render_map( $(this) );

});

});

})(jQuery);
</script>

GjELN.png.png

• James

• April 15, 2016 at 7:22 pm

Hi @jomurgel,

Thanks for the post.

I would recommend you save your markers to an array and then trigger a click event on of one of them using google.maps.event.trigger(). An example of this would look like so:

function initialize() {
...

    point = new google.maps.LatLng(55.660491,12.587087); createMarker(point, "<div class='infoWindow'>3</div>");

    google.maps.event.trigger(markers[1], 'click');
}

function createMarker(latlng, html, name, number) {
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: name,
        //icon: iconBase + number + '.png'
        icon: iconBase
    });

    // added to collect markers
    markers.push(marker);

    google.maps.event.addListener(marker, 'click', function () {
        console.log('click event listener');
        infowindow.setContent(html);
        infowindow.open(map, marker);
        //map.setCenter(marker.getPosition());

        // corrected due to error
        map.setCenter(new google.maps.LatLng(55.678939, 12.568359)); 
    });
}