Map doesn't get displayed Google Maps API V3_问答_开发者

Map doesn't get displayed Google Maps API V3

开发者 https://www.devze.com 2023-03-09 12:26 出处：网络

Code with V3 API. function initialize () { if (GBrowserIsCompatible()) { var ch = new GLatLng (0,0); var myOptions = {

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("开发者_如何学JAVAmap"));
         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);

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>

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

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

center: chicago,

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.

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.