CODEWITHSUNDEEP
javascripthtmlgoogle-mapsgoogle-maps-api-3google-maps-markers
Marco Dinatsoli
Marco Dinatsoli

Reputation: 10590

Google maps, map doesn't show on html

This is my code

<fieldset>
            <script src="https://maps.googleapis.com/maps/api/js"></script>
            <script>
                function initialize() {
                    var map_canvas = document.getElementById('map_canvas');
                    var map_options = {
                        center: new google.maps.LatLng(44.5403, -78.5463),
                        zoom: 8,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    }
                    var map = new google.maps.Map(map_canvas, map_options);
                }
                google.maps.event.addDomListener(window, 'load', initialize);
            </script>
            <div id="map_canvas"></div>
            <input type="submit" name="submit" class="submit action-button" value="Submit" />
        </fieldset>

as stated in this official tutorial

https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map

but nothing on the HTML appears. I mean I see nothing where is the map? What am i missing please? I already added the load even

Upvotes: 1

Views: 3707

Answers (1)

eikooc
eikooc

Reputation: 2578

From your code have you noticed the div tag: <div id="map_canvas"></div> You need an equivalent CSS style definition

#map_canvas {
    width: 500px;
    height: 400px;
}

Here is a working example: http://jsfiddle.net/R8sdj/

Upvotes: 3

Related Questions