1

I have a Map-button that you click (or tap) to show a modal with an embedded Google Map. It works like it should on desktop in different browsers, but on iPhone (and possibly other touch screens) I have to tap the button twice.

Edit: Tried using "ontouchend" for trigger and "touchend" for closing the modal. Now the modal closes as soon as it opens.

The HTML:

<div class="map-modal" id="map-modal">
    <div class="map-container">
        <div class="the-map" id="map-canvas"></div>
        <div class="hide-btn hide-btn--map" onclick="closeModal();"><span class="close hairline"></span><div class="hidden-content">Hide the map</div></div>
    </div>
</div>

Button:

<div class="button button--map" onmousedown="calcRoute('<?php echo $location[address1]; ?>', '<?php echo $location[address2]; ?>');">Map</div>

The JavaScript:

function calcRoute(start, end) {
    var e = document.getElementById("map-modal");
    e.style.display = 'block';
    $("body").addClass("modal-open");
    google.maps.event.trigger(map, 'resize');
    var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.TravelMode.WALKING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        } else {
            alert("Sorry, no walking route can be found between these locations");
        }
    });
}

google.maps.event.addDomListener(window, 'load', initialize);
Garland Briggs
  • 109
  • 2
  • 12
  • The equivalent of "onmousedown" for the iPhone is "ontouchstart". http://stackoverflow.com/questions/21009821/how-to-impliment-a-onmousedown-and-onmouseup-on-a-touch-screen-iphone – Catie Camastro Dec 07 '15 at 00:56
  • Strange. *ontouchstart* seems to work "too good". It triggers a double tap, so the modal closes as soon as it opens, or, if the google maps logo happens to show up in the same location as the button, the Google Maps app opens. – Garland Briggs Dec 07 '15 at 01:10

2 Answers2

0

Sounds like touchstart and mousedown are both firing. This thread has some options for suppressing the mousedown event in a mobile setting. onclick and ontouchstart simultaneously

Community
  • 1
  • 1
Catie Camastro
  • 78
  • 7
  • I don't think that they're both firing. I tried using both ontouchstart and onclick, debugged it with window.alert(); and they're firing like they should. I've fixed it by capturing the touch event. It's not perfect, because when the Google Map logo happens to be where the user touches the screen, it registers as a touch and opens the Google Maps application. – Garland Briggs Dec 07 '15 at 11:46
0

Solution (not perfect)

Solution updated, see below.

Captured the "second" touch by sending a boolean variable with the trigger event. For ontouchstart set touched=true, for onclick set touched=false. Then in the modal closing function check if there's a touch event, and just reset the touched variable.

It's not an elegant solution. If the Google Maps logo happens to be where the user touched the screen to open the map, it registers as an extra touch, and the Google Maps application opens.

The solution is to prevent the event from bubbling up the DOM tree (never heard about event bubbling before myself). Googling and finding this pointed me in the right direction. It's pretty simple. Just use this.stopPropagation(); on the event trigger.

I kept the previous solution in this post, to show what I tried and to perhaps male it easier to understand how event propagation (or "event bubbling") is working in cases like this.

If anyone have an even more elegant solution, feel free to share.

Trigger Event Button

<div class="button button--map right"
    ontouchstart="this.stopPropagation(); calcRoute('Citybox+Oslo,+Prinsens+gate+6,+0152+Oslo,+Norway', '<?php echo $location[address]; ?>');"
    onclick="calcRoute('Citybox+Oslo,+Prinsens+gate+6,+0152+Oslo,+Norway', '<?php echo $location[address]; ?>');"
    >Map</div>
Garland Briggs
  • 109
  • 2
  • 12