I'm trying to load both the main api and a library (Places) into my web application. According to the documentation, I'm supposed to load the Places library with:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
But when I use this in combination with my script tag to load the main api, it gives me an error that I'm loading the api twice. How could I load both in the same script tag?
Since you've specified the places in the libraries param, you only need that one script. According to the docs:
The JavaScript code for the Maps API is loaded via a bootstrap URL of the
form http://maps.googleapis.com/maps/api/js.
This bootstrap request loads all of the main Javascript objects and symbols
for use in the Maps API. Some Maps API features are also available in
self-contained libraries which are not loaded unless you specifically
request them.
Related
I'm trying to load Bing maps using OpenLayers 3 in a Windows application. However, i'm facing the following error:
APPHOST9601: Can’t load <https://dev.virtualearth.net/REST/v1/Imagery/Metadata/AerialWithLabels?uriScheme=https&include=ImageryProviders&key=Ao9wqOnCiDvABI4LnDdguzUE0lbF1PiAcDSYHkKdezCage1xuUXY2emXAuHzdOUX&jsonp=olc_9>. An app can’t load remote web content in the local context.
I've tried adding the following line to the ContentUriRules in the manifest without success:
<Rule Match="https://dev.virtualearth.net/*" Type="include" />
I do not want to load the OpenLayers map in an iframe, because then I have to use the postMessage function to pass data to the iframe from classes outside the iframe. Is there a workaround to get the Bing maps working?
Without using an iframe, the Windows app will not let you to load any external script references. I recommend taking a look at using Apache Cordova which hosts everything in an iframe and also gives you access to the native features of the Windows app.
I've managed to fix the issue by adding a function to the OL library that loads an url containing JSON data without using JSONP. Now the data is seen as JSON instead of Javascript (inherent to JSONP) and thus the security restrictions do not apply anymore.
The loading time can be long for this request. I wonder if we could avoid making it every time the window is refreshed.
I also have a problems with stereographic projection but otherwise it's OK.
So I am using Google Maps for an autocomplete text input for cities. The script I'm calling has an src like this:
https://maps.googleapis.com/maps/api/js?libraries=places&callback=initAutocomplete&types=(cities)
I see in the network tab that this actually downloads quite a few external google scripts:
common.js
util.js
controls.js
places_impl.js
stats.js
Collectively, these scripts are over 100kb... That's equal to the size of my entire application (gzipped). Is this really necessary just for a places autocomplete? Is there any way to pass params into the request url that control what is downloaded?
Those are all scripts which Google Maps JS API need to function properly, to display Map, etc. But if you want ONLY Places Autocomplete, and you don't even want to display the map, then there is a way for you to not download ANY libraries.
Just make a request to Google Places API, something like:
https://maps.googleapis.com/maps/api/place/autocomplete/json?input=TEXT&types=(cities)&language=en&key=YOUR_API_KEY
for autocomplete results every time user inputs something into you search input box (or preferably with some throttling). Google Places API is not part of Google Maps JS API you are using in your project, it's a separate API only for Places.
I'm writing a Chrome extension to add Google Maps autocomplete to Google Calendar's new event location input. I'm trying to load the library in the extension context but it blocks saying [blocked] The page at domain.com ran insecure content from anotherdomain.com.
I of course have added http://anotherdomain.com to the manfest.json in the "permissions" key. In order to load the actual places library I just downloaded it from http://maps.googleapis.com/maps/api/js?libraries=places&sensor=true, since i didn't know how to add it directly to the extension.
So far, it seems it is impossible, so I just used the JSON API and jQuery UI's autocomplete. Here's my trivial implementation https://gist.github.com/3623683
To use Google Maps API you fetch their api js file with:
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>
Then I use javascript on my page to interact with this API.
I wonder what is going on in the background that I don't see.
Is this file using javascript to render the Google map or is it fetching jpeg files when I zoom in and out?
Id suggest installing Firebug, a plugin for Firefox, that will let you see exactly what is going on that you don't see (click the 'Net' tab).
In short though, yes, Google Maps API uses javascript both to render the map and fetch jpeg files when you zoom in and out.
I would like to create a Web App for device. For that I would have some script being stored on device, instead of downloading them all time when I start application. As far as I saw including a GoogleMaps API makes some additional request for javascript files. Is there any way of having all of them taken directly from local store? Or is this always have to refeer to google web address? Thanks for any answers here!
No, you always must load them from the Google site. They offer no way to run Google Maps locally. The GMaps scripts are generated on the fly, based upon (among others, I'm sure) the HTTP_REFERER header of the request. That's how they can bind an API key to a specific website.