JSFiddle - React, Tailwind, and code Playground

by praveen_jegan

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<div class="ui-bar-a ui-corner-all ui-shadow" style="padding:1em;">
   <div id="map_canvas" style="height:350px;"></div>
</div>

JavaScript

var map, currentPosition, directionsDisplay, directionsService;

    if (true) {

        directionsDisplay = new google.maps.DirectionsRenderer();
        directionsService = new google.maps.DirectionsService();

        currentPosition = new google.maps.LatLng(20.14, -25.012);

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

        directionsDisplay.setMap(map);

        var currentPositionMarker = new google.maps.Marker({
            position: currentPosition,
            map: map,
            title: "Current position"
        });

        var infowindow = new google.maps.InfoWindow();
        google.maps.event.addListener(currentPositionMarker, 'click', function () {
            infowindow.setContent("Current position: latitude: " + 20.14 + " longitude: " + -25.012);
            infowindow.open(map, currentPositionMarker);
        });
    } else {

        directionsDisplay = new google.maps.DirectionsRenderer();
        directionsService = new google.maps.DirectionsService();

        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(18.52043, 73.85674);


        if (geocoder) {
            geocoder.geocode({
                'address': address1
            }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                        //map.setCenter(results[0].geometry.location);

                        map = new google.maps.Map(document.getElementById('map_canvas'), {
                            zoom: 15,
                            center: results[0].geometry.location,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        });


                        var marker = new google.maps.Marker({
                           ...