2015-12-09 3 views
-1

Проблема: Я пытаюсь использовать образец API карт Google v3 без ключа API, и он не отображает. (Это делает, если я использую ключ). Кто-нибудь знает, почему?Пример Google Map API v3 с их сайта не работает без ключа API, но работает с ключом. Что я делаю не так?

я решил использовать этот пример (https://developers.google.com/maps/documentation/javascript/examples/polyline-simple)

Для того, чтобы заставить его работать без ключа я заменил этот скрипт:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap"></script> 

с этим другим скриптом

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

Это код:

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <title>Simple Polylines</title> 
 
    <style> 
 
     html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     } 
 
     #map { 
 
     height: 100%; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="map"></div> 
 
    <script> 
 

 
// This example creates a 2-pixel-wide red polyline showing the path of William 
 
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and 
 
// Brisbane, Australia. 
 

 
function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 3, 
 
    center: {lat: 0, lng: -180}, 
 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
 
    }); 
 

 
    var flightPlanCoordinates = [ 
 
    {lat: 37.772, lng: -122.214}, 
 
    {lat: 21.291, lng: -157.821}, 
 
    {lat: -18.142, lng: 178.431}, 
 
    {lat: -27.467, lng: 153.027} 
 
    ]; 
 
    var flightPath = new google.maps.Polyline({ 
 
    path: flightPlanCoordinates, 
 
    geodesic: true, 
 
    strokeColor: '#FF0000', 
 
    strokeOpacity: 1.0, 
 
    strokeWeight: 2 
 
    }); 
 

 
    flightPath.setMap(map); 
 
} 
 

 
    </script> 
 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 
    </body> 
 
</html>

Но это не делает. Любая идея, что я делаю неправильно? Благодаря!

+0

Просьба представить [Минимальный, завершенный, проверенный и читаемый пример] (http://stackoverflow.com/help/mcve), который демонстрирует проблему. – geocodezip

+0

В дополнение к более сложному примеру вы получаете конкретные ошибки js? –

+0

@ Locke125 никаких особых ошибок. Это наверняка скрипт о ключе Google API, потому что, когда я заменяю этот бит ключом API карт, он работает –

ответ

0

Переместить скрипт google maps в голову. Он должен быть включен, прежде чем вы его назовете.

Позвоните в функцию initMap, чтобы запустить настроенную вами функцию. function initMap() был определен, но вы не запускали его до тех пор.

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Simple Polylines</title> 
    <style> 
     html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 

     #map { 
      height: 100%; 
     } 
    </style> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
</head> 
<body> 
    <div id="map"></div> 
    <script> 

// This example creates a 2-pixel-wide red polyline showing the path of William 
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and 
// Brisbane, Australia. 

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 3, 
    center: {lat: 0, lng: -180}, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    }); 

    var flightPlanCoordinates = [ 
    {lat: 37.772, lng: -122.214}, 
    {lat: 21.291, lng: -157.821}, 
    {lat: -18.142, lng: 178.431}, 
    {lat: -27.467, lng: 153.027} 
    ]; 
    var flightPath = new google.maps.Polyline({ 
    path: flightPlanCoordinates, 
    geodesic: true, 
    strokeColor: '#FF0000', 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
    }); 

    flightPath.setMap(map); 
} 

initMap(); 
    </script> 
</body> 
</html> 
+0

Большое вам спасибо! Вы потрясающий: D –