Disable dragging of a Google Map

I have a Google Map embedded in a page at www.mauivacationrental.com/location.htm  and I would like to disable dragging on touch screen devices.  I've read that can be accomplished by inserting this code:
map.setOptions({draggable: false});
However, I don't know where that code belongs.  I'm not using an API, just the iFrame code supplied by Google Maps when the map was generated.
ddantesAsked:
Who is Participating?
 
GaryConnect With a Mentor Commented:
You cannot use that code as you are not using the API but embedding it.
And I don't believe the embedded iframe has the option as they provide a static map version

I suggest you move to a static image and add your own popover (the Google one won't work)

This is the image code.

<img src="http://maps.googleapis.com/maps/api/staticmap?center=4320 Une Place, Haiku,Hawaii&zoom=16&size=425x350&maptype=roadmap
&markers=color:blue%7Clabel:S%7C20.915927,-156.282931&sensor=false">

There's a few caveats. You will need to load the largest size you would need (going by your current responsive design), put this in a div with overflow hidden and then use snappy css to absolute position it in the center.

Of course it may just be easier to move to using their API.

edit
You could use CSS3 and the set the src to the background-image and use background cover/center

edit 2
The maximum width it accepts is 640px and weighs in at about 30kb
0
 
ddantesAuthor Commented:
Thank you Gary.  I will  try to use their API.
0
 
GaryCommented:
Okey dokey, the API is not too hard to use, just a little bit more initial coding on your side.
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
ddantesAuthor Commented:
If I may ask, belatedly, where in this javascript would I place code to disable dragging?map.js
0
 
GaryCommented:
Anywhere after you have created the object,
map.setOptions({draggable: false, zoomControl: false, scrollwheel: false, disableDoubleClickZoom: true});

Open in new window


I will have to double check this in a while, as your coding is slightly different from how I do it.
0
 
GaryCommented:
Here's a full example based on how I code

<div class="gmap" id="map_canvas"></div>
<script>
jQuery(document).ready(function () {
	initmap("20.915927","-156.282931","Maui Tradewinds","4320 Une Place, Haiku","Hawaii")
	})
	function initmap(lat,lng,hname,add,city) {
		var secheltLoc = new google.maps.LatLng(lat,lng);
		var myMapOptions = {
			 zoom: 14
			,center: secheltLoc
			,mapTypeId: google.maps.MapTypeId.ROADMAP,disableDefaultUI: true,
			draggable: false, zoomControl: false, scrollwheel: false, disableDoubleClickZoom: true
		};
		var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);


	var contentString =hname+"<br>"	+add+"<br>"+city //Style here as you like
  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });

  var marker = new google.maps.Marker({
     position: new google.maps.LatLng(lat,lng),
      map: theMap
  });
// Show the popup on load.
  google.maps.event.addListenerOnce(theMap, 'idle', function() {
   infowindow.open(theMap,marker);
});
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(theMap,marker);
  });
	}
	</script>

Open in new window

0
 
ddantesAuthor Commented:
That's very helpful, Gary.  I'll post again after implementing this.
0
 
ddantesAuthor Commented:
I inserted your code in the body of my page, but no map appears.
0
 
GaryCommented:
Is this at
http://www.mauivacationrental.com/location.htm

because the page isn't loading.
0
 
ddantesAuthor Commented:
0
 
GaryCommented:
Change your Google Maps script to v=3 not v=2 (which is the old version)

<script src="http://maps.google.com/maps?file=api&;
v=3&amp;key=ABQIAAAAPkq8vCoa0UqNiD5cJLz4exTpPFX0Mru8bw6XUaFMzX6JJvfJbxRm-e8_6p2ce1yZhSX-NZ1VU_xFVA" type="text/javascript"></script>
<script src="js/extinfowindow.js" type="text/javascript"></script>
0
 
ddantesAuthor Commented:
I must still be missing something.  Sorry, but please have another look.
0
 
GaryCommented:
Use this

<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false&key=ABQIAAAAPkq8vCoa0UqNiD5cJLz4exTpPFX0Mru8bw6XUaFMzX6JJvfJbxRm-e8_6p2ce1yZhSX-NZ1VU_xFVA"></script>

Open in new window

0
 
GaryCommented:
Forget that one use this

<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>

Open in new window


Your key is coming up invalid.
0
 
ddantesAuthor Commented:
Our postings crossed.  Yes, I get that invalid key message also.  I do have a valid key, and it works on my old site -- www.mauitradewinds.com/location.htm
Image2.jpg
0
 
GaryCommented:
Yes its only for v2, just use the script from my last comment, doesn't need a key for v3
0
 
ddantesAuthor Commented:
Sorry I had to step away.  I don't see a map with the latest code.
0
 
GaryCommented:
It's working but you are missing the height/width from the map_canvas div.
Set that in the css and it should be fine.
0
 
ddantesAuthor Commented:
OK, I assigned a width and height to the map_canvas div, but it appears to be empty.  I set that in line, not in a separate style sheet.  I don't recognize that div being referenced in any style sheet.
0
 
GaryCommented:
You hardcoded the http in maps api script link but omitted the colon

Leave like this and it will load thru http/https depending on your own page
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false">"></script>

Open in new window

0
 
ddantesAuthor Commented:
Got it.  I hard coded that because I couldn't get the page to load from my local disc -- it caused IE11 to hang.  But it works OK on the remote server.

So, now there's a map code which works -- thanks for your patience.   I'll test this on my iPhone to see if the draggable feature is disabled.
0
 
ddantesAuthor Commented:
Definitely disabled.  I'll try to learn my away around the options, and I may post a related question.  This is a big improvement.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.