admin管理员组文章数量:1401281
I have an angular app and trying to add a simple google map to a page. But I'm getting this:
> Google Maps API is required. Please register the following JavaScript
> library . <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:7kpile @
> angular-ui-router.min.js:7$ @ angular.js:8217v @ angular.js:7726g @
> angular.js:7075g @ angular.js:7078(anonymous function) @
> angular.js:6954pile @ 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:7kpile @
> angular-ui-router.min.js:7$ @ angular.js:8217v @ angular.js:7726g @
> angular.js:7075(anonymous function) @ angular.js:6954pile @
> 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&_=1435321003344: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.
The page below is a sample I downloaded from / and the weird thing is that it works OK if I browse it over http://myapp/directroy/map.html but it's giving me the error above if I want to reach there over http://myapp/ng-route-to-map-page
I tried to register the javascript sdk over code.google and include the library into the page as
Am I doing this wrong? I put the API Key to there
<script type="text/javascript" src="?&key=APIKEY"></script>
But still getting the same error.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js — Geometry overlays</title>
<script type="text/javascript" src=".6.4/jquery.min.js"></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="../gmaps.js"></script>
<link rel="stylesheet" href=".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 — 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>
I have an angular app and trying to add a simple google map to a page. But I'm getting this:
> Google Maps API is required. Please register the following JavaScript
> library http://maps.google./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.pile @
> angular-ui-router.min.js:7$ @ angular.js:8217v @ angular.js:7726g @
> angular.js:7075g @ angular.js:7078(anonymous function) @
> angular.js:6954pile @ 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.pile @
> angular-ui-router.min.js:7$ @ angular.js:8217v @ angular.js:7726g @
> angular.js:7075(anonymous function) @ angular.js:6954pile @
> 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&_=1435321003344: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.
The page below is a sample I downloaded from https://codeload.github./hpneo/gmaps/ and the weird thing is that it works OK if I browse it over http://myapp/directroy/map.html but it's giving me the error above if I want to reach there over http://myapp/ng-route-to-map-page
I tried to register the javascript sdk over code.google. and include the library into the page as
Am I doing this wrong? I put the API Key to there
<script type="text/javascript" src="http://maps.google./maps/api/js?&key=APIKEY"></script>
But still getting the same error.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js — Geometry overlays</title>
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google./maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../gmaps.js"></script>
<link rel="stylesheet" href="http://twitter.github./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 — 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 Answers
Reset to default 3If you want to use a Google map inside an Angular application you should use the Angular google maps directive.
Simply install using bower
bower install angular-google-maps
Load scripts in your HTML page
Note that the API key provided by Google can be specified at the tail end of the maps.googleapis script reference.
<script src='/path/to/lodash[.min].js'></script>
<script src='/path/to/angular-google-maps[.min].js?key=123...'></script>
<script src='//maps.googleapis./maps/api/js?sensor=false'></script>
Inject dependency in your app
angular.module('myApplicationModule', ['uiGmapgoogle-maps']);
Add a map to your scope
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
And add a map to your template, done!
<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
Don't forget to specify height in your CSS
.angular-google-map-container { height: 400px; }
You don't have to specify API key but if you don't, expect to see:
NoApiKeys developers.google./maps/documentation/javascript/…
OK. My problem here was I was referencing the maps api twice. Once in my parent page and also in the map page -child- I included it in resolve.
Once I removed the one in the parent page, my problem resolved. Maybe, it helps others having the same issue. Just check the references. On the other hand, I don't find it proper to give an error such as Google Maps API is required. Please register the following JavaScript in my situation.
Taken from a similar question
Specify &callback=yourCallback in the api request and document.write won't get called, where
window["yourCallback"] = function () {}; // piler minified dot notation for me
Either that, or have the http://maps.googleapis./maps/api/js script tag inside of your HTML as it's getting parsed the first time, like in a newly constructed iframe or server response as a string.
I believe it's the network request "referrer" which is checked against your &client=yourClientID and &signature=yourHMACSHA1EncodedSignature, so make sure your window.location.href matches the request header if you're going to sign it. document.referrer in an iframe will show the parent frame's url unless they block it (security concern for some sites)
document.write would clear your document if it happened at a later time, so it's prevented
本文标签： javascriptGoogle MAP API Key in Angular AppStack Overflow
版权声明：本文标题：javascript - Google MAP API Key in Angular App - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744261892a2597756.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论