Solved

Disable dragging of a Google Map

Posted on 2014-03-13
23
5,570 Views
Last Modified: 2014-03-15
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.
0
Comment
Question by:ddantes
  • 12
  • 11
23 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 250 total points
ID: 39928153
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
 

Author Comment

by:ddantes
ID: 39928198
Thank you Gary.  I will  try to use their API.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39928363
Okey dokey, the API is not too hard to use, just a little bit more initial coding on your side.
0
 

Author Comment

by:ddantes
ID: 39928437
If I may ask, belatedly, where in this javascript would I place code to disable dragging?map.js
0
 
LVL 58

Expert Comment

by:Gary
ID: 39929543
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
 
LVL 58

Expert Comment

by:Gary
ID: 39929855
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
 

Author Comment

by:ddantes
ID: 39929898
That's very helpful, Gary.  I'll post again after implementing this.
0
 

Author Comment

by:ddantes
ID: 39930210
I inserted your code in the body of my page, but no map appears.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39930214
Is this at
http://www.mauivacationrental.com/location.htm

because the page isn't loading.
0
 

Author Comment

by:ddantes
ID: 39930272
0
 
LVL 58

Expert Comment

by:Gary
ID: 39930282
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&amp;
v=3&amp;key=ABQIAAAAPkq8vCoa0UqNiD5cJLz4exTpPFX0Mru8bw6XUaFMzX6JJvfJbxRm-e8_6p2ce1yZhSX-NZ1VU_xFVA" type="text/javascript"></script>
<script src="js/extinfowindow.js" type="text/javascript"></script>
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 

Author Comment

by:ddantes
ID: 39930346
I must still be missing something.  Sorry, but please have another look.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39930350
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
 
LVL 58

Expert Comment

by:Gary
ID: 39930359
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
 

Author Comment

by:ddantes
ID: 39930367
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
 
LVL 58

Expert Comment

by:Gary
ID: 39930387
Yes its only for v2, just use the script from my last comment, doesn't need a key for v3
0
 

Author Comment

by:ddantes
ID: 39930522
Sorry I had to step away.  I don't see a map with the latest code.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39930558
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
 

Author Comment

by:ddantes
ID: 39930572
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
 
LVL 58

Expert Comment

by:Gary
ID: 39930577
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
 

Author Comment

by:ddantes
ID: 39930584
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
 

Author Comment

by:ddantes
ID: 39930587
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
 

Author Comment

by:ddantes
ID: 39930994
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

There is a security feature on iOS devices that is nearly impenetrable when it has been activated.  This article will provide some possible solutions as well as necessary steps to take to ensure you do not end up with a locked device.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now