Opening a new window (google maps) using javascript, remove previous event handler

Question

I'm trying to use geolocation. I'm using HTML and javascript to do it. What I wanted to do is after getting the user's location it will open a new tab that will go to google maps showing a direction. The start point is the user's location and the end point is already given. I used saddr and daddr in the google maps URL. I'm using Chrome browser to test and I already allowed to get my location.

Here is my code

For HTML

 <span class="glyphicon glyphicon-road" id="getdir1" onclick="getLocation()" style="font-size:15px;"> Get Direction1</span>

 <span class="glyphicon glyphicon-road" id="getdir2" onclick="getLocation()" style="font-size:15px;"> Get Direction2</span>

 <span class="glyphicon glyphicon-road" id="getdir3" onclick="getLocation()" style="font-size:15px;"> Get Direction3</span>

<p id="geo-error"></p>

Here is my javascript LocationProvided is the address of my end point. I manually coded it.

<script>
    var x = document.getElementById("geo-error");

    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition, showError);
        } else {
            x.innerHTML = "Geolocation is not supported by this browser.";
        }
    }

    function showPosition(position) {
        var latlon = position.coords.latitude + "," + position.coords.longitude;

        $("#getdir1").click() = function(){ 
            window.open('http://maps.google.com/maps?saddr='+latlon+"&daddr=LocationProvided1");
        }

        $("#getdir2").click(function(){
            window.open('http://maps.google.com/maps?saddr='+latlon+"&daddr=LocationProvided2");
        });

        $("#getdir3").click(function(){
            window.open('http://maps.google.com/maps?saddr='+latlon+"&daddr=LocationProvided3");
        });

    }

    function showError(error) {
        switch(error.code) {
            case error.PERMISSION_DENIED:
                x.innerHTML = "User denied the request for Geolocation."
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML = "Location information is unavailable."
                break;
            case error.TIMEOUT:
                x.innerHTML = "The request to get user location timed out."
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML = "An unknown error occurred."
                break;
        }
    }

</script>

My problem is when I click it for the first time it will open one window and when I click it again it will open two window that displays the location. I'm confuse why it opens two windows at the same time when I click it on the second time?

because the click function adds an handler every time the showPosition function is called — Alessio, Jul 11 '16 at 08:45

Christophe Roussy · Accepted Answer · 2017-12-11T10:08:35.497

3

You can use Jquery off to cancel previous handlers.

http://api.jquery.com/off/

The .off() method removes event handlers that were attached with .on().

I often use it to avoid problems with stacked handlers due to multiple function calls attaching the same handler again and again.

Example:

$(myElem).off("click").on("click", function (evt) {...});

Be careful not to remove existing handlers of other plugin of myElem

edited Dec 11 '17 at 10:08

answered Jul 11 '16 at 08:48

Christophe Roussy

16,299
4
85
85

1

`$("#getdir1").click() = function(){ $("#getdir1").off("click"); window.open('http://maps.google.com/maps?saddr='+latlon+"&daddr=LocationProvided1"); }` do i need to put every id that has click function? – natsumiyu Jul 11 '16 at 08:53
do `...off("click").click(function ...` to cancel previous ones before adding back – Christophe Roussy Jul 11 '16 at 09:04
i tried `$("body").off("click", "#getdir1", showPosition);` but it still opens multiple windows – natsumiyu Jul 11 '16 at 09:16
Like this `$("body").off("click").click(showPosition);` ? – natsumiyu Jul 11 '16 at 09:21
@mori See documentation, it is something like you wrote (unbind all click handlers, bind new one), see http://stackoverflow.com/questions/10979865/using-jquery-off-on-or-just-on – Christophe Roussy Jul 11 '16 at 09:49

score 1 · Answer 2 · answered Jul 11 '16 at 11:44

The problem is you bind click event by both onclick and $('element').click()

I have modify your code like to to simplify the business by passing element to a function, you don't even need jQuery as well. Please check and let me know

var x = document.getElementById("geo-error");

function getLocation(address) {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) { //call back success
      var latlon = position.coords.latitude + "," + position.coords.longitude;
      window.open('http://maps.google.com/maps?saddr=' + latlon + '&daddr=' + address)
    }, function(error) { //call back error
      switch (error.code) {
        case error.PERMISSION_DENIED:
          x.innerHTML = "User denied the request for Geolocation."
          break;
        case error.POSITION_UNAVAILABLE:
          x.innerHTML = "Location information is unavailable."
          break;
        case error.TIMEOUT:
          x.innerHTML = "The request to get user location timed out."
          break;
        case error.UNKNOWN_ERROR:
          x.innerHTML = "An unknown error occurred."
          break;
      }
    });
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

 <span class="glyphicon glyphicon-road" id="getdir1" onclick="getLocation('LocationProvided1')" style="font-size:15px;"> Get Direction1</span>

<span class="glyphicon glyphicon-road" id="getdir2" onclick="getLocation('LocationProvided2')" style="font-size:15px;"> Get Direction2</span>

<span class="glyphicon glyphicon-road" id="getdir3" onclick="getLocation('LocationProvided3')" style="font-size:15px;"> Get Direction3</span>

<p id="geo-error"></p>

i have multiple address, can i still use .click() for it? putting a value for the address ? — natsumiyu, Jul 12 '16 at 01:06
Can you explain a bit more? How is multiple address look like? — trungk18, Jul 12 '16 at 01:12
i mean in every button a have a certain end point for it. for example in getdir1 the end point is city1 then in getdir2 the end point is city2 — natsumiyu, Jul 12 '16 at 01:20
You mean you wanna pass the lat, long and address to getLocation? — trungk18, Jul 12 '16 at 02:04

natsumiyu · Answer 3 · 2016-07-12T02:18:12.853

0

found my error

I added .off('click') like what @Christophe Roussy said and also in my window.open() there should be a name argument to it.

window.open(url, name) every time i call the URL it will go to NAME I put. And since i put a NAME argument it will overwrite the the URL of the window it opened.

I put the same name value.

edited Jul 12 '16 at 02:18

answered Jul 12 '16 at 01:35

natsumiyu

3,217
7
30
54

Opening a new window (google maps) using javascript, remove previous event handler

3 Answers3