Home › Forums › Feature Requests › Specify zoom in google map field
Currently you can only specify a pair of default coordinates, and then fill a new set of coordinates in the edit post interfaze.
I really miss that the map remembers the last zoom level used when saving the post, to be loaded on the next refresh.
The ability to force a default zoom level when refreshing the map would be Fine too.
Right now the zoom level is almost always too high, and the context it’d be nice to show dissapears.
Hi @andamira
Thanks for teh feedback.
I’l ad this to my list of to-dos and add in a zoom level in the future.
Thanks
E
Hi @andamira
Thanks again for the feature request. I have added in a new setting for initial zoom on the google maps field.
You can find the code on github, or wait for the next version.
Thanks
E
For a project i need to save the zoom of a google map field.
So i do this :
In core/fields/google-map.php
I added in create_field :
$field['value'] = wp_parse_args($field['value'], array(
'address' => '',
'lat' => '',
'lng' => '',
'zoom' => ''
));
and
$keys = array(
'data-id' => 'id',
'data-lat' => 'center_lat',
'data-lng' => 'center_lng',
'data-zoom' => 'zoom'
);
And in js/input.js
// value exists?
var lat = this.$el.find('.input-lat').val(),
lng = this.$el.find('.input-lng').val(),
zoom = parseInt(this.$el.find('.input-zoom').val());
if( zoom )
{
this.map.setZoom(zoom);
}
and
google.maps.event.addListener( this.map, 'zoom_changed', function( e ) {
// reference
var $el = this.$el;
var zoom = this.getZoom();
// update input
$el.find('.input-zoom').val( zoom ).trigger('change');
});
And it works.
Hope this help.
Hi @tlexcellent
Yes, the zoom setting for google map field has been added in the latest version of ACF
Thanks
E
Maybe I’m wrong but I’ve the latest version of ACF and you can set a initial zoom to a field, but when you fill your google map field, coordinates are saved but not the zoom.
The code above allows zoom to be saved.
To save zoom even when not modified, I made this little change :
In core/fields/google-map.php
I added in create_field :
$field['value'] = wp_parse_args($field['value'], array(
'address' => '',
'lat' => '',
'lng' => '',
'zoom' => $field['zoom']
));
That’s handy. What do you think elliot? Could you add it to ACF?
Hi @tlexcellent
Thanks for clarifying, I didn’t realize this would save the zoom level.
Nice work!
On one hand, this is a great idea and make it easy for a client to visually set the zoom for their businesses location map,
but on the other hand, I can see a lot of clients scrolling down the page and accidentally zooming out their maps! This would then save the zoom level which could lead to some angry emails to their developers…
Perhaps we need a button which will update the zoom level? I’ll have a think about it, but for now please use the code above.
Thanks
E
Or you can prevent accidental change of the zoom when scrolling by disable this feature ; just add in the map options :
scrollwheel: false
Hi @tlexcellent
Thanks for the code, however, the scroll zoom feature is a regularly used one. We must be mindful not to frustrate any users when adding in new functionality.
Leave it with me for now.
Thanks
E
@tlexcellent, thanks for the snippet, works great.
I also prefer to pull the zoom value from the map array rather than adding an extra field…
I support this. We need to be able to save the zoom level too, not only [address],[lat],[lng] because there are many cases when the hardcoded zoom level looks bad with the map.
Another thing together with this could also be saving map coordinates separately from the marker coordinates. That is also same as previous when I have had cases when the map is small and centered marker, it doesn’t show some significant places nearby or main street names. But if those values would be saved separately you would have the ability to zoom the map so those main nearby places can be seen and put the marker at other place than center.
Where would I add the code to disable scroll wheel zoom?
scrollwheel: false
My client hates it when he’s trying to scroll down the page & gets caught over the map zooming.
that goes in input.js file where the google map options are, find
// vars
var args = {
zoom : parseInt(this.o.zoom),
center : new google.maps.LatLng(this.o.lat, this.o.lng),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
and add it there like this:
// vars
var args = {
zoom : parseInt(this.o.zoom),
center : new google.maps.LatLng(this.o.lat, this.o.lng),
mapTypeId : google.maps.MapTypeId.ROADMAP,
scrollwheel : false
};
Would love to see this as well – especially that it saves the zoom level of the map in the back-end after zooming in on the map there. I think this is a very basic feature, would be great if this can be enabled in the options when creating a map field.
Hey guys,
the zooming level can be saved in a new plugin, which we recently released ACF Google Map Extended.
It extends ACF Google Map field functionality with some useful features and backward compatible with the data format of the original field.
Best wishes,
CodeFish team
I agree too that this should be a native functionality. Zoom level is an important piece of information for any map. Sometimes content editors get confused because they expect to see at the frontend the same zoom level that they chose at the backend.
Personally, I would add an extra option “capture zoom” at the map field, disabled by default. If the website’s admin chooses to enable it, it would warn him/her that this would disable the “scroll to zoom” functionality.
In fact, if it were my decision, I would prefer the “scroll to zoom” functionality disabled by default anyway, because of the accidental scrolling. Even if it currently doesn’t affect the output, the end-user doesn’t know it and sometimes tries to bring back the zoom level and position that he/she accidentally lost.
Anyone know how to add tlexcellent’s code to functions.php or something, so that it doesn’t get overwritten with updates?
Was this issue ever resolved natively? tlexcellent’s code looks as though it should work but core/fields/google-map.php seems to have changed so it’s not clear how to implement his/her suggestion
I realise that this is an old thread, but I have a few suggestions for this field type that would make it more powerful:
– Return the zoom level.
– Set the map lat/lng by clicking a point on the map (like this).
– Save and return the map type (map, satellite).
I’d like the returned object to look something like this:
array
'address' => string 'Marco Island, FL, United States'
'lat' => string '25.9397412'
'lng' => string '-81.7075355'
'zoom' => string '12'
'type' => string 'map'
I agree with giorgos.
Adding a ‘capture zoom’ extra option will give us the ability to choose if capture or not zoom during post editing.
I don’t think this will add frustration to any user, as we can choose to enable or not this option.
Hoping @elliot will reconsider this option for zoom level.
Thanks in advance.
With acf javascript hooks, it’s now easy to save zoom.
All you have to do is to put in your admin JS :
;(function($) {
if ( typeof acf != 'undefined' ) {
// Save Google Map zoom
acf.add_action( 'google_map_init', function( map, marker, $field ) {
// Create input to save zoom
if ( $field.find( '.acf-hidden .input-zoom' ).length === 0 ) {
$field.find( '.acf-hidden' ).append( '<input name="acf['+$field.data('key')+'][zoom]" value="'+$field.find('[data-zoom]').data('zoom')+'" class="input-zoom" type="hidden">' );
}
// Listen for zoom change
google.maps.event.addListener( map, 'zoom_changed', function( e ) {
this.$el.find('.input-zoom').val( this.getZoom() ).trigger('change');
});
} );
}
})(jQuery);
No need to code extra PHP.
I’m sure you can also easily save map type.
The topic ‘Specify zoom in google map field’ 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.