javascript - Google Maps API --Map not displaying - Stack Overflow

admin管理员组

文章数量:1316532

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 template

Here'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 ponents
    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="">
</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!

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 template

Here'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 ponents
    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./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!

• javascript
• css
• ruby-on-rails
• google-maps-api-3
• less

Share Improve this question Follow asked Jul 12, 2015 at 1:09 nextstepnextstep 1,48033 gold badges1212 silver badges2727 bronze badges 2

• Have you confirmed the JavaScript is being loaded in the page? There is a gem called gmaps4rails that makes working with Google Maps in Rails apps a lot nicer: github./apneadiving/Google-Maps-for-Rails – beaorn Commented Jul 12, 2015 at 1:21
• What's the best way to check if the js is being loaded in firefox? – nextstep Commented Jul 12, 2015 at 1:55

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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./maps/api/js?sensor=false&callback=initialize"></script>

This post helped:

Async Google Maps API v3 undefined is not a function

本文标签： javascriptGoogle Maps API Map not displayingStack Overflow