JSFiddle - React, Tailwind, and code Playground

by masmiguel

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDnyn43-82XdXXlApKJ56DMmjjBdGw7hcI&amp;signed_in=true&amp;"></script>
<div id="results"></div>
<div id="map"></div>

<!--input type="button" name="get-coordinates" value="Get coordinates"-->
<br><br>
<input type="text" name="address1" id="address1" value=""><br>
<input type="text" name="postcode" id="postcode" value=""><br>
<input type="text" name="city" id="city" value=""><br>


<!DOCTYPE html>
<!-- saved from url=(0041)http://www.wolfpil.de/v3/arrow-heads.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">.gm-style .gm-style-mtc label,.gm-style .gm-style-mtc div{font-weight:400}
</style><link type="text/css" rel="stylesheet" href="./ruta-con-direccion_files/css"><style type="text/css">.gm-style .gm-style-cc span,.gm-style .gm-style-cc a,.gm-style .gm-style-mtc div{font-size:10px}
</style><style type="text/css">@media print {  .gm-style .gmnoprint, .gmnoprint {    display:none  }}@media screen {  .gm-style .gmnoscreen, .gmnoscreen {    display:none  }}</style><style type="text/css">.gm-style-pbc{transition:opacity ease-in-out;background-color:rgba(0,0,0,0.45);text-align:center}.gm-style-pbt{font-size:22px;color:white;font-family:Roboto,Arial,sans-serif;position:relative;margin:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
</style>

<meta name="viewport" content="initial-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="./ruta-con-direccion_files/include.css">
<meta name="author" content="Wolfgang Pichler">
<link rel="canonical" href="http://www.wolfpil.de/">


<title>Polylines with Arrows (Maps API v3)</title>

<style type="text/css">

body, html { height:100%; width: 100%; }

#map {
 float: left;
 margin: 0 25px 10px 14px;
 width: 64%;
 height: 70%;
 border: 1px solid gray;
}

#desc {
 float: left;
 margin: 0 25px 10px 20px;
 width: 14em;
}

@media screen and...

CSS

#map {
    width: 750px;
    height: 400px;
}

JavaScript

//formato de la dirección para google:
//route,street_number, postal_code + locality, 
//Carrer de la Fàbrica, 20B, 07013 Palma, Illes Balears, España


//coordenadas de la vileta
//39.594743088048524,2.616848945617676
var map;
//var coordinates;
var marker;
var geocoder = new google.maps.Geocoder();
var tiempoMaximo = 20; //en minutos
var origen = ['39.594743088048524,2.616848945617676'];
//http://maps.google.com/maps/api/js?sensor=false&.js



function calculoTiempo(destino) {
console.log("entro "+destino);
  var service = new google.maps.DistanceMatrixService;
  service.getDistanceMatrix({
    origins: origen,
    destinations: [destino],
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.METRIC,
    avoidHighways: false,
    avoidTolls: true
  }, function(response, status) {
    if (status !== google.maps.DistanceMatrixStatus.OK) {
      alert('Error was: ' + status);
    } else {
      alert(response.originAddresses[0] + ' --> ' + response.destinationAddresses[0] + ' ==> ' + response.rows[0].elements[0].distance.text+ ' | tiempo en segundos:'+response.rows[0].elements[0].duration.value+ ' | tiempo en minutos:'+response.rows[0].elements[0].duration.text);
      if (Number(response.rows[0].elements[0].duration.value/60) > tiempoMaximo) alert('no se puede hacer entrega');else alert("se puede hacer entrega. Enhorabuena!!!!");
    }
  });
}



function retornaCampo(addrComponents,nombreCampo){

//alert("el nombre del campo es "+nombreCampo);

    for (var i = 0; i < addrComponents[0].address_components.length; i++) {
    
        if (addrComponents[0].address_components[i].types[0] == nombreCampo) {
           // alert(addrComponents[0].address_components[i].long_name);
            //console.log(addrComponents)
            return addrComponents[0].address_components[i].long_name;
        }
        
    }
    return "";

}

function placeMarker(location) {

    //marker will only exist inside this function
    if ( marker...