Skip Navigation

[Resolved] How to make map not draggable

This thread is resolved. Here is a description of the problem and solution.

Problem: We would like to prevent Users from moving the map by adding draggable:false to the map options. Is this possible?

Solution: You can add map options with JavaScript by following the steps in the related documentation. The draggable option is being replaced by gestureHandling, but it is still available for now.

Relevant Documentation:
https://toolset.com/documentation/user-guides/maps/programmatically-change-map-settings/

This support ticket is created 4 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 2 replies, has 2 voices.

Last updated by jasonH-5 4 years, 9 months ago.

Assisted by: Christian Cox.

Author
Posts
#1557747

Is there a way to add:

draggable: false

to the Google Map API?

We do not want people to move the map

Thanks for your help

#1559187

Hi, yes please check out this article for more information about interacting with MapOptions via the Google Maps JavaScript API, including example code:
https://toolset.com/documentation/user-guides/maps/programmatically-change-map-settings/

You mentioned draggable, which is still available but deprecated in favor of the more robust gestureHandling: https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions.draggable

Also I should mention if you just want a picture of a map, Google offers a Static Maps API. This is great if you want to display a thumbnail map in a list of results, where the full interactive map isn’t necessary. Your page will appear to load faster, since fewer assets need to be loaded. It's also subject to a different pricing model, so you may pay less for this service in the long run. Be sure to enable the Static Maps API for your API key – this is a separate API that must be enabled in the Google API Console.

Example static map for a Types custom address field:

<img src="<em><u>hidden link</u></em> field='address-field-slug'][/types]&zoom=13&size=300x150&maptype=roadmap&markers=color:red&key=YOURAPIKEY" />
 

Change address-field-slug to match your address field. If your site isn’t https, change the protocol to http. You can also change the zoom and size parameters to fit your needs, and you must update YOURAPIKEY to use your actual API key. Other customization can be added as well, so you should review the full API documentation here:
hidden link

Let me know if you have questions about that.

#1561451

My issue is resolved now. Thank you!