JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maps.google.se/maps/api/js"></script>
<button onclick="myFunction()">Try it</button>
<div id="map"></div>
<div style="height:40px; overflow:hidden; " id="map-directions"></div>
CSS
.adp-text{
display:none;
}
.adp-marker{
display:none;
}
.adp-placemark{
display:none;
}
.adp-summary{
background-color:#0C3;
color:#FFF;
font-size:26px;
font-weight:600;
}
JavaScript
(function () {
var directionsService = new google.maps.DirectionsService(),
directionsDisplay = new google.maps.DirectionsRenderer(),
createMap = function (start) {
var travel = {
origin : (start.coords)? new google.maps.LatLng(start.lat, start.lng) : start.address,
destination : "SS00SD",
travelMode : google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL
// Exchanging DRIVING to WALKING above can prove quite amusing :-)
},
mapOptions = {
zoom: 2,
// Default view: downtown Stockholm
center : new google.maps.LatLng(59.3325215, 18.0643818),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("map-directions"));
directionsService.route(travel, function(result, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
};
// Check for geolocation support
if (navigator.geolocation) {
window.onload = (function (position) {
// Success!
createMap({
coords : true,
//lat : position.coords.latitude,
//lng : position.coords.longitude
lat : 51.481586619883124,
lng : 0.232562556862826
});
},
function () {
// Gelocation fallback: Defaults to Stockholm, Sweden
createMap({
coords : true,
//lat : position.coords.latitude,
//lng : position.coords.longitude
lat : 51.481586619883124,
lng : 0.232562556862826
});
}
);
}
else {
// No geolocation fallback: Defaults to Lisbon, Portugal
createMap({
coords : true,
//lat : position.coords.latitude,
//lng : position.coords.longitude
lat :...