JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<script src="https://unpkg.com/@googlemaps/markerwithlabel/dist/index.min.js"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<div onclick="gas()" id="gas">
    <div class="label-map">Gas</div>
</div>

CSS

html, body, #map_canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}
.labels {
    background-color: white;
    border-style: solid;
    border-width: 1px;
}

JavaScript

var geocoder;
var map;

function initialize() {
    map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var marker = new MarkerWithLabel({
        position: map.getCenter(),
        // icon: mapStyles.uavSymbolBlack,
        labelContent: "uav.Callsign" + '<div style="text-align: center;"><b>Alt: </b>' + "uav.Alt" + '<br/><b>Bat: </b>' + "uav.Battery" + '</div>',
        labelAnchor: new google.maps.Point(95, 20),
        labelClass: "labels",
        labelStyle: {
            opacity: 0.75
        },
        zIndex: 999999,
        map: map
    })
}
google.maps.event.addDomListener(window, "load", initialize);

//Gas
var gas_markers = null;

function gas() {
    if (gas_markers === null) {
        document.getElementById('gas').style.backgroundColor = "rgb(175,175,175)";
        document.getElementById('gas').style.borderColor = "black";
        document.getElementById('gas').style.color = "rgb(75,75,75)";

        var request = {
            location: map.getCenter(),
            radius: 3500,
            keyword: ["gas"]
        };
        var service = new google.maps.places.PlacesService(map);
        service.nearbySearch(request, callback);


        function callback(results, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                if (gas_markers === null) gas_markers = [];
                for (var i = 0; i < results.length; i++) {
                    createMarker(results[i]);
                }
            }
        }

        function createMarker(place) {
            var placeLoc = place.geometry.location;
            var gas_marker = new MarkerWithLabel({
                position: place.geometry.location,
                draggable: false,
                raiseOnDrag: false,
                map: map,
                // icon: "images/gas1.png",
              ...