JSFiddle - React, Tailwind, and code Playground

by mina morsali

HTML

<script src="https://maps.google.com/maps/api/js?sensor=true"></script>
<div id="map_canvas" style="height: 500px"></div>

CSS

<style>
        #map_canvas img {
            max-width: none;
        }
    </style>
    <style>
        .infoDiv {
            height: 200px;
            width: 300px;
            -webkit-user-select: none;
            background-color: white;
        }
    </style>

JavaScript

$(document).ready(function () {
            Initialize();
        });

function Initialize() {
            var mapOptions = {
                zoom: 16,
                center: new google.maps.LatLng('32.6384014', '51.65132887000004'),
                mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP
            };
          var  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    
    var myTrip = [], waypts=[];    
                            myTrip.push(new google.maps.LatLng(32.6384014, 51.65132887000004));
                            waypts.push({
                                location: new google.maps.LatLng(32.6384014, 51.65132887000004),
                                stopover: true
                            });
    
    myTrip.push(new google.maps.LatLng(32.63727025, 51.65345639999998));
                            waypts.push({
                                location: new google.maps.LatLng(32.63727025, 51.65345639999998),
                                stopover: true
                            });
    
    myTrip.push(new google.maps.LatLng(32.6367726, 51.65345639999998));
                            waypts.push({
                                location: new google.maps.LatLng(32.6367726, 51.65677270000003),
                                stopover: true
                            });                       
                        
                        var directionsService = new google.maps.DirectionsService();
                        var directionsDisplay = new google.maps.DirectionsRenderer(
                        {
                            suppressMarkers: true,
                            suppressInfoWindows: true
                        });
                        directionsDisplay.setMap(map);
                        var request = {
                            origin: myTrip[0],
                            destination: myTrip[myTrip.length - 1],
                            waypoints: waypts,
            ...