issue in adding click event in a Geolocation

Question

I am working on HTML5 and javascript. and i am developing an application which finds the user's location using google map and the i am trying to add a click event on the user's location so that when they click they click the message "click here" they must be directed to a new html page. any help or idea would be appreciated.

and here is my code :

          <!DOCTYPE html>
       <html>
        <head>
     <title>Getting Geolocation for Weather Details</title>
       <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
       <meta charset="UTF-8">
         <style type="text/css">
        html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map_canvas {
    height: 100%;
  }

  @media print {
    html, body {
      height: auto;
    }

    #map_canvas {
      height: 650px;
    }
        }
      </style>
       <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
      <script type="text/javascript">
     var map;

      function initialize() {
    var myOptions = {
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
      map = new google.maps.Map(document.getElementById('map_canvas'),
        myOptions);

    // Try HTML5 geolocation
    if(navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = new google.maps.LatLng(position.coords.latitude,
                                         position.coords.longitude);

        var infowindow = new google.maps.InfoWindow({
          map: map,
          position: pos,
          content: 'click here'
        });

        map.setCenter(pos);
      }, function() {
        handleNoGeolocation(true);
      });
    } else {
      // Browser doesn't support Geolocation
      handleNoGeolocation(false);
       }
       }

           function handleNoGeolocation(errorFlag) {
    if (errorFlag) {
      var content = 'Error: The Geolocation service failed.';
    } else {
      var content = 'Error: Your browser doesn\'t support geolocation.';
    }

    var options = {
      map: map,
      position: new google.maps.LatLng(60, 105),
      content: content
    };

    var infowindow = new google.maps.InfoWindow(options);
    map.setCenter(options.position);
      }

      google.maps.event.addDomListener(window, 'load', initialize);
       </script>
    </head>
  <body>
     <div id="map_canvas"></div>
       </body>
  </html>

yes. Thats right. they next page is index.html. So when i click that click here it has to navigate to index.html page. — Boom Boom
– Boom Boom, Commented Sep 12, 2013 at 11:40

Moazzam Khan · Accepted Answer · 2013-09-12 11:40:57Z

1

Does this help?

Replace text with an anchor tag.

use content : '<a href="https://www.google.com">click here<a>' in place of content : 'click here' as in -

var infowindow = new google.maps.InfoWindow({
    map : map,
    position : pos,
    content : '<a href="https://www.google.com">click here<a>'
});

In your case you can put your page link in place of https://www.google.com.

answered Sep 12, 2013 at 11:40

Moazzam Khan

3,1702 gold badges23 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Boom Boom Over a year ago

Cool. Thank you verymuch for the solution Moazzam. But is there any way like we can click like normal clickable events. which we usually do in google maps?

Moazzam Khan Over a year ago

Sorry, I am not much familiar with google maps API, so I cant answer it for now, but you can give <a> some id and add click listener on it.

Collectives™ on Stack Overflow

issue in adding click event in a Geolocation

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related