71
rated 0 times
[
76]
[
5]
/ answers: 1 / hits: 23448
/ 9 Years ago, sun, july 12, 2015, 12:00:00
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 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!
More From » css
