Google Maps API --Map not displaying
22,502
I found an answer that fixed this solution.
I added the callback=initialize
option to the script tag inside the html:
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"></script>
This post helped:
Async Google Maps API v3 undefined is not a function
Comments
-
nextstep about 4 years
First time using the Google maps API, and the map isn't showing up. I've read quite a few things regarding height and width declarations causing problems, I've tried switching from % to px with all associated styles and nothing changes.
I'm working in rails 4.2.1
Map Javascript originally part of a Bootstrap templateHere's my Javascript:
function init() { var mapOptions = { zoom: 15, center: new google.maps.LatLng(40.6700, -73.9400), // New York // Disables the default Google Maps UI components disableDefaultUI: true, scrollwheel: false, draggable: false, // How you would like to style the map. styles: [{ "featureType": "road", "elementType": "geometry", "stylers": [ { "lightness": 100 }, { "visibility": "simplified" } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "visibility": "on" }, { "color": "#C6E2FF" } ] }, { "featureType": "poi", "elementType": "geometry.fill", "stylers": [ { "color": "#C5E3BF" } ] }, { "featureType": "road", "elementType": "geometry.fill", "stylers": [ { "color": "#D1D1B8" }] }] }; // When the window has finished loading create our google map below google.maps.event.addDomListener(window, 'load', init); // Get the HTML DOM element that will contain your map var mapElement = document.getElementById('map'); // Create the Google Map using our element and options defined above var map = new google.maps.Map(mapElement, mapOptions);
In the index.html.erb,
The div where the map is supposed to show up:
<div id="map"></div>
The script tag to link to the API:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=my_api_key_here"> </script>
Associated styles in my .less file:
#map { width: 100%; height: 200px; margin-top: 100px; } @media(min-width:767px) { #map { height: 400px; margin-top: 250px; } }
Associated styles in my .css file:
#map { width: 100%; height: 200px; margin-top: 100px; } @media(min-width:767px) { #map { height: 400px; margin-top: 250px; } }
Any advice would be greatly appreciated, thanks!