JSFiddle - React, Tailwind, and code Playground

by Yamini Sontakke

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;dummy=.js"></script>
<script src="http://pastebin.com/raw.php?i=XLXc0t84"></script>
<script src="http://pastebin.com/raw.php?i=rvcSrTqJ"></script>
<div id="map"></div>

CSS

#map {width: 100%; height: 400px;}

JavaScript

$(document).ready(function() {
    Map.init();
    Map.showMarker();
    Map.showRoute();
});

var Map = {
    mapDiv: '#map',
    
    init: function() {
        $(this.mapDiv).gmap3({
            map: {
                options: {
                    zoom: 13,
                    center: {lat: 50, lng: 15}
                }
            }
        });
    },
    
    showMarker: function() {
        mapObject = $(this.mapDiv).gmap3('get');
        myInfobox = new InfoBox({
            content: '<div style="background-color: white">My InfoBox</div>'
        });
        
        $(this.mapDiv).gmap3({
            marker: {
                values: [
                    {
                        id: 10,
                        latLng: {lat: 50.1, lng: 14.9},
                        title: 'my-marker'
                    }
                ],
                events: {
                    click: function(marker, event, context) {
                        myInfobox.open(mapObject, marker);
                    }
                }
            }
        });
    },
    
    showRoute: function() {
        $(this.mapDiv).gmap3({
            getroute: {
                options: {
                    origin: {lat:49.9, lng: 14.9},
                    destination: {lat: 50.1, lng: 15.1},
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                },
                callback: function(results) {
                    if (!results) return;
                    $(this).gmap3({
                        directionsrenderer: {
                            options: {
                                directions: results,
                                preserveViewport: false,
                                markerOptions: {
                                    title: 'title',
                                    clickable: true
                                }
                            }
                        }
                    });
                }
          ...