Support

Account

Register Login

Home › Forums › Feature Requests › Specify zoom in google map field

Solved

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.

  • yes, I still support this, and haven’t forgotten about it

  • 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.

Viewing 23 posts - 1 through 23 (of 23 total)

The topic ‘Specify zoom in google map field’ is closed to new replies.