CODEWITHSUNDEEP
javascripthtmlgoogle-maps
Imran Bughio
Imran Bughio

Reputation: 4941

Google Map tutorial not working

I am following tutorial "Adding a Google Map to your website"

But for some reason its not working... may be i missed something..

FIDDLE

HTML:

<div id="map_canvas"></div>

CSS:

#map_canvas {
    width: 500px;
    height: 400px;
    background-color: #CCC;
}

JS:

$(function () {
    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);
});

Note: In the fiddle resources i have added Google-Api

I just cant figure-out what did i do wrong... html, css & java script all are the same as in the tutorial.. i even added $(function (){ to make sure script loads after document but didn't helped...

Upvotes: 0

Views: 99

Answers (2)

Dot_NET Pro
Dot_NET Pro

Reputation: 2123

The code is all fine.

In fiddle: On the left top side

Below Frameworks and Extension

Select:

No-Wrap in <head>

from the second drop down.

enter image description here

DEMO: http://jsfiddle.net/DVT7B/3/

Upvotes: 1

geocodezip
geocodezip

Reputation: 161334

$(function () {} and google.maps.event.addDomListener(window,'load',...) do the same thing, just call initialize inside the jquery $ function. Adding the background-color to the css also is a problem.

working fiddle

adjusted javascript:

$(function () {
    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)
    }
    initialize();
});

adjusted css:

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

Upvotes: 1

Related Questions