JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map_canvas" style="height:400px;"></div>
JavaScript
var directionDisplay,
directionsService = new google.maps.DirectionsService(),
map,
berlin = new google.maps.LatLng(52.524268, 13.406290000000013),
potsdam = new google.maps.LatLng(52.3941887, 13.072690999999963);
function ginit() {
directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom:12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: berlin
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = berlin
var end = potsdam
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
fx(response.routes[0]);
}
});
}
function fx(o)
{
if(o && o.legs)
{
for(l=0;l<o.legs.length;++l)
{
var leg=o.legs[l];
for(var s=0;s<leg.steps.length;++s)
{
var step=leg.steps[s],
a=(step.lat_lngs.length)?step.lat_lngs[0]:step.start_point,
z=(step.lat_lngs.length)?step.lat_lngs[1]:step.end_point,
dir=((Math.atan2(z.lng()-a.lng(),z.lat()-a.lat())*180)/Math.PI)+360,
ico=((dir-(dir%3))%120);
new google.maps.Marker({
position: a,
icon: new google.maps.MarkerImage('http://maps.google.com/mapfiles/dir_'+ico+'.png',
new google.maps.Size(24,24),
new google.maps.Point(0,0),
new google.maps.Point(12,12)
),
map: map,
title:...