Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Adding link to overlay in Google Maps v3

    Hey guys,
    I really need help with the following problem.
    I have this custom overlay from google maps, that displays that black and white picture on the map.

    I want that when I click it to take me to a certain website. I have tried several methods, but none work, could you guys help me?

    This is the code of the map:
    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Ground Overlays</title>
        <style>
          html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px
          }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script>
    // This example uses a GroundOverlay to place an image on the map
    // showing an antique map of Newark, NJ.
    
    var historicalOverlay;
    
    function initialize() {
    
      var newark = new google.maps.LatLng(40.740, -74.18);
      var imageBounds = new google.maps.LatLngBounds(
          new google.maps.LatLng(40.712216, -74.22655),
          new google.maps.LatLng(40.773941, -74.12544));
    
      var mapOptions = {
        zoom: 13,
        center: newark
      };
    
      var map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);
    
      historicalOverlay = new google.maps.GroundOverlay(
          'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
          imageBounds);
      historicalOverlay.setMap(map);
    }
    
    google.maps.event.addDomListener(window, 'load', initialize);
    
        </script>
      </head>
      <body>
        <div id="map-canvas"></div>
      </body>
    </html>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    did you try adding a click listener?

    Code:
       historicalOverlay = new google.maps.GroundOverlay(
          'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
          imageBounds);
      historicalOverlay.setMap(map);
    
      google.maps.event.addListener(historicalOverlay, 'click', function(e) {
        location.href="https://developers.google.com/maps/documentation/javascript/reference#GroundOverlay";
      });
    Last edited by xelawho; 01-18-2014 at 10:09 PM.

  • Users who have thanked xelawho for this post:

    cristianandrei (01-19-2014)

  • #3
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks a lot. That is exactly what I wanted.


  •  

    Tags for this Thread

    Posting Permissions

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