I am working on a project relying on AngularJS where I need to locate all airports in the world and link them with lines.
To do so, I searched for some existing projects that set angular directives to embed Google Maps API into my project: Namely Angular-ui-map (https://github.com/angular-ui/ui-map), Angular-google-maps (https://github.com/nlaplante/angular-google-maps) and AngularGM (https://github.com/dylanfprice/angular-gm)
But the problem is that none of those projects talks about Google Maps Polylines !
Anyone has already been able to use the complete set of Google Maps features ? Or I should create my own directives to achieve this ?
Thanks a lot.
I've used another project called angularjs-google-maps which claims to
Expose all original Google Maps V3 api to the user.
Indeed it does provide a directive for polylines (example from documentation, works for me):
<map zoom="11" center="[40.74, -74.18]">
<shape id="polyline" name="polyline" geodesic="true"
stroke-color="#FF0000" stroke-opacity="1.0" stroke-weight="2"
path="[[40.74,-74.18],[40.64,-74.10],[40.54,-74.05],[40.44,-74]]" ></shape>
</map>
Related
I am trying to add google maps Embed API to my site. I keep getting this error:
"The Google Maps API server rejected your request. This IP, site or mobile application is not authorized to use this API key."
The API key is correct. I have Static Map turned on. Two of the most common trouble shots.
Code is formatted as follows:
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=XXXXXXXXXXXXXXXXXXXX&q=Space+Needle,Seattle+WA">
</iframe>
I put the < infront of iframe in my code. Any help would be great. Thanks!
Any one have any suggesions?
Static Maps and the Embed API are different things and controlled differently. Do what the message suggests (in its round about way) and turn on the Embed API in the Google API console.
Google Maps Embed API
Static Maps API
I found that the placeholder in Google's HTTP referrers inputs of <https (or) http>://*.example.com/* are misleading, because it suggests that the whole <https (or) http> thing is parsed as some actual "or" statement. In reality, it is not.
You must specify your protocol exactly, such as https://*.example.com. And, if you need support for both protocols, you must specify them as unique rows.
Hope that helps someone out there.
I already registered my project with Google to get an API_KEY.
I already enable the Google MAP API in the API console. See here
I already set the referred to my JSFiddle Account.
[ http://jsfiddle.net/bheng/* ]
Here the link LINK
I am not sure why, it didn't load the map while it should.
What am I doing wrong ?
You are not including the Google Maps Javascript API. Note that you don't need a key (particularly for jsfiddle). Add this to the "External Resources":
https://maps.googleapis.com/maps/api/js
And add JQuery under "Frameworks & Extensions":
http://jsfiddle.net/9wc30ndf/2/
But you need to read the message also (you are missing the "q=")
http://jsfiddle.net/9wc30ndf/3/
You need to use *fiddle.jshell.net/bheng/* as the referrer expression for your browser-API-key since jsfiddle loads the JS sources from this domain (see referer request-header).
I am creating an app that uses google map. i inserted the map api key inside the html page.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api /js?key=AIzaSyDcvUkjiKRkJ2zV8cYElZy55JLZDjiL9g8&sensor=false"></script>
i keep getting error saying " Google has disabled use of the Maps API for this application. The provided key is not valid Google API key, or it is not authorized for google Maps Javascript API v3 on this site ". i just followed whatever they had mentioned in here
https://developers.google.com/maps/documentation/javascript/tutorial#api_key
i don't have any problem when run this code in my html. Only problem is that some of the map page don't render out properly. Which version is better to use V2 or V3 ?
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
i am kinda confused. Can someone help me out what i doing wrong or what do i need to do. Since my app is totally based google map. Thanks
I see two possibilities for you:
Either you use this line in your code <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=CHANGE_YOUR_KEY_HERE&sensor=false"></script> and you generate a new key for you application: https://developers.google.com/maps/documentation/javascript/tutorial#api_key
(on the screenshot you can see the link "Generate new key...")
Or you use this line without bothering with having a key. (for example: http://jsfiddle.net/LZmQ2/)
I wanted to include Google maps in a module of OpenERP. As far as I know until I use iframe tag of HTML I wont be able to show Google maps in OpenERP but in OpenERP I have only two kinds of file one is .xml and other is .py. Now how am I supposed to add iframe with only these two file in hand. Any ideas ?
Thank you
There is module called google_map in openerp addons. Install that module to get the google map inside openerp and if needed make the necessary changes by creating your own custom module
In the 2012 OpenERP Days one of the presentations demonstrated how to craete a custom Webclient widget. The example used was a geo widget that could display and address as a Google Map indide a froam view. The code is available here.
You can try out Camptocamp's geoengine addon. This addon is meant to display data from the OpenERP database in a custom view using a map. It does not use an iframe to embed a googlemap, afaik.
https://launchpad.net/geospatial-addons
This is an example for openning the map in a new link where the html file which contains the html and java script code for the google map located in
static/src/googlemaps/get_place_from_coords.html
and the following method will be called when clicking the open google map button in the openerp interface:
def button_open_google(self, cr, uid, ids, context=None):
for place in self.browse(cr, uid, ids):
url="/tms/static/src/googlemaps/get_place_from_coords.html?" + str(place.latitude) + ','+ str(place.longitude)
return { 'type': 'ir.actions.act_url', 'url': url, 'nodestroy': True, 'target': 'new' }
I noticed that I am unable to load the google maps js libraries using labjs. I.e.
$LAB.script("//maps-api-ssl.google.com/maps/api/jslibraries=geometry&v=3&sensor=false").wait()
is not working for me (library is not available in my code) and I have to explicitely do
<script src="//maps-api-ssl.google.com/maps/api/js?libraries=geometry&v=3&sensor=false"></script>
Any idea why?
LAB.js can load Google Maps as long as you include a callback parameter, e.g.
window.noop = function() {};
$LAB.script("//maps-api-ssl.google.com/maps/api/jslibraries=geometry&v=3&sensor=false&callback=noop").wait()
Two urls are not the same. Did you check it?