CODEWITHSUNDEEP
google-maps-api-3
Kheera
Kheera

Reputation: 21

Google Maps not showing for me

I've ran into a problem with my google maps, the map-canvas div won't show anymore. It's still in the website, the style is also visible, but the googlemaps won't show.

I've set a % width to it (100%) and a width of 400px (I've tried with % as well).

I'll post my code here as well.

        <script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

    <script>
    (function() {

        if(!!navigator.geolocation) {

            var map;

            var mapOptions = {
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

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

            navigator.geolocation.getCurrentPosition(function(position) {

                var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                var infowindow = new google.maps.InfoWindow({
                    map: map,
                    position: geolocate,
                    content:
                        '<h1>Location pinned from HTML5 Geolocation!</h1>' +
                        '<h2>Latitude: ' + position.coords.latitude + '</h2>' +
                        '<h2>Longitude: ' + position.coords.longitude + '</h2>'
                });

                map.setCenter(geolocate);

            });

        } else {
            document.getElementById('map-canvas').innerHTML = 'No Geolocation Support.';
        }

    })();
    </script>
    <style>
        html, body
        {
              margin: 0px;
              padding: 0px
        }
    </style>
</head>

<body>
    <div id="map-canvas"></div>

with the css here

#map-canvas {
position: absolute;
float: left;
width: 100%;
height: 400px;
margin: 0 auto;
border-bottom: #F5F5F5 solid 3px;
}

Could someone tell me what's wrong with it?

Thanks

Upvotes: 0

Views: 115

Answers (3)

Agam Mittal
Agam Mittal

Reputation: 19

Use this javaScript Function in your programme :

function initialize() {
var mylatlng=new google.maps.LatLng(22.593684, 82.96288);
    var mapOptions = {
        center : mylatlng,
        zoom : 4,
        mapTypeId : google.maps.MapTypeId.HYBRID
    };
     map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

and your html div like this :

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCoRht0hX-BXDVvGrSdXpU-yzqXosCjiz8&sensor=false"></script> 
<div id="map-canvas" style="width:100%"></div>

Upvotes: 0

AlexB
AlexB

Reputation: 7416

Your code is working for me : FIDDLE

When my browser asks for permission to know my geolocation, if I answer Share it, your map appears ~5 seconds later. If I refuse to share it, anything appears.

Your CSS seems OK

width: 100%;
height: 400px;

Is your browser sharing its location ? Is it the desired behavior ?

As @Dr.Molle suggest you, you also should move your JS after your HTML

Upvotes: 0

Dr.Molle
Dr.Molle

Reputation: 117354

This function will be executed too early, #map-canvas is unknown at this time.

Move the script to the end of the or execute the function onload

Upvotes: 2

Related Questions