2

Intentando mostrar el Mapa de Google a través del API utilizando JS, obtengo como respuesta: "initMap is not a function", he intentado quitando defer y async del script pero obtengo siempre la misma respuesta.

Este es el código que estoy utilizando (que funciona correctamente en fiddler o en codepen)

$(function () {
  map();
});

function map() {
  if ($('#map').length > 0) {
  /* Función para iniciar GoogleMaps */
    function initMap() {
      var location = new google.maps.LatLng(10.4902249,-66.8163816);
      var markerLocation = new google.maps.LatLng(10.490422, -66.817083);

      var mapCanvas = document.getElementById('map');
      var mapOptions = {
        center: location,
        zoom: 16,
        panControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(mapCanvas, mapOptions);
      var markerImage = 'img/marker.png';
      var marker = new google.maps.Marker({
        position: markerLocation,
        map: map,
        icon: markerImage
      });
      /* Contenido de la ventana de informanción al dar click en el "Marker" */
      var contentString = '<div class="info-window">' +
                    '<h3>Información Google Maps</h3>' +
                    '<div class="info-content">' +
                    '<p>Mensaje de prueba</p>' +
                    '</div>' +
                    '</div>';
      var infowindow = new google.maps.InfoWindow({
        content: contentString,
        maxWidth: 400
      });
      marker.addListener('click', function () {
        infowindow.open(map, marker);
      });
      var styles = [{"featureType": "landscape", "stylers": [{"saturation": -100}, {"lightness": 65}, {"visibility": "on"}]}, {"featureType": "poi", "stylers": [{"saturation": -100}, {"lightness": 51}, {"visibility": "simplified"}]}, {"featureType": "road.highway", "stylers": [{"saturation": -100}, {"visibility": "simplified"}]}, {"featureType": "road.arterial", "stylers": [{"saturation": -100}, {"lightness": 30}, {"visibility": "on"}]}, {"featureType": "road.local", "stylers": [{"saturation": -100}, {"lightness": 40}, {"visibility": "on"}]}, {"featureType": "transit", "stylers": [{"saturation": -100}, {"visibility": "simplified"}]}, {"featureType": "administrative.province", "stylers": [{"visibility": "off"}]}, {"featureType": "water", "elementType": "labels", "stylers": [{"visibility": "on"}, {"lightness": -25}, {"saturation": -100}]}, {"featureType": "water", "elementType": "geometry", "stylers": [{"hue": "#ffff00"}, {"lightness": -25}, {"saturation": -97}]}];
      map.set('styles', styles);
    }
    google.maps.event.addDomListener(window, 'load', initMap);
  }
}

<div id="map"></div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"></script>
<script src="js/custom.js"></script>

2 respuestas 2

0

El error:

"initMap is not a function"

Se debe a la siguiente línea:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"></script>

Aquí estás llamando a la función initMap en el callback, dicha función es inexistente en el código que muestras, hay algo parecido en lo que tienes, por lo tanto vamos solucionando el tema.

Reemplaza:

$(function () {
  map();
});

function map() {

Por:

$(function () {
  initMap();
});

function initMap() {

Actualización:

google is not defined

Elimina:

$(function () {
  initMap();
});
4
  • Realizando ese cambio me indica que google is not defined, y si coloco google.maps.event.addDomListener(window, 'load', initMap); dentro de la llaves de initMap no se visualiza error pero tampoco carga el mapa Commented el 17 abr. 2018 a las 15:24
  • voy actualizando la respuesta
    – fredyfx
    Commented el 17 abr. 2018 a las 16:55
  • 1
    @fredyx la solución que encontré fue ellinar el sigueiente bloque de código $(function () { map(); }); function map() { if ($('#map').length > 0) { y colocar el script personalizado antes del googleApi Commented el 17 abr. 2018 a las 19:29
  • excelente :D coloca tu respuesta y la marcas como aceptada en 24 horas :D
    – fredyfx
    Commented el 17 abr. 2018 a las 20:44
0

Te dejo el ejemplo funcionando

var map;
function initMap() {
      var location = new google.maps.LatLng(10.4902249,-66.8163816);
      var markerLocation = new google.maps.LatLng(10.490422, -66.817083);

      var mapCanvas = document.getElementById('map');
      var mapOptions = {
        center: location,
        zoom: 16,
        panControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(mapCanvas, mapOptions);
      var markerImage = 'img/marker.png';
      var marker = new google.maps.Marker({
        position: markerLocation,
        map: map,
        icon: markerImage
      });
      /* Contenido de la ventana de informanción al dar click en el "Marker" */
      var contentString = '<div class="info-window">' +
                    '<h3>Información Google Maps</h3>' +
                    '<div class="info-content">' +
                    '<p>Mensaje de prueba</p>' +
                    '</div>' +
                    '</div>';
      var infowindow = new google.maps.InfoWindow({
        content: contentString,
        maxWidth: 400
      });
      marker.addListener('click', function () {
        infowindow.open(map, marker);
      });
      var styles = [{"featureType": "landscape", "stylers": [{"saturation": -100}, {"lightness": 65}, {"visibility": "on"}]}, {"featureType": "poi", "stylers": [{"saturation": -100}, {"lightness": 51}, {"visibility": "simplified"}]}, {"featureType": "road.highway", "stylers": [{"saturation": -100}, {"visibility": "simplified"}]}, {"featureType": "road.arterial", "stylers": [{"saturation": -100}, {"lightness": 30}, {"visibility": "on"}]}, {"featureType": "road.local", "stylers": [{"saturation": -100}, {"lightness": 40}, {"visibility": "on"}]}, {"featureType": "transit", "stylers": [{"saturation": -100}, {"visibility": "simplified"}]}, {"featureType": "administrative.province", "stylers": [{"visibility": "off"}]}, {"featureType": "water", "elementType": "labels", "stylers": [{"visibility": "on"}, {"lightness": -25}, {"saturation": -100}]}, {"featureType": "water", "elementType": "geometry", "stylers": [{"hue": "#ffff00"}, {"lightness": -25}, {"saturation": -97}]}];
      map.set('styles', styles);
    }
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap" async defer></script>

Faltaría cambiar el MY_API_KEY por tu key

Un saludo

1
  • En principio esto funciona pero parece que antes daba un problema con el servidor.
    – ElGerar
    Commented el 17 abr. 2018 a las 17:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.