Using Google Maps JavaScript API with map in iFrame - google-maps

I coded a very simple Web tool that allows me to retrieve the latitude/longitude of a location clicked in Google Maps by a user.
I coded this tool with the Google Maps JavaScript API. It works very well on my computer or on a typical Web server.
It's a bit complicated to explain, but my tool "runs" inside a software called FileMaker (by Claris, a subsidiary of Apple). Unfortunately, FileMaker displays the HTML code via an iFrame (I can't do anything about that, it's a limitation of FileMaker). Google does not seem to allow to use the JavaScript API if the Web page is displayed in an iFrame.
I know Google offers an API to display a simple map via an iFrame, but that's not enough for me (I think). I need to be able to add listener for various events, etc...
Is there any way to use the Google Maps JavaScript API if the result is displayed through an iFrame?

Afternoon.
It might work for you to encode the code you've gotten as base64. like this. However you are working with the code, wrap your code in the base64 function with the base64 data type prefix. This sample comes from my implementation of Google Maps:
Case (
PatternCount ( Get ( ApplicationVersion ) ; "Web" ) ;
"data:text/html;base64," & Base64Encode ( HTML::HTML_Calc_Here ) ;
"data:text/html," & HTML::HTML_Calc_Here
)
I got this from here: https://www.soliantconsulting.com/blog/display-complex-webviewer-webdirect/
It talks about WebDirect, but it think the method still applies.
What version of FileMaker are you using?
I'm a bit surprised it's not working. I do have an (old) implementation of working with Google Maps to plot markers. Not sure if it's using the same as the geolocation. Maybe your API is different. Anyway. try the above and see if that works.

Related

Correctly importing Google Maps API into UI5 Application

I'm having trouble determining the best way to import a third party library such as the Google Maps JavaScript API into a UI5 application. I have considered the following methods so far:
Using a <script> tag in index.html, such as
<script src="https://maps.googleapis.com/maps/api/js?key=api_key"></script>
This works when testing locally but as mentioned in this SAP blog post, an app that is launched from the SAP Fiori Launchpad launches via the Component.js, not the index.html
That same blog post mentions importing a library via sap.ui.define, which is in fact what I'm doing with moment.js already in the application, which works. The problem is that the Google Maps API does not expose a global instance name / does not consist of a single JS file which can be imported, and thus this import fails. A similar question was asked in June last year but did not get answered.
A comment on that same question mentions using require.js to import the Google Maps API. This will likely work but seems like a hack. It feels like there should be some UI5-specific way to do this without having to import yet another third-party library.
Finally, this SAP blog post suggests manually creating and appending the Google Maps import <script> tag into the DOM once the window has loaded. This also seems like a hack but might be the only way to achieve this for the time being.
Any help determining the correct method of achieving this would be appreciated!
Well, I would do it like this:
Create custom control for map (better from sap.ui.core.HTML);
In init method of this control, load GoogleMaps by adding script tag to the page (no load event required here, because page is already loaded when this code executes);
In renderer of this new control, create a div where map will be rendered;
HTML Control has very important property - "preferDOM", this has to be set to true, otherwise, when UI5 rendering cycle happens, GoogleMap will be destroyed and created again which is very bad user experience in this case.
There are lots of different ways to implement google maps in UI5 apps:
If you are using SAPUI5: there are controls for generic map integration which you can configure to use google maps as provider:
https://sapui5.hana.ondemand.com/#/entity/sap.ui.vbm.GeoMap
https://sapui5.hana.ondemand.com/#/entity/sap.ui.vk.MapContainer
If you are using OpenUI5 you may be interested in this community library that wraps the google API in custom controls:
https://github.com/jasper07/openui5-googlemaps
If you are in need of something else, you can inject the JavaScript of google directly as the above poster explained and inject the map into the app but it might not be flexible enough. You can always create a simple custom control rendering an empty div for the map and connect it with the maps API to render the map via google API's.
However, pay attention to the Google TOS, they might require a license to use the maps API productively in your code.
Have Fun,
Michael
I ended up doing the following, which seems to provide the desired results:
jQuery.sap.includeScript(
"https://maps.googleapis.com/maps/api/js?key=api_key",
"includeGoogleMaps",
function () {
// Do things
}
);
I found this solution in the following Stack Overflow questions:
Using external js libraries in sapui5
UsingjQuery.sap.includeScript().then() in HCP Firori Launchpad
If there's anything wrong with the proposed solution, please let me know.

Google Maps iOS SDK - Search for places

I'm new to both iOS programming & the Google Maps iOS SDK, so apologies if this is a basic question.
I want to include a Google map, in an app and give users the ability to search for various places (restaurants, bars, gyms, etc) within a certain radius of a marker.
I know this is possible using the javascript api, but can it be done using the maps iOS SDK? I have read all of the information here and have searched Stack Overflow & Google but I can't really find anything that gives me any pointers.
Within the documentation, Google say that using a URL Scheme you can launch a native iOS app and pass in parameters for searches, directions etc. Is this what I need to be using, or is that more tailored to a webapp?
Any help, advice, or pointers to tutorials (other than the ones provided by Google) would be massively appreciated.
Cheers
The Google Maps URL Scheme can currently only be used to open the Google Maps app to search for a location or for directions. It can't search for places. Also, if your own app did this, then it would shut down your app and switch to the maps app, which may not be what you want. It will also only work if the user has installed the Google Maps app.
You would probably want to use the Google Places API to make http requests from your native app. You can request a response in either JSON or XML format. Then you'll need to parse the response, and use it to add markers to a GMSMapView using the Google Maps SDK for iOS.
This blog post describes this library which the blog post's author wrote to wrap the Google Places API. You wouldn't need most of this code, but it might give you an idea of where to start. This class is the main one which handles the requests to the places API.
Note that this library uses a third-party JSON parser - SBJsonParser. As of version 5.0 iOS includes a native JSON parser, NSJSONSerialization. So if your app's minimum supported iOS version is 5.0 or higher, you don't need to use a third-party library.

How can I use Google Maps with Processing?

I want to use Google Maps API with Processing. Until now I was just able to get Google Places data, but I'm struggling with the map itself. I know about other map options, like unfold or modestMaps, but I need Google. In particular because of the directions API in further progress. I've searched this forum and the web, without any help. I thought it should be quite
easy.
How can I use Google Maps with Processing?
I'm not sure about getting a full featured, dynamic Google Maps within your Processing app, but you might be able to modify the Processing library for the Google Weather API to instead use the Directions or Static Maps APIs. http://www.onformative.com/lab/google-weather-library-for-processing/
If you download the source and check out GoogleWeather.java you can see the constructor is calling the WeatherAPI and getting back the XML result. I think you could do the same thing except use the Directions API in it's place.
Here's a post on a Java blog about showing Static Maps API results in Java, which might be translatable into Processing: http://weblogs.java.net/blog/cajo/archive/2010/10/16/adding-google-maps-your-java-application
For something more dynamic, you might be able to adapt JXMapViewer, check out this article: http://today.java.net/pub/a/today/2007/10/30/building-maps-into-swing-app-with-jxmapviewer.html

When using the Google Places API, what is the difference between "using the JavaScript library" and "calling the API directly"?

I have seen the two forms of reference to the Google Places Library/Service, using JavaScript vs calling the API directly, a number of times, but I don't understand the difference. The Google Docs don't describe anything about two methods of accessing the API.
For example, this question talks about 2 ways of accessing the API: OVER_QUERY_LIMIT in a loop
And it appears that there is some type of direct web access taking place in this question: Querying Google Places API using jQuery
Is this something where there was an old way that involved formatting URL parameters and the new way is by utilizing the JavaScript library calls?
FINAL SUMMARY EDIT: There are two distinct ways of requesting data from Google, as described in #Dan Nissenbaum's answer below. And since my original question, the QUERY_LIMIT question referenced above has been edited to also include more information about the two options.
Perhaps you are referring to the distinction between the Google Places API that is intended for use on the SERVER (i.e., utilizing PHP to call the Google Places API directly), and using the completely different approach of the Google Places Javascript Library in which the BROWSER executes Javascript using the Javascript library provided by Google (that internally wraps calls to the Google Places API, so that you, as a Javascript programmer, only need to understand the Javascript library provided by Google, and use that)?
Here are the two scenarios.
Scenario #1: Use the API directly. For this method, you must refer to Google's API documentation for the Google Places API: https://developers.google.com/maps/documentation/places/.
Using this API works as follows (giving a simple example only). Say you want to retrieve places within 1000 meters of latitude=-27.2531166, longitude=138.8655664. You need to hit a URL as described by the API documentation: https://developers.google.com/maps/documentation/places/#PlaceSearchRequests.
In this example, the URL looks like this (it's long):
https://maps.googleapis.com/maps/api/place/search/json?location=-27.2531166,138.8655664&radius=1000&sensor=false&key=AddYourOwnKeyHere
You need a key for your personal use, which I assume you have. There are other options you can specify, such as limiting the results to restaurants, etc.
When you hit this URL, the data will be returned in either JSON, or XML format, as specified by the text json in the URL above (use the text xml for xml). This data is returned exactly like data is returned from any URL call when you hit a URL in your browser.
You can test this by simply typing the URL directly in your browser, and see the results.
To use the API directly from code, you will need to use code that hits the external URL above within code and retrieves the results within code (for example, using the PHP CURL library, or using AJAX in Javascript).
Scenario #2: You use the Javascript library that Google provides that wraps the API, so you don't need to deal with it. I'll update the answer with more details about this, if you don't know what this is.
The docs do discuss the two different approaches. The Places Library utilizes the Google Places services from within the JavaScript Google Maps API. If you are using the Google Maps API in a browser, this is probably the approach for you:
https://developers.google.com/maps/documentation/javascript/places
There is also a web service, which allows you to query directly from your application. You query it using direct http calls to Google services. If you need access to the data on your server or a mobile device, this is the approach you want to take:
https://developers.google.com/maps/documentation/places

'GOverlay is undefined' javascript error in IE 7, in spite of having loaded the Google Maps API

Despite loading the Google Maps API, via this url:
http://maps.gstatic.com/intl/en_ALL/mapfiles/276b/maps2.api/main.js
I'm getting the above error.
Why is it that when I download that URL in my browser and do a find for 'GOverlay' I'm getting zero matches?
Have Google removed this from their API or something, causing all my code to break?
GOverlay is an essential part of the Google Maps API implementation, see the V2 documentation for GOverlay here.
The reason for you not finding "GOverlay" when searching through the Javascript file you provided is simply that the Google Maps API consists of several Javascript files, not all of the code is in main.js. Additionally the code is obfuscated which could mean the build GOverlay by concatenating some crazy strings.
On a basic note: Why do you want to use some static JS file? The offical way to use the Google Maps API is using a key, which you have to obtain by registering with your Google account. So actually the URL you should be using is:
http://maps.google.com/maps?file=api&v=2&key=abcdefg
Or use the AJAX loader as seen on the Google Maps V2 documentation here.
The code is actually loaded asynchronously.
Post a link to your page - it is more than likely that there's some issue with your code.