JSFiddle - React, Tailwind, and code Playground

by ffabreti

HTML

<div>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.10/src/markerwithlabel.js" type="text/javascript"></script>
    <div id="map_canvas">hello</div>
</div>

CSS

.labels {
    color: red;
    background-color: white;
    font-family:"Lucida Grande", "Arial", "sans-serif";
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    width: 40px;
    border: 2px solid black;
    white-space: nowrap;
}
#map_canvas {
    background-color: gray;
    display: block;
    width: 400px;
    height: 300px;
}

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,
    labelContent: "Marker1",
    labelAnchor: new google.maps.Point(22, 0),
    labelClass: "labels", //the CSS class for the label
    labelStyle: {
        opacity: 0.75
    }
});

var infoWindow = new google.maps.InfoWindow({  content: "Home For Sale" });
marker1.set('infoWindow', infoWindow);

var longpress = false;

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