Right now I'm working on the "Locations" page for a client's website that displays the names of their four locations as links. Below the list of links is the Google Map canvas where a marker and infoWindow are added for each location. On load, the map defaults to the position of the first location's marker, and it is supposed to open that marker's infoWindow. Clicking on a location name should pan the map to the corresponding marker and open the infoWindow.
I'm using the following Google Maps example pretty much exactly - http://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/ I have commented out the map.fitBounds(bounds); line and the entire boundsListener below that. In place of the listener, I added map.panTo() to go to the location of the first marker and added zoom:14 to the mapOptions. Here's my code in its entirety:
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
// Define some styles for the colors/look.
// Generate styles here: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
var styles = [ { "featureType": "landscape.man_made", "elementType": "geometry", "stylers": [ { "color": "#abce80" } ] },{ "featureType": "landscape.natural", "elementType": "geometry", "stylers": [ { "color": "#749f71" } ] },{ "featureType": "road", "elementType": "geometry", "stylers": [ { "color": "#99c26e" }, { "weight": 0.6 } ] },{ "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "color": "#eaf5a1" }, { "weight": 1.5 } ] },{ "featureType": "road", "elementType": "labels.text.fill", "stylers": [ { "color": "#5b5b3e" } ] },{ "featureType": "road", "elementType": "labels.text.stroke", "stylers": [ { "color": "#a9d07f" } ] },{ "featureType": "poi", "elementType": "labels.text.stroke", "stylers": [ { "color": "#f5ffa8" } ] },{ "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#aee3e0" } ] },{ "featureType": "poi", "elementType": "geometry", "stylers": [ { "color": "#806e4e" }, { "lightness": 27 } ] },{ } ];
var mapOptions = {
mapTypeId: 'roadmap',
styles: styles,
zoom:14
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// Multiple Markers
var markers = [
<?php if( get_field('locations') ): ?>
<?php while( has_sub_field('locations') ): $map_info = get_sub_field('map_location'); ?>
['<?php echo $map_info['address'] ?>',<?php echo $map_info['lat'] ?>,<?php echo $map_info['lng'] ?>],
<?php endwhile; ?>
<?php endif; ?>
];
mapCenter = new google.maps.LatLng(markers[0][1],markers[0][2]);
//console.log(mapCenter);
// Info Window Content
var infoWindowContent = [
<?php if( get_field('locations') ): ?>
<?php while( has_sub_field('locations') ): ?>
['<div class="google-map-tooltip">' +
'<strong><?php echo get_sub_field('pin_heading'); ?></strong>' +
'<p><?php echo str_replace('<br />','<br />\\',get_sub_field('address')); ?></p>' +
'</div>'],
<?php endwhile; ?>
<?php endif; ?>
];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0],
icon: '<?php echo IMAGES; ?>/icon-map-marker.png',
});
if( i==0 ){ first_marker = marker; }
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
//map.fitBounds(bounds);
}
//Move map to first tab's location
map.panTo(mapCenter);
console.log(first_marker);
infoWindow.open(map,first_marker);
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
/*var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});*/
}//END initialize()
google.maps.event.addDomListener(window, 'load', initialize);
The code works in that the markers are added and the map starts on the correct marker. If you click on the markers, the correct infoWindows are displayed. However, what I would like to happen is that not only does the map start on the first markers position, but also that markers infoWindow needs to be opened. The problem as you'll notice in that example code, is that the infoWindow contents is never set until infoWindow.setContent() is called in the markers' click listener. In other words, no infoWindows actually have any contents until they are clicked. So when I try to use infoWindow.open() on the first marker when the map is first displayed, it technically opens the infoWindow, but you only see the tooltip point without the rest of the tooltip bubble since, well, the content hasn't been added via click event yet.
I managed to determine the first marker by adding this line into the for loop, after marker is declared as a new Marker object:
if( i==0 ){ first_marker = marker; }
So that's how I know where to use panTo() the map after the markers are added, but I cannot figure out how to use setContent() to add an infoBox to this marker, if that's even the problem I need to solve. Can anyone help me get the content set for the infoBox on the first marker and then open the infoBox as the 'opening state' of the map?
