JSFiddle - React, Tailwind, and code Playground

by ffabreti

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.10/src/markerwithlabel.js"></script>
<div> Open up the Browser Console and see that clicking on the label does not fire mousep event if draggable property of marker is set to false <br>
    if you click the marker itself, mouseup happens
</div>
<div id="map_canvas">hello</div>

CSS

#map_canvas {
    background-color: gray;
    display: block;
    width: 400px;
    height: 300px;
}
.google_marker_labels {
     color: blue;
     background-color: lightyellow;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 12px;
     font-weight: bold;
     text-align: center;
     width: 35px;
     border: 1px solid black;
     white-space: nowrap;
     border-radius: 5px;
}

JavaScript

var latLng = new google.maps.LatLng(49.47805, -123.84716);
var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 12,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var marker1 = new MarkerWithLabel({
    position: homeLatLng,
    //draggable: true,
    raiseOnDrag: true,
    map: map,
    clickable: true,
    labelContent: "0001",
    labelAnchor: new google.maps.Point(18, 40),
    labelClass: "google_marker_labels" //CSS class 
});

var infoWindow = new google.maps.InfoWindow({
    content: "LongPress just Happened!"
});
marker1.set('infoWindow', infoWindow);
//marker1.set('zIndex', 1000);

(function(marker) {
    var start, end, longpress = false;
    
    google.maps.event.addListener(marker, 'click', function () {
        if (longpress) {
            // toggle infoWindow
            if (!marker.infoWindow.getMap()) marker.infoWindow.open(map, marker);
            else marker.infoWindow.close();
            console.log('LongPress on ' + marker.labelContent);
        } else {
            //bounce 
            marker.setAnimation(google.maps.Animation.BOUNCE);
            setTimeout(function () {
                marker.setAnimation(null)
            }, 100);
            console.log("click on " + marker.labelContent);
        }
    });
    google.maps.event.addListener(marker, 'mousedown', function (event) {
        start = new Date().getTime();
        console.log('mouse DOWN');
    });
    google.maps.event.addListener(marker, 'mouseup', function (event) {
        end = new Date().getTime();
        longpress = (end - start >= 350);
        console.log('mouse UP');
    });

})(marker1);