Hello,
I am using ACF to how a map on one of my clients pages, showing the areathat they work. They would like to have the marker hidden as the map isn’t showing a direct place of work and more showing the area in which they cover, is there a way to do this?
Thanks, Harry.
Hello.
You could define your marker as “nothing” in your add_marker-function. That would be something like this:
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,
icon : ''
});
I’m not quite sure if this is the absolutely best way to do it, but it gets the job done.
Hi @harryadf
You don’t have to output a marker at all. It seems very counterproductive adding a marker and then trying to remove it 🙂
So if you’re using the snippets provided in the documentation just remove all references to marker and in the HTML you output remove the marker div inside acf-map div.
Hi Both!
Thanks for your suggestions, I will try them both today and let you know what I found.
I think one of the issues I’m having with it and why I’m a bit doubtful as to weather this will work or not is I have another map that does need a marker.
I guess a way to get this working is use separate code for a map with a marker and one without? This just feels a little ‘hacky’ if you know what I mean?
Thanks, Harry.
Hi Harry,
Okay so if you have another map with markers you should keep all the JS and CSS code found in the documentation example.
To not display any marker for this specific map you would then just need to not output the div for the marker inside the acf-map div element. Really simple and I’m 100% sure it’s the right solution 🙂
Amazing!
So do you mean instead of having;
<?php
$location = get_field('location');
if( !empty($location) ):
?>
<div class="acf-map">
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
</div>
<?php endif; ?>
I can just do this;
<?php
$location = get_field('location');
if( !empty($location) ):
?>
<div class="acf-map">
<!-- <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div> -->
</div>
<?php endif; ?>
Almost.. I noticed ACF does not do anything for placing an empty map at a specific location so you need to do a bit more tweaking.
This should be your HTML/PHP
<?php
$location = get_field('location');
if( !empty($location) ):
?>
<div class="acf-map" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
</div>
<?php endif; ?>
And in the render_map javascript function change the var args part to
var map_lat = $el.data('lat');
var map_lng = $el.data('lng');
// vars
var args = {
zoom : 16,
center : new google.maps.LatLng(map_lat, map_lng),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
You might also want to change the zoom parameter from 16 to something more fitting.
