Problems with the Google map

0

I have a problem in the console in the js part of Google Maps that gives the following error:

Uncaught TypeError: Cannot read property 'DirectionsService' of undefined

the js code is as follows:

<script type="text/JavaScript" src="https://www.google.com/jsapi?
key=AIzaSyBzuV_RnIlmB-2nSmtz-G0y5AtNkhXWN3c"></script>  

var mapa;
var mostrar_direcciones;
//Calcular las rutas
var servicios_rutas = new google.maps.DirectionsService();
var LatLng = {
  lat: 40.417648,
  lng: -3.6982298,
};

function initMap() {
  mostrar_direcciones = new google.maps.DirectionsRenderer();
  var opciones = {
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(40.417648, -3.6982298)
  };
};
mapa = new google.maps.Map(document.getElementById("mapa"), opciones);
mostrar_direcciones.setMap(mapa);
mostrar_direcciones.setPanel(document.getElementById("ruta"));
//Creaccion de la marca
var marca = new google.maps.Marker({
  position: LatLng,
  map: mapa,
  icon: {
    path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
    scale: 6,
  },
  title: "Metamorphosis Design"
});

//Datos de la caja Marker
var caja = new google.maps.InfoWindow({
  content: 'Empresa: <b>Metamorphosis Design </b><br/>Teléfono:985648212  <br / > dirección: Calle de los Madrazos 23, Madrid'
});

//Evento para hacer aparecer los datos 
google.maps.eventaddListener(marca, 'click', function() {
  caja.open(mapa, marca);
});



function calcularRuta() {
  var partida = document.getElementById("partida").value;
  //Indica el destino donde queremos ir.
  var destino = LatLng;
  var opciones = {
    origin: partida,
    destination: destino,
    travelMode: google.maps.TravelMode.DRIVING
  };

  servicios_rutas.route(opciones, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      //mostrar_direcciones = new 
      google.maps.DirectionsRenderer({
        mapa: mapa
      });
      mostrar_direcciones.setDirections(response);
    }
  });

HTML Code:

<div id="mapa"  style="position:relative; height:200px; width:300px; margin-
top:30px; margin-left: 20px;" onload="initMap">  

    </div>
    
asked by Marta 26.06.2017 в 12:46
source

0 answers