Results 1 to 8 of 8

Thread: trouble with google map selector

  1. #1
    Join Date
    May 2009
    Location
    Greensboro, GA
    Posts
    163
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default trouble with google map selector

    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>
    Last edited by mcolton; 02-22-2017 at 01:20 PM.

  2. #2
    Join Date
    May 2009
    Location
    Greensboro, GA
    Posts
    163
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Can anybody help please

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    May 2009
    Location
    Greensboro, GA
    Posts
    163
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 02-27-2017 at 08:30 PM. Reason: minor code improvement
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    May 2009
    Location
    Greensboro, GA
    Posts
    163
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

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

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Google events doesn't work with google forms
    By NewCureForAnger in forum Looking for such a script or service
    Replies: 2
    Last Post: 03-22-2017, 05:30 AM
  2. Which CSS selector?
    By Rain Lover in forum CSS
    Replies: 2
    Last Post: 03-29-2014, 02:58 PM
  3. Replies: 0
    Last Post: 04-16-2013, 07:44 AM
  4. google map selector
    By racerxfactor in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 04-16-2013, 07:39 AM
  5. Google Map Selector
    By SillyoldDuffer in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 03-02-2011, 08:08 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •