JSFiddle - React, Tailwind, and code Playground

by Drecker

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,
                    waypoints: [ // Adding some random waypoints
                        {
                            location: new google.maps.LatLng(49.95, 14.95),
                            stopover: false
                        },
                        {
                            location: new google.maps.LatLng(50, 15),
                            stopover: true
                        },
                        {
                            location: new google.maps.LatLng(50.05, 15.05),
                            stopover: false
                        }
                    ]
                },
               ...