JSFiddle - React, Tailwind, and code Playground

by germandost

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<div id="map-canvas"></div>

CSS

#map-canvas {
    width:100%;
    height:500px;
    position:"absolute";
    top: 0px;
    left: 0px;
    overflow:"hidden";
}

JavaScript

var map;
//0.574853, 123.048032
var data = '[{"id":"1","latitude":"0.57","longitude":"123.04","no_tiang":"stuff for #1"},{"id":"2","latitude":"0.56","longitude":"123.045", "no_tiang":"stuff for #2"}]';

function setMarkers(data) {
    console.log('setMarkers');
    console.log(data);
    var markerJson = JSON.parse(data);

    var pos;
    var marker;
    var allMarkers = [];
    console.log(markerJson.length);
    for (var i = 0; i < markerJson.length; i++) {
        pos = new google.maps.LatLng(markerJson[i].latitude, markerJson[i].longitude);
        marker = new google.maps.Marker({
            position: pos,
            map: map,
            title: 'Title',
            icon: 'https://www.google.com/support/enterprise/static/geo/cdate/art/dots/red_dot.png'

        });

        /// LABEL ///
        var label = new Label({
            map: map,
            text: marker.getPosition().toUrlValue(6)
        });
        label.bindTo('position', marker, 'position');
        // label.bindTo('text', marker, 'position');

        /// LABEL ///

        /// INFO WINDOW //
        marker['infowindow'] = new google.maps.InfoWindow({
            content: markerJson[i].no_tiang
        });

        var currentinfo = null;

        google.maps.event.addListener(marker, 'click', function () {
            if (currentinfo) {
                currentinfo.close();
            }
            this['infowindow'].open(map, this);
            currentinfo = this['infowindow'];
        });
        /// INFO WINDOW //

        allMarkers.push(marker);
    }
}

function fetchMarkers() {
    console.log('fetchMarkers');
    var loaded_markers = ($('#loaded_markers').val() == '') ? 0 : $('#loaded_markers').val();
    var offset = $('#offset').val();
    console.log(loaded_markers + ' - ' + offset);
    /* $.ajax({
                    type: "GET",
                    url: "lazy_load_ajax.php",
                    data: {
                        start: loaded_markers,
                       ...