Multiple Google Map Marker Icons

• atmacmillan

• September 9, 2015 at 10:31 pm

Does any one know if you can use ACF to assign a different icon for each marker in google maps? Currently I have set up the code for the marker like so:
function add_marker( $marker, map ) {

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

var image = ‘<?php echo $image[‘url’]; ?>’;

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

• Jonathan

• September 10, 2015 at 5:12 am

Hi @atmacmillan

Since you’re using PHP in the script I’ll assume you’re running this not in a js file but directly in the template.

You could setup a repeater-field with an image field inside.
Then do something like:

//This goes outside the marker loop
<?php $images_repeater = get_field('repeater_field'); ?>

var i = 0; //This is a JS variable we use as a counter
//This I assume is inside the marker loop

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

var image = '<?php echo $images_repeater[ ?>i<?php]['image_field']['url']; ?>'; //Im not sure wether this even works.. never tried it ;)

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

//end of marker loop
i++;

• atmacmillan

• September 10, 2015 at 9:52 am

Thanks you @jonathan I had the repeater already set up for multiple marker addresses and actually just added an image field to the repeater which assigned the icon. But unfortunately it did not work. the parse serror says there is a syntax error, unexpected ‘?>’, expecting ‘]’

any ideas?

• atmacmillan

• September 10, 2015 at 10:42 am

I accidentally was to eager on the solving of this problem, how do I un-solve the issue?

• Jonathan

• September 10, 2015 at 4:15 pm

Hi @atmacmillan

What do you mean by unsolve?

The way I would do this is use the code found in the documentation here:
http://www.advancedcustomfields.com/resources/google-map/

And to add support for your custom icons you can add a third data parameter to the marker div:

<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>" data-icon="<?php echo $image['url']; ?>"></div>

And in the JS function for the markers:

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

	var icon = $marker.attr('data-icon');
	// create marker
	var marker = new google.maps.Marker({
		position	: latlng,
		map			: map,
		icon		: icon
	});

• atmacmillan

• September 11, 2015 at 7:45 am

Thankyou @jonathan you are a dead set guru! so much thanks!

• Jonathan

• September 12, 2015 at 6:05 am

No worries mate!

Please let us know if you need further help with ACF.
Good luck with your website!

• atmacmillan

• September 14, 2015 at 11:49 am

Hey there @jonathan, I am going to hit you up for a bit more help, all along the same lines with the multiple marker images. I was hoping to have a select field to designate the image for the marker. So instead of having an image field to replace that with the select field and have pre allocated images allocated for the selections. Is this possible?

This is what I have currently:
<?php if( have_rows(‘locations’) ): ?>
<div class=”locations-map”>
<?php while ( have_rows(‘locations’) ) : the_row();

$location = get_sub_field(‘location’);
$image = get_sub_field(‘marker_image’);
?>
<div class=”marker” data-lat=”<?php echo $location[‘lat’]; ?>” data-lng=”<?php echo $location[‘lng’]; ?>” data-icon=”<?php echo $image[‘url’]; ?>”>
<div class=”shop”>
<h4><?php the_sub_field(‘title’); ?></h4>
<p><?php echo $location[‘address’]; ?></p>
<p><i class=”fa fa-mobile”></i>&nbsp“><?php the_sub_field(‘phone’); ?></p>
<p><i class=”fa fa-globe”></i>&nbsp“><?php the_sub_field(‘website’); ?></p>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>

<!– ====================================== –>
<style type=”text/css”>

.locations-map {
width: 100%;
height: 400px;
border: #ccc solid 1px;
margin: 20px 0;
}

</style>
<script src=”https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false”></script&gt;
<script type=”text/javascript”>
(function($) {

function render_map( $el ) {

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

// vars
var args = {
zoom : 7,
center : new google.maps.LatLng(0, 0),
mapTypeId : google.maps.MapTypeId.ROADMAP,
styles: [{“stylers”:[{“hue”:”#dd0d0d”}]},{“featureType”:”road”,”elementType”:”labels”,”stylers”:[{“visibility”:”off”}]},{“featureType”:”road”,”elementType”:”geometry”,”stylers”:[{“lightness”:100},{“visibility”:”simplified”}]}]
};

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

}

function add_marker( $marker, map ) {

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

var icon = $marker.attr(‘data-icon’);

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

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

// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
// create info window
var infowindow = new google.maps.InfoWindow({
content : $marker.html()
});

// show info window when marker is clicked
google.maps.event.addListener(marker, ‘click’, function() {

infowindow.open( map, marker );

});
}

}

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(function(){

$(‘.locations-map’).each(function(){

render_map( $(this) );

});

});

})(jQuery);

</script>

<!– ====================================== –>

Thanks Again

Al

• Jonathan

• September 18, 2015 at 5:07 am

Hey @atmacmillan

Sure but could you please edit your post or repost with the code within code tags?

Thanks!