Google map api load grey map instead of map images

Question

i am having this weird issue with google maps api.

I am trying to show map with clickable pins where data is loaded from api. Everything seems to work: data is loaded, pins appear, toggles work... however map is just grey - no map images are loaded. Its draggable, markup is also loaded from google, but not the map images.

What could be the cause of this?

'use strict'

var $ = require('jquery'),
    gmaps = require('google-maps');

var mapsHero = function(el) {
    this.init(el);
};


// Publics
mapsHero.prototype.init = function(map) {
    var gmap;
    
    gmaps.load(function(google) {
        var InfoBox = require('google-maps-infobox');
        var mapCanvas = document.getElementById('maps-hero');
        var api = "URL TO API"
        var icon1 = '../../assets/icons/icon_map_pin_green.svg';
        var icon2 = '../../assets/icons/icon_map_pin_orange.svg';
        var icon3 = '../../assets/icons/icon_map_pin_red.svg';

        var marker, i, j, k, f, infobox, infoboxes = [], longitude, latitude;

        var mapStyles = [{"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":"on"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}];

        var mapOptions = {
            //zoom: parseInt(map.getAttribute('data-zoom')),
            zoom: 3,
            mapTypeControlOptions: {
            mapTypeIds: [ 'Styled']
            },
            mapTypeId: 'Styled',
            center: new google.maps.LatLng(54.73054, -46.51219),
            scrollwheel: false,
            zoomControl: false,
            panControl: false,
            streetViewControl: false,
            mapTypeControl: false,
            scaleControl: false,
            overviewMapControl: false
        };
        
        var styledMapType = new google.maps.StyledMapType(mapStyles, { name: 'Styled' });
        var gmap = new google.maps.Map(mapCanvas, mapOptions);

        var getJson = $.getJSON(api, function(data) {
            var dir = data.localContacts;

            $.each(data.localContacts, function(i, localContact) {
                $.each(localContact.items, function(i, location) {
                    var icon = icon2;
                    var box = "maps-infobox-mfct";

                    if (location.isHeadquater) {
                        icon = icon1;
                        box = "maps-infobox";
                    }

                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(location.longitude, location.latitude),
                        map: gmap,
                        icon: icon
                    });

                    var boxContent = '<div class="' + box + '">' + '<h3 class="headline5">' + location.name + '</h3>' + '<p>' + location.city + '<br>' + location.street + '<br>' + location.phone + '</p>' + '</div>';

                    var infobox = new InfoBox({
                        content: boxContent,
                        pixelOffset: new google.maps.Size(-125, -25),
                        closeBoxMargin: "5px",
                        alignBottom: true
                    });

                    infoboxes.push(infobox);

                    google.maps.event.addListener(marker, 'click', function() {
                        $.each(infoboxes, function(i, e) {
                            e.close();
                        });

                        infobox.open(gmap, marker);
                    });
                });
            });
        });

    });
};

module.exports = mapsHero;

I have suspicion that somehow the map settings do not reach marker = new google.maps.Marker, even tho they are global...

Any ideas?

Can you create a minimal version of your code that shows the issue (in a JSFiddle for example)? Did you set a height to your map container? I can see that you apply custom style and a lot of properties have saturation: -100. Are you sure you didn't grey out too many things? — MrUpsidown

Dr.Molle Dr.Molle · Accepted Answer · 2015-06-18T09:16:36

You must also register the custom mapType for the map.

Place this line after the line where you create the google.map.Map-instance:

gmap.mapTypes.set('Styled', styledMapType);

However, when you only want the map to appear in a single style you don't need to create a custom mapType, you may apply the styles directly to the default mapType(ROADMAP).

To following will have the same result:

function initialize() {
  var mapStyles = [{
    "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": "on"
    }]
  }, {
    "featureType": "water",
    "elementType": "labels",
    "stylers": [{
      "visibility": "on"
    }, {
      "lightness": -25
    }, {
      "saturation": -100
    }]
  }, {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [{
      "hue": "#ffff00"
    }, {
      "lightness": -25
    }, {
      "saturation": -97
    }]
  }];

  var mapOptions = {
    disableDefaultUI: true,
    zoom: 3,
    styles: mapStyles,
    center: new google.maps.LatLng(54.73054, -46.51219),

  };

  var gmap = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);



}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3">
</script>
<div id="map-canvas"></div>

Google map api load grey map instead of map images

1 Answers