Home › Forums › General Issues › Multiple Google Map Marker Icons
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
});
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++;
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?
I accidentally was to eager on the solving of this problem, how do I un-solve the issue?
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
});
Thankyou @jonathan you are a dead set guru! so much thanks!
No worries mate!
Please let us know if you need further help with ACF.
Good luck with your website!
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> “><?php the_sub_field(‘phone’); ?></p>
<p><i class=”fa fa-globe”></i> “><?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>
<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
Hey @atmacmillan
Sure but could you please edit your post or repost with the code within code tags?
Thanks!
The topic ‘Multiple Google Map Marker Icons’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.