initMap is not a function Google Map Api

Navigation
2

Trying to show the Google Map through the API using JS, I get the answer: "initMap is not a function", I tried removing defer and async of script but I always get the same answer.

This is the code I am using (which works correctly in fiddler or in 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>
    
asked by Alfred Tejeda 17.04.2018 в 16:40
source

2 answers

0

The error:

  

"initMap is not a function"

It is due to the following line: 

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

Here you are calling the initMap function in the callback, this function is non-existent in the code you show, there is something similar in what you have, therefore we are solving the issue.

Replaces: 

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

function map() {

By: 

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

function initMap() {

Update:

  

google is not defined

Delete: 

$(function () {
  initMap();
});
    
answered by 17.04.2018 в 17:11
0

I leave the example working 

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>

I would have to change the MY_API_KEY to your key

Greetings

    
answered by 17.04.2018 в 17:45
How to autocomplete label according to a data in textbox? Authorize SPA client using client credential grant token and personal access token - Laravel Passport