2015-06-26 1 views
0

У меня есть угловое приложение и вы пытаетесь добавить простую карту Google на страницу. Но я получаю это:Ключ API Google MAP в Angular App

> Google Maps API is required. Please register the following JavaScript 
> library http://maps.google.com/maps/api/js?sensor=true. <div 
> data-ui-view="" class="ng-scope">(anonymous function) @ 
> angular.js:11598$get @ angular.js:8548$ @ angular.js:8219v @ 
> angular.js:7726g @ angular.js:7075(anonymous function) @ 
> angular.js:6954k @ angular-ui-router.min.js:7k.compile @ 
> angular-ui-router.min.js:7$ @ angular.js:8217v @ angular.js:7726g @ 
> angular.js:7075g @ angular.js:7078(anonymous function) @ 
> angular.js:6954compile @ angular-ui-router.min.js:7$ @ 
> angular.js:8217v @ angular.js:7726g @ angular.js:7075(anonymous 
> function) @ angular.js:6954k @ angular-ui-router.min.js:7k.compile @ 
> angular-ui-router.min.js:7$ @ angular.js:8217v @ angular.js:7726g @ 
> angular.js:7075(anonymous function) @ angular.js:6954compile @ 
> angular-ui-router.min.js:7$ @ angular.js:8217v @ angular.js:7726g @ 
> angular.js:7075(anonymous function) @ angular.js:6954k @ 
> angular-ui-router.min.js:7(anonymous function) @ 
> angular-ui-router.min.js:7$get.l.$broadcast @ 
> angular.js:14707x.transitionTo.x.transition.I.then.x.transition.x.transition 
> @ angular-ui-router.min.js:7(anonymous function) @ 
> angular.js:13175$get.l.$eval @ angular.js:14388$get.l.$digest @ 
> angular.js:14204(anonymous function) @ angular.js:14427e @ 
> angular.js:4902(anonymous function) @ angular.js:5282 
> js?sensor=true&_=03344:8 Failed to execute 'write' on 
> 'Document': It isn't possible to write into a document from an 
> asynchronously-loaded external script unless it is explicitly opened. 

Ниже страница образец я скачал с https://codeload.github.com/hpneo/gmaps/ и странная вещь, что он работает нормально, если я просматриваю его на http://myapp/directroy/map.html, но это дает мне ошибку выше, если Я хочу, чтобы добраться туда через http://myapp/ng-route-to-map-page

Я пытался зарегистрировать яваскрипт SDK над code.google.com и включить библиотеку в страницу как

я это делаю не так? Я положил ключ API туда

<script type="text/javascript" src="http://maps.google.com/maps/api/js?&key=APIKEY"></script> 

Но по-прежнему получаю ту же ошибку.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>GMaps.js &mdash; Geometry overlays</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 

    <script type="text/javascript" src="../gmaps.js"></script> 
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" /> 
    <link rel="stylesheet" type="text/css" href="examples.css" /> 
    <script type="text/javascript"> 
    var map, rectangle, polygon, circle; 
    $(document).ready(function(){ 
     map = new GMaps({ 
     el: '#map', 
     lat: -12.043333, 
     lng: -77.028333 
     }); 
     var bounds = [[-12.030397656836609,-77.02373871559225],[-12.034804866577001,-77.01154422636042]]; 
     rectangle = map.drawRectangle({ 
     bounds: bounds, 
     strokeColor: '#BBD8E9', 
     strokeOpacity: 1, 
     strokeWeight: 3, 
     fillColor: '#BBD8E9', 
     fillOpacity: 0.6 
     }); 

     var paths = [[-12.040397656836609,-77.03373871559225],[-12.040248585302038,-77.03993927003302],[-12.050047116528843,-77.02448169303511],[-12.044804866577001,-77.02154422636042]]; 
     polygon = map.drawPolygon({ 
     paths: paths, 
     strokeColor: '#25D359', 
     strokeOpacity: 1, 
     strokeWeight: 3, 
     fillColor: '#25D359', 
     fillOpacity: 0.6 
     }); 
     var lat = -12.040504866577001; 
     var lng = -77.02024422636042; 
     circle = map.drawCircle({ 
     lat: lat, 
     lng: lng, 
     radius: 350, 
     strokeColor: '#432070', 
     strokeOpacity: 1, 
     strokeWeight: 3, 
     fillColor: '#432070', 
     fillOpacity: 0.6 
     }); 
     for(var i in paths){ 
     bounds.push(paths[i]); 
     } 
     var b = []; 
     for(var i in bounds){ 
     latlng = new google.maps.LatLng(bounds[i][0], bounds[i][1]); 
     b.push(latlng); 
     } 
     for(var i in paths){ 
     latlng = new google.maps.LatLng(paths[i][0], paths[i][1]); 
     b.push(latlng); 
     } 
     map.fitLatLngBounds(b); 
    }); 
    </script> 
</head> 
<body> 
    <h1>GMaps.js &mdash; Geometry overlays</h1> 
    <div class="row"> 
    <div class="span11"> 
     <div id="map"></div> 
    </div> 
    <div class="span6"> 
     <p>You can draw geometry overlays (which can be a polygon or a rectangle or a circle):</p> 
     <pre>polygon = map.drawRectangle({ 
    bounds: bounds, 
    strokeColor: '#BBD8E9', 
    strokeOpacity: 1, 
    strokeWeight: 3, 
    fillColor: '#BBD8E9', 
    fillOpacity: 0.6 
}); 
polygon = map.drawPolygon({ 
    paths: paths, 
    strokeColor: '#25D359', 
    strokeOpacity: 1, 
    strokeWeight: 3, 
    fillColor: '#25D359', 
    fillOpacity: 0.6 
}); 
circle = map.drawCircle({ 
    lat: lat, 
    lng: lng, 
    radius: 350, //350 meters 
    strokeColor: '#432070', 
    strokeOpacity: 1, 
    strokeWeight: 3, 
    fillColor: '#432070', 
    fillOpacity: 0.6 
});</pre> 
     <p>Be careful with the settings as they are not the same for each overlay.</p> 
    </div> 
    </div> 
</body> 
</html> 

ответ

3

Если вы хотите использовать карту Google внутри углового приложения вы должны использовать Angular google maps directive.

Просто установите с помощью Бауэр

bower install angular-google-maps 

Загрузка сценариев в HTML-странице

Обратите внимание, что ключ API обеспечивает Google может быть указан в самом конце ссылки maps.googleapis сценария.

<script src='/path/to/lodash[.min].js'></script> 
<script src='/path/to/angular-google-maps[.min].js?key=123...'></script> 
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script> 

Вводят зависимость в приложении

angular.module('myApplicationModule', ['uiGmapgoogle-maps']); 

Добавить карту в свой объем

$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 }; 

И добавить карту в шаблон, сделано!

<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map> 

Не забудьте указать высоту в вашем CSS

.angular-google-map-container { height: 400px; } 

Вам не нужно указывать ключ API, но если вы не ожидаете увидеть:

NoApiKeys developers.google.com/maps/documentation/javascript/...

+0

мне нужно использовать Gmaps Library – Kubi

+0

и эти первые строки, если (! (Typeof window.google === 'object' && window.google.maps)) { требуется «API Google Maps». Пожалуйста, зарегистрируйте следующую библиотеку JavaScript http://maps.google.com/maps/api/js?sensor=true. ' } вызывают это. Я думаю, что какая-то асинхронная загрузка нужна, но не могла ее понять – Kubi

0

ОК. Моя проблема здесь заключалась в том, что я дважды ссылался на карты api. Однажды на моей родительской странице, а также на странице карты -child, я включил ее в решение.

Как только я удалил тот, что был на родительской странице, моя проблема решена. Возможно, это помогает другим, имеющим ту же проблему. Просто проверьте ссылки. С другой стороны, я не считаю нужным дать ошибку, например Google Maps API is required. Please register the following JavaScript в моей ситуации.

0

Взятые из a similar question

Укажите &callback=yourCallback в запросе апи и document.write не дозвонились, где

window["yourCallback"] = function() {}; // compiler minified dot notation for me

Либо так, либо иметь тег http://maps.googleapis.com/maps/api/js скрипт внутри вашего HTML, как это сначала анализируется, как в недавно построенном iframe или ответе сервера в виде строки.

Я считаю, что это сеть запрос «ссылающаяся», который проверяется на вашем &client=yourClientID и &signature=yourHMACSHA1EncodedSignature, поэтому убедитесь, что ваш window.location.href соответствует заголовок запроса, если вы собираетесь подписать. document.referrer в IFRAME покажет URL родительского фрейма, если они не блокируют его (безопасность озабоченность некоторых сайтов)

document.write очистит ваш документ, если это произошло в более позднее время, так что это помешало

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

  • Нет связанных вопросов^_^