JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="map_canvas"></div>

CSS

html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

var geocoder;
var map;
var service;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();

var curLoc = new google.maps.LatLng(35.0853336, -106.6055534);

function initialize() {
    var 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
    });
    directionsDisplay.setMap(map);
    service = new google.maps.places.PlacesService(map);
    service.getDetails({
        placeId: 'ChIJy_YmBMEMIocRZF8r5wPFMYU'
    }, function (place, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
            var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location,
                icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png'
            });
            map.setCenter(marker.getPosition());
            calculateAndDisplayRoute(curLoc, marker.getPosition(), directionsService, directionsDisplay);   

        }
    });
    
    
}
function calculateAndDisplayRoute(start, end, directionsService, directionsDisplay) {
  directionsService.route({
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);