Google Map API v3 не отображается

Я не могу заставить свою карту Google отображаться в любом браузере. Я даже попробовал копировать в основном пример кода из примера Google и строить его, но я даже не могу его отобразить. Любые идеи, что может быть неправильно ниже? ПРИМЕЧАНИЕ. Я действительно добавляю свой ключ API, где у меня есть «I PUT MY KEY IN ЗДЕСЬ». :)Google Map API v3 не отображается

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=I PUT MY KEY IN HERE&sensor=false"></script> 
<script type="text/javascript"> 
    function initialize() { 
    var map = new google.maps.Map(
    document.getElementById('map-canvas'), { 
     center: new google.maps.LatLng(37.4419, -122.1419), 
     zoom: 13, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(37.4419, -122.1419), 
     map: map 
    }); 

} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<style> 
#map-canvas { height: 100%} 
</style> 
</head> 
<body> 
<div id="bb_map"> 
<p>Visit a Diner Near You</p> 
    <div id="map-canvas"></div> 
</div> 
</div>  
</body> 
</html>

источник

2013-06-04 user2441895

Ваша карта не имеет размера, так что вы не можете увидеть его

<div id="map-canvas" style="height:500px; width:600px"></div>

Вы также не включая сценарии API (я получаю сообщение об ошибке «Google не определен» в консоли JavaScript), это работает для меня на месте:

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    function initialize() { 
    var map = new google.maps.Map(
    document.getElementById('map-canvas'), { 
     center: new google.maps.LatLng(37.4419, -122.1419), 
     zoom: 13, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(37.4419, -122.1419), 
     map: map 
    }); 

} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<style type="text/css"> 
html,body,#bb_map { height: 100%; width:100%;} 
#map-canvas { height: 100%; width:100%;} 
</style> 
</head> 
<body> 
<div id="bb_map"> 
<p>Visit a Diner Near You</p> 
    <div id="map-canvas"></div> 
</div> 
</div>  
</body> 
</html>

working example

источник

2013-06-04 18:07:27 geocodezip

Я знал, что это, вероятно, что-то делать с моим ключом API. Вот и все. Благодарю. – user2441895

Пока вы не используете _need_ ключ для API v3, вы можете использовать его и использовать его, если хотите отслеживать использование с помощью консоли API. Поэтому, если ваш ключ действителен, это не проблема. – geocodezip

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script type="text/javascript"> 

    function initialize() { 
    var map = new google.maps.Map(
    document.getElementById('map-canvas'), { 
     center: new google.maps.LatLng(37.4419, -122.1419), 
     zoom: 13, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(37.4419, -122.1419), 
     map: map 
    }); 

} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<style> 
#map-canvas { width : 100%; 
     height : 300px; 
     border: solid thin #333; 
     margin-top: 20px;} 
</style> 
</head> 
<body> 
<div id="bb_map"> 
<p>Visit a Diner Near You</p> 
    <div id="map-canvas"></div> 
</div> 
</div>  
</body> 
</html>

источник

2013-06-04 18:12:15 vasanth

Я получаю пустой прямоугольник, который охватывает всю страницу. Однако нет карты. – user2441895

приведенный выше html работает, и он показывает маркер рядом с palo alto. – vasanth

Я знал, что это, вероятно, имело какое-то отношение к моему ключу API. Вот и все. Благодарю. – user2441895

Вам не нужен ключ в V3 этого API :)

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<title></title> 
<style> 
html, body, #map-canvas { 
margin: 0; 
padding: 0; 
height: 500px; 
width: 500px; 
} 
</style> 
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script> 
function initialize() { 
var myLatlng = new google.maps.LatLng(37.4419, -122.1419); 

var mapOptions = { 
zoom: 4, 
center: myLatlng, 
mapTypeId: google.maps.MapTypeId.ROADMAP 
} 

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

var marker = new google.maps.Marker({ 
position: myLatlng, 
map: map, 
title: 'My Place!' 
}); 
}  
</script> 
</head> 
<body onload="initialize();"> 
<div id="map-canvas"></div> 
</body> 
</html>

источник

2013-06-04 18:21:43 PiLHA

Я знал, что это, вероятно, связано с моим ключом API. Вот и все. Благодарю. – user2441895

Google Map API v3 не отображается

ответ

Смежные вопросы