JSFiddle - React, Tailwind, and code Playground

by nicolas tenorio

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;amp;sensor=true&amp;amp;libraries=places"></script>
<div id="contiene">
    <div id="map-canvas"></div>
</div>
<input type="text" data-mini="true" id="pac-input" data-inline="true">

CSS

html {
    height: 100%
}
body {
    height: 100%;
    margin: 0px;
    padding: 0px
}
#contiene {
    width: 100%;
    height: 100%
}
#map-canvas {
    height: 100%;
    width: 100%;
}
#iframecss {
    width:100%;
    height:100%;
}

JavaScript

var infowindow = new google.maps.InfoWindow({
    size: new google.maps.Size(150, 50)
});

function initialize() {
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(3.4321673, -76.5065598),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });




    var layer = new google.maps.FusionTablesLayer({
        query: {
            select: 'web',
            from: '147P3lf9v-LhG01BPWPn3mgC7hsSID4IkFfuQtB88'
        },
        map: map
        //don't use the infowindows of the FTLayer

    });
    google.maps.event.addListener(layer, 'click', function (e) {



e.infoWindowHtml = "<iframe  frameBorder='0' id='iframecss' src= http://190.216.202.35:82/WebInformador/mobil/?id=" + e.row['stopid'].value + " ></iframe>";
        infowindow.setOptions({





            pixelOffset: e.pixelOffset,
            position: e.latLng

        });
        infowindow.open(map);
    });

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var pos = new google.maps.LatLng(position.coords.latitude,
            position.coords.longitude);

            var infowindow = new google.maps.InfoWindow({
                map: map,
                position: pos,
                content: 'Location found using HTML5.'
            });

            map.setCenter(pos);
        }, function () {
            handleNoGeolocation(true);
        });
    } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation(false);
    }
}

function handleNoGeolocation(errorFlag) {
    if (errorFlag) {
        var content = 'Error: The Geolocation service failed.';
    } else {

    }

    var options = {
        map: map,
        position: new google.maps.LatLng(60, 105)

    };

    var infowindow = new google.maps.InfoWindow(options);
    map.setCenter(options.position);

    var input = /** @type {HTMLInputElement} */
    (
   ...