trouble with google map selector

**mcolton** · 02-16-2017, 06:15 PM

I'm trying to use http://www.dynamicdrive.com/dynamici...apselector.htm The code works with all the test locations but when I add my own location, it doesn't work.
The 3 test locations all begin maps.google.com. My location begins with google.com/maps. Maybe that is the difference. If I go to maps.google.com, I end up at google.com/maps. My location links don't seem to work.
Thanks for any help

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>Directions to Tennis Courts</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" type="text/css" href="googlemapselector.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
		</script>
    <script src="googlemapselector.js">
/***********************************************
* Google Map Selector- (c) Dynamic Drive (www.dynamicdrive.com)
* Please keep this notice intact
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
   </script>
   
  </head>
  <body>

<div id="mapcontainer">
<div id="addrcolumn">
<ul class="location">

	<li><a href="https://www.google.com/maps/place/1020+Lake+Club+Dr,+Greensboro,+GA+30642/@33.447045,-83.206179,16z/data=!4m5!3m4!1s0x88f6f26505fcbb81:0x374f1c7e6dd9fcfb!8m2!3d33.444884!4d-83.199098">Reynolds Lake Oconee Tennis Courts</a><br />
	</li>

	<li class="selected"><a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=CN+Tower,+Toronto,+Ontario,+Canada&sll=48.858842,2.294362&sspn=0.009402,0.027874&ie=UTF8&hq=CN+tower&hnear=CN+Tower,+Toronto,+Toronto+Division,+Ontario,+Canada&ll=43.642364,-79.38695&spn=0.01073,0.027874&z=16&iwloc=A">CN Tower</a><br />
	</li>

	<li><a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Big+Ben,+Bridge+Street,+London,+United+Kingdom&sll=27.173491,78.042068&sspn=0.025427,0.055747&ie=UTF8&hq=Big+Ben&hnear=Big+Ben,+Bridge+St,+Westminster,+London+SW1A+2,+United+Kingdom&ll=51.507888,-0.131664&spn=0.017789,0.055747&z=15&iwloc=A">Big Ben, London</a><br />
	</li>

	<li><a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=The+Leaning+Tower+of+Pisa&sll=40.771117,-73.974166&sspn=0.021646,0.055747&ie=UTF8&hq=&hnear=Leaning+Tower+of+Pisa,+Campo+dei+Miracoli+o+Piazza+del+Duomo,+Piazza+dei+Miracoli,+56100+Pisa,+Toscana,+Italy&ll=43.722669,10.3968&spn=0.010716,0.027874&z=16">The Leaning Tower of Pisa</a><br />
	</li>
</ul>
</div>

<div id="mapcolumn">
<iframe name="mapiframe1" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com?output=embed"></iframe>
<br />+ <a href="http://maps.google.com" class="largermap"">View Larger Map</a>
</div>

</div>

  </body>
</html>

**mcolton** · 02-26-2017, 12:52 PM

Can anybody help please

**jscheuer1** · 02-27-2017, 04:21 PM

This script was written in 2011, apparently Google Maps has changed the syntax for their links since that time. You may have to figure out how to construct the old style link from the new one you get. But before we try that headache let's try changing what the script looks for. Using a text only editor like notepad, in the script find this line (line 30 about):

Code:

var $address=$li.find('a[href^="http://maps.google.com"]') //find Google map links within LI

As long as the only a tags in the class="location" list are for Google Maps, this is way to selective and will ignore the modern syntax, try changing that to:

Code:

var $address=$li.find('a') //find Google map links within LI

Save and use that version of the script.

The browser cache may need to be cleared and/or the page refreshed to see changes.

Let me know what happens.

**mcolton** · 02-27-2017, 04:48 PM

At least my location was in the correct box but I got an error message:
"This content cannot be displayed in a frame To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame."

Maybe this code is too old. Is there some other newer script that does something similar.
It's not a big deal if there is not.
Thanks for your help

**jscheuer1** · 02-27-2017, 05:11 PM

The next suggestion I would have is when you get the link from Google Maps, instead of just getting the share link, get the embed code (click on embed map), then take the src attribute of the iframe they give you and use that as the link address on your page (keep using the updated script you made in your editor). If that works - great, if not, I have another idea, and there's always the option of trying to convert to the old style url.

**jscheuer1** · 02-27-2017, 08:00 PM

OK, I was busy but later had time to try that myself, it didn't really work. Here's a working demo. It will work with either the old links or the new, but if using the new style links you must provide both the href and the data-larger attribute* as shown:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="googlemapselector.css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
jQuery(function($){
	var $lis = $('.location li'), $largermap = $('.largermap'), $mapframe = $('iframe[name="mapiframe1"]');
	$('.location a[href*="maps"]').click(function(e){
		$lis.removeClass('selected');
		$mapframe.attr('src', this.href + '&output=embed');
		$largermap.attr('href', /\/embed/.test(this.href)? $(this).data('larger') || 'http://maps.google.com' : this.href);
		$(this).parent('li').addClass('selected');
		e.preventDefault();
	}).each(function(i, a){
		if($(a).parent('li').hasClass('selected')){
			return $(a).trigger('click');
		}
	});
});
</script>
</head>
<body>
<div id="mapcontainer">
<div id="addrcolumn">
<ul class="location">

	<li class="selected"><a href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6658.173603480328!2d-83.206179!3d33.447045!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f6f26505fcbb81%3A0x374f1c7e6dd9fcfb!2s1020+Lake+Club+Dr%2C+Greensboro%2C+GA+30642!5e0!3m2!1sen!2sus!4v1488224891263" data-larger="https://goo.gl/maps/YRn5Cf83xg22">Reynolds Lake Oconee Tennis Courts</a><br />
	</li>

	<li><a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=CN+Tower,+Toronto,+Ontario,+Canada&sll=48.858842,2.294362&sspn=0.009402,0.027874&ie=UTF8&hq=CN+tower&hnear=CN+Tower,+Toronto,+Toronto+Division,+Ontario,+Canada&ll=43.642364,-79.38695&spn=0.01073,0.027874&z=16&iwloc=A">CN Tower</a><br />
	</li>

	<li><a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Big+Ben,+Bridge+Street,+London,+United+Kingdom&sll=27.173491,78.042068&sspn=0.025427,0.055747&ie=UTF8&hq=Big+Ben&hnear=Big+Ben,+Bridge+St,+Westminster,+London+SW1A+2,+United+Kingdom&ll=51.507888,-0.131664&spn=0.017789,0.055747&z=15&iwloc=A">Big Ben, London</a><br />
	</li>

	<li><a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=The+Leaning+Tower+of+Pisa&sll=40.771117,-73.974166&sspn=0.021646,0.055747&ie=UTF8&hq=&hnear=Leaning+Tower+of+Pisa,+Campo+dei+Miracoli+o+Piazza+del+Duomo,+Piazza+dei+Miracoli,+56100+Pisa,+Toscana,+Italy&ll=43.722669,10.3968&spn=0.010716,0.027874&z=16">The Leaning Tower of Pisa</a><br />
	</li>
</ul>
</div>

<div id="mapcolumn">
<iframe name="mapiframe1" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com?output=embed"></iframe>
<br />+ <a href="http://maps.google.com" class="largermap"">View Larger Map</a>
</div>

</div>
</body>
</html>

NOTES: It still uses the googlemapselector.css but not the googlemapselector.js - do not include that js file. *if using the current link style of Google Maps, you must give the link the href attribute that is the src attribute of the "embed map" iframe and give it a data-larger attribute of the "share link" link. For that you can use the "short url". The on page script may be made external.

Any questions or problems, just let me know.

**mcolton** · 02-27-2017, 08:26 PM

I guess that's why they pay you the big bucks. Worked like a charm.
Thanks a lot

**jscheuer1** · 03-01-2017, 08:02 PM

I just discovered a much easier way to deal with this, and that's after not only the unofficial update above, but further work on it, enough to make a new version. But anyways, all you really have to do to use the old script is to go to the page on Google Maps you want to use, click share, choose the 'embed map', it will then give you an iframe embed to use, but ignore that, it will also show you what the iframe will look like. On that iframe there's a link "view larger map" copy that address (right click and choose 'copy link address' or similar). it will be something like:

https://maps.google.com/maps?ll=51.178882,-1.826215&z=16&t=h&hl=en-US&gl=US&mapclient=embed&cid=10921634690483081949

To make it work with the old script, it must be changed to non-secure. That is the beginning https:// has to be http:// - once you do that, it will work. If you want to, you can also remove the &mapclient=embed part, but that appears to make no difference one way or the other.

I'm a little concerned Google Maps will change the format of this link in the future to follow the new syntax they use elsewhere. But for now, it's a quick fix at least.

Thread: trouble with google map selector

Thread Tools

Search Thread

trouble with google map selector

Similar Threads

Google events doesn't work with google forms

Which CSS selector?

Google Map Selector only works with http:// map URL (not a https:// map URL)

google map selector

Google Map Selector

Bookmarks

Bookmarks

Posting Permissions