Michael Roach Michael Roach - 3 months ago 46
Javascript Question

Google Maps InfoWindow Open When Only One Marker is Present

I am taking an Advanced Custom Fields (ACF) Google Map Address and creating a Google Map with multiple markers and a singular InfoWindow. The contents of that InfoWindow are then swapped depending on which marker is active.

A PHP

$location
array is setup through ACF, and the javascript loops through and runs to the Google Maps API.

I want to open the InfoWindow by default when there is only one marker.

I have figured out how to determine if there is only one marker at the end of the
new_map
function…

if($markers.length == 1) {
console.log('yes');
}


But I am unsure of what to call/how to access the Google Maps API once the map has already been rendered.

I think my issue is scope related, as I've tried every combination of
google.maps.event.trigger()
and
google.maps.Map.event.trigger(marker, 'click');
style functions I can think of.

Array
(
[address] => 123 Hamaker Rd, Manheim, PA, United States
[lat] => 40.1789636
[lng] => -76.3852963
)



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

/*
* new_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
*/

/*
* Modified from ACF Documentation, here are some links
* http://support.advancedcustomfields.com/forums/topic/multiple-post-points-on-google-maps/
* http://fancysquares.com/google-maps-infowindow-advanced-custom-fields-acf/
*/

function new_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,
scrollwheel : false,
mapTypeControl: false,
streetViewControl: false,
};

// create map
var map = new google.maps.Map( $el[0], args);

// add a markers reference
map.markers = [];

// add markers
$markers.each(function(){
add_marker( $(this), map );
});

// center map
center_map( map );

/* Conditional works to find if it only has one marker, but I can't figure out what to trigger */
//console.log($markers);

if($markers.length == 1) {
console.log('yes');
}

}

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,
open : true
});

// 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( 10 );
}
else {
// fit to bounds
map.fitBounds( bounds );
}
}


/* 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
*/
// global var
var map = null;

$(document).ready(function(){
$('.acf-map').each(function(){
// create map
map = new_map( $(this) );
});

});

})(jQuery);
</script>

Answer

In the new_map function you can check the length of the array before adding the markers. if the length is 1 then pass a parameter indicating that showInfoWindow is true, else false.

var showInfoWindow = false;
if($markers.length == 1) {
        showInfoWindow = true
     }

 // add markers
     $markers.each(function(){
        add_marker( $(this), map , showInfoWindow);
     });

And then modify the add_marker code as follows

function add_marker( $marker, map, showInfoWindow ) {

 // 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,
    open     : true
 });

 // 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();
       }
    }); 

  if(showInfoWindow)
  {
       infowindow.setContent($marker.html());
       infowindow.open(map, marker);
  }

 }
}
Comments