labjs not loading google maps api? - google-maps

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?

Related

Google Map API integration with Oracle Commerce Cloud

I am trying to integrate Google Map API in the Oracle Commerce Cloud template file for a particular functionality. When I tried to use the below tag in my template file,
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"></script>
I got an error message "Named entity expected. Got none." for the & symbol in the src.
I tried using & and %26 instead of &, there was no error, but I could not see the script tag in rendered HTML (Used Inspect option in the browser) and the map is also not rendering.
Is there a way to use google map api in occ template file?
Try making this call in your javascript. And then with Knockout you'll be able to manipulate where you want to display the map.
If you have multiple pages you can use global, otherwise you can use only the javascript of the widget you want.

Missing API Key in google maps

I have a Drupal theme whith a google maps. But the map is missing an api key, and when I open my Drupal page I see this.
I have a Drupal theme containing a gmap.js file.
Is it possible to change it there.
I tried writing api=API_KEY; of course I replaced API_KEY with my own key.
Do anyone know?
It's key=API_KEY.
This is an example from Google:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>

How to properly load google map api in JSFiddle ?

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).

google map api v3 in app

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/)

Use all google maps API features in AngularJS

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>