Is it possible to call google map API in H5 scripts ?

Hello,

I'm quite new to H5 developement, and I'd like to know if it's possible to call a googe map api in order to get locationinformations maps.googleapis.com/.../json ?

In ISO we could use HttpWebRequest and HttpWebResponse to call this API. The API returns JSON objects, so we are facing CORS and CORB issues in H5.

We can't use ION API either (I think there might be a way to wrap google API into ION API ?) because we don't run MUA 10.4 but an older version.

Any help would be greatly appreciated !

Thank you in advance,

Yazan

Find more posts tagged with

Accepted answers

Legacy Contributor

Hi,

I found the documentation of the API from Google: https://developers.google.com/maps/documentation/places/web-service/search

It states this in the beginning:

The Places API is also available with the Java Client, Python Client, Go Client and Node.js Client for Google Maps Services. The Places API and the client libraries are for use in server applications.

If you're building a client-side application, take a look at the Places SDK for Android, the Places SDK for iOS, and the Places Library, Maps JavaScript API.

So you are not allowed to call the URL from a web endpoint and they would know that it comes from a browser and no there is no "work around", unless you build a server endpoint with code that calls the API and then you call your own service. But they have an API for this for web apps as well. You need to use Places Library, Maps JavaScript API (https://developers.google.com/maps/documentation/javascript/places )

Note here that:

API key restrictions are now being enforced for the Places Library, Maps JavaScript API, effective September 16, 2019. If you have applied API restrictions to the API keys used with Places Library, Maps JavaScript API and have not selected both Places API and Maps JavaScript API in your API restrictions list, you will begin to receive errors. See Getting Started with the Places Library for the required project settings.

Don't forget to mark the questions as answered.

Regards

Karin

All comments

Legacy Contributor

Hi,

I found the documentation of the API from Google: https://developers.google.com/maps/documentation/places/web-service/search

It states this in the beginning:

If you're building a client-side application, take a look at the Places SDK for Android, the Places SDK for iOS, and the Places Library, Maps JavaScript API.

Note here that:

Don't forget to mark the questions as answered.

Regards

Karin

Legacy Contributor

Thank you Karin, I'll consider using the JS library.

Best regards

Rene Bottern

Hi Yazan,

here's an example of what I did to do extract the Distance from the API in an IEC (BOD) Map, hope it helps.

//Set From Location
String fromLocString = iTOWN_Whs.trim().replaceAll("\s+","+") + "," + iECAR_Whs.trim() + "," + iCSCD_Whs.trim();
//Set To Location
String toLocString = iTOWN_CO.trim().replaceAll("\s+","+") + "," + iECAR_CO.trim() + "," + iCSCD_CO.trim();

java.net.URL url = new java.net.URL("">maps.googleapis.com/.../json + fromLocString + "&destinations=" + toLocString + "&key=**add your personal Google Key here**");
java.net.HttpURLConnection conn = (java.net.HttpURLConnection) url.openConnection();
conn.setRequestMethod("GET");
String line;
java.io.BufferedReader reader = new java.io.BufferedReader(
new java.io.InputStreamReader(conn.getInputStream()));

//Find Miles
String pretext = "text" : "";
String subtext = " mi",";

while ((line = reader.readLine()) != null) {

if (line.indexOf(pretext) > 0 && line.indexOf(subtext) > 0 && (line.indexOf(pretext)+9) < line.indexOf(subtext)) {

oDistance = line.substring(line.indexOf(pretext)+9, line.indexOf(subtext));
oDistance = oDistance.trim().replaceAll(",",""); //Transportation Mileage

}

Legacy Contributor

Hello Rene,

Thanks for the help.

I've finally figured out how to use the Google Map API in H5 (in javascript / JQuery)

The code looks like this, if it can be any help for someone here : I call the findPlaceFromQuery method with a parameter ( MYADRESS, for example : 'musee du louvre Paris') and the service responds with the place_id, formatted_adresse etc.Then I display the place_Id)

$.getScript("">maps.googleapis.com/.../js, textStatus) {
var request = { query: MYADRESS, fields: ['place_id', 'formatted_address', 'geometry', 'name'] };
var service = new google.maps.places.PlacesService(document.getElementById('map'));

service.findPlaceFromQuery(request, function(place, status) { console.log('Place details:', place); alert(place[0].place_id); });

})
.fail(function(jqxhr, settings, exception) {
alert('Erreur appel API Google rechercherId');
});

Yazan

Copyright © 2025 Infor. All rights reserved.