.getMap is not a function

[nickmak]

I am running a map through an ajax request on WordPress, but I keep getting .getMap is not a function, regardless of where I call it.

Looking for some advice to either what I may be doing wrong or what.

    var map,
     mapElement = jQuery('.map-container').attr('id'),
     postsURL = '/wp-json/wp/v2/map-api?per_page=100',
     zoom = set_php_vars.zoom,
     icon = set_php_vars.defaultIcon,
     style = set_php_vars.styling,
     catID = set_php_vars.catID,
     prev_infowindow = false,
     label = 1,
     markers = [],
     markerArray = [],
     cats = [],
     count,
     items,
     center;

 function initMap() {
     'use strict';

     if (catID !== '')
         postsURL = '/wp-json/wp/v2/map-api?per_page=100&map-cat=' + catID;


     var center = new google.maps.LatLng(set_php_vars.homeLat, set_php_vars.homeLng),

         map = new google.maps.Map(document.getElementById(mapElement), {
             zoom: parseInt(zoom),
             center: center,
             mapTypeId: 'terrain',
             mapTypeControl: false,
             mapTypeIds: ['styledMap']
         });

     jQuery.getJSON(style, function(data) {

         var styledMapType = new google.maps.StyledMapType(
             data, {
                 name: 'Custom Map Styling'
             });

         map.mapTypes.set('styledMap', styledMapType);
         map.setMapTypeId('styledMap');

     });

     jQuery.ajax({
         url: postsURL,
         method: 'GET',
         success: function(data) {
             var marker,
                 i,
                 n = 1,
                 metaMarkup = '',
                 metaEndMarkup = '',
                 bounds = new google.maps.LatLngBounds();

             data.forEach(function(post) {

                 //console.log(post);

                 var pos = new google.maps.LatLng(post.map_fields._map_lat, post.map_fields._map_lng);
                 bounds.extend(pos);

                 //<editor-fold desc="Marker Build">
                 var marker = new google.maps.Marker({
                     position: pos,
                     map: map,
                     title: post.title.rendered,
                     icon: icon,
                     city: post.map_fields._map_city,
                     state: post.map_fields._map_state,
                     sf: post.map_fields._map_sf || '',
                     buildingCount: post.map_fields._map_buildings || '',
                 });
                 //</editor-fold>

                 if (marker.sf || marker.buildingCount) {
                     metaMarkup = '<div class="location-meta">';
                     metaEndMarkup = '</div>';
                 }

                 if (marker.sf)
                     metaMarkup += '<span class="sf">' + marker.sf + ' SF</span>';

                 if (marker.buildingCount)
                     metaMarkup += '<span class="building-count">Buildings: ' + marker.buildingCount + '</span>';

                 //<editor-fold desc="Content String Build">
                 var contentString = '<div class="marker-content-container">' +
                     '<div class="marker-header">' +
                     '<p>' + marker.title + '</p>' +
                     '</div> <!-- /.marker-header -->' +
                     '<div class="marker-address">' +
                     '<address>' + marker.city + ' ' + marker.state + '</address>' +
                     '</div> <!-- /.marker-address -->' +
                     metaMarkup +
                     '</div>';

                 markers.forEach(function(marker) {
                     var info = new SnazzyInfoWindow({
                         marker: marker,
                         //content: contentString,
                         content: 'hi',
                     });
                     info.open();
                 });

             });
         },
         cache: true
     });

     google.maps.event.addDomListener(window, 'resize', function() {
         var center = map.getCenter();
         google.maps.event.trigger(map, "resize");
         map.setCenter(center);
     });

 }

[tobiasger]

Any progress on this @nickmak?

[nickmak]

@tobiasger There's been no progress, and since the site had to go live, I've removed the plugin entirely.

I might try again in the future, but the outlook is bleak.

[michaelmarsland]

Check out issue #29. Ensure you are importing the google maps api before the snazzy-window js file.

[nickmak]

@michaelmarsland I did delay the import, and that did not resolve the issue. I've even set the timeout to 5 seconds to ensure the async of google maps was complete.

[aVandalInShorts]

I have the same bug. SnazzyInfoWindow is called in a Google Maps Api load callback function and I got the same error.

I tried to fix it by changing this.setMap(this._marker.getMap()); to this.setMap(this._marker.map); but I got "this.setMap is not a function" instead. Both error are on line 311.