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>