CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Aquarius_Girl
Aquarius_Girl

Reputation: 22946

Map doesn't get displayed Google Maps API V3

Code with V3 API.

function initialize ()
{
    if (GBrowserIsCompatible()) 
    { 
        var ch = new GLatLng (0,0);

        var myOptions = {
            zoom:7,
            center: ch,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        map = new google.maps.Map(document.getElementById("map"), myOptions);

        directionsDisplay = new google.maps.DirectionsRenderer(map, document.getElementById("map"));
        directionsDisplay.setMap(map);                  
    }
}

Code with V2 API.

function initialize ()
{
     if (GBrowserIsCompatible()) 
     { 
         map = new GMap2 (document.getElementById("map"));
         map.setCenter (new GLatLng(0,0),1 );
     }
}

The V2 API code worked flawlessly, the V3 API code is NOt displaying any map. What's the point that I am missing?

EDIT Modified the V3 code as follows, but still no maps:

var chicago = new google.maps.LatLng (0, 0);

var myOptions = {
    zoom:1,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

map = new google.maps.Map(document.getElementById("map"), myOptions);

Upvotes: 6

Views: 23121

Answers (5)

Hamid Jolany
Hamid Jolany

Reputation: 880

1- ensure your google map API key is correct.

2- it's may be not enabled in your google map console.

3- wrongly enabled the location API instead of the map API.

Upvotes: 0

kman
kman

Reputation: 520

I had the same symptoms, my v2 maps would not display with V3. When I look in the browser console logs, I'm seeing the error: Uncaught ReferencedError: GBrowserIsIncompatible is not defined.

Per the Google V2 to V3 Migration Guide, GBrowserIsIncompatible is no longer supported. I haven't found an alternative and just removed the logic related to this function. This site suggests just removing the function.

I found other problems with migrating which are addressed in the Google Migration Guide link above.

Upvotes: 0

Trott
Trott

Reputation: 70153

Make sure you are loading the correct Google Maps API, that you have a div tag with an id of map, and (for good measure) that you give the div a height and width. (Perhaps better to put the height and width in a stylesheet, but for clarity, I'm including it inline here.)

Here's a web page with your post-edit code. Try it. Works for me.

<html>
<head>
<title>Google Map test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map" style="height:500px;width:500px"></div>
<script>
var chicago = new google.maps.LatLng (0, 0);

var myOptions = {
    zoom:1,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

map = new google.maps.Map(document.getElementById("map"), myOptions);
</script>
</body>
</html>

Upvotes: 13

wong2
wong2

Reputation: 35750

There is no GLatLng in v3, change it to google.maps.LatLng 

center: chicago,

Upvotes: 1

Ray
Ray

Reputation: 21905

In V3, all the names have changed. For example, GLatLng is now google.maps.LatLng. You will need to revise your code to use the new names.

A link to the docs in case you don't have it

Upvotes: 1

Related Questions