I have created a project in which I am trying to use google maps.
The maps are shown fine in all desktop and mobile browsers, but when deployed in the Android Tablet the map section is blank in the app.
I debugged it and found that the request where I am trying to get maps i.e. https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE is not loaded.
Related
I need to create a react-native project for Android and Web environments.
For that, I need to place a map (free one) on one of the screens in my app.
I followed this guide:
https://developer.tomtom.com/blog/build-different/using-tomtom-maps-web-sdk-react-native-web-view-app
I changed a few things and I managed to load the TomTom map with WebView on Android only.
I used expo to load my app on my desktop browser and it won't display anything. Also, I can't send a reference object to the 'ref' field in WebView when using my browser. The reference works fine in Android.
After many tries I read that 'react-native-webview' does not support Web.
Basically I need a working map with locations (stores, parks etc.) and when the user will click or touch a location marker - I need to take the location details and show him a floating window with my data regarding the location.
How can I make it work on both Android and Web?
Do you think I should change to another free maps API that is more suitable for my situation?
My question is similar to How to open a mobile device's map app when a user clicks on a link?.
I have a single app developed using angular 8 which runs on desktop browser, mobile browser and inside an andriod app which uses Cordova(using Android browser) based on chromium, to show the web view (the iframe).
I have used angular google map inside my angular app and I am trying to achieve something like, if user is opening my app inside a mobile browser or an andriod app(which uses cordova web view), I need to open the native/inbuilt google map for navigation for the specified source and destination when clicked on the link. And in desktop, I am opening the google map web view.
Here is my code below:
navigate(startAddress,destAddress){
if (navigator.userAgent.match(/(Android|BlackBerry|IEMobile)/) && !this.inIframe()) {
window.open(`geo:${this.latitude},${this.longitude}?q=${startAddress},${destAddress}`);
}else if ((navigator.platform.indexOf("iPhone") != -1)) {
window.open(`http://maps.apple.com/?q="${destAddress}`, '_system')
}else {
window.open(`https://www.google.com/maps/dir/?api=1&travelmode=driving&layer=traffic&origin=${startAddress}&destination=${destAddress}`);
}
}
inIframe() {
try {
return window.self !== window.top;
} catch (e) {
return true;
}
}
But I have a problem here, when I determine my app is opened in a mobile(first if statement), I am using geo:${this.latitude},${this.longitude}?q=${startAddress},${destAddress} to open the inbuilt google map navigation. The inbuilt google map gets opened but it is not showing the navigation directly with the given source and destination.
I am not sure how to use the origin and destination address geo:properly with src and dest addresses.
I have seen Android - launch google map via web url which helped me to open the inbuilt google map directly but using my approach with start and end address, the app gets freezed and does not directly show the navigation also.
Could you please verify my approach and let me know where I am going wrong?
On an Android device:
If Google Maps app for Android is installed and active, the URL launches Google Maps in the Maps app and performs the requested action.
If the Google Maps app is not installed or is disabled, the URL launches Google Maps in a browser and performs the requested action.
https://www.google.com/maps/dir/?api=1&origin=Google+Pyrmont+NSW&destination=QVB&destination_place_id=ChIJISz8NjyuEmsRFTQ9Iw7Ear8&travelmode=walking
above is the normal request that seems fine in you code tooso you could use the link implementation for android too.
apart from that you might wanna look into url encoding and construction bars :https://developers.google.com/maps/documentation/urls/url-encoding
Save yourself the hassle and use https://github.com/dpa99c/phonegap-launch-navigator which does that for you
Tested html code and Javascript which renders maps in Chrome and Firefox. When called from our application the maps will not render and we get the Browser Not Supported Error. Tested using Chrome 62 and Firefox 56.0.2. Map API Key is valid and tested. Using Devtools see no errors in the htm and javascript code.
We use a gis server to house the code that renders the maps for Google Maps, Bing and Custom GIS map servers. Application server houses a DB that has the URL for all the map connections. These URLs are used by client applications to render maps on PC, Android and iOS devices
Fixed the problem by adding the frozen version in the javascript
Now the map tiles render. Having issue with other script errors but I thinks I can fix
I am using a cordova application, for the maps i let the clients download the "iframe"snippet from the backend of a website using ajax calls. I have to do this because the owner has to upload the code for the different maps. So the problem is this works like a charm on mobiles, but in samsung galaxy tab 3 and on iphone the maps are not showing. The iframe is charging but is empty. (i think the map is not rendering)
Check your error console, if it appears something like that:
ERROR Internal navigation rejected - <allow-navigation> not set for url='http://maps.google.com
Just put that on the config.xml
<allow-navigation href="*"/>
That worked for me
I have a little project where I want to display google now cards in a browser (Chrome) window. If you have android phone I pretty much want to replicate the google now desktop gadget but on a browser using javascript/html etc
Is the google now api available for this sort of stuff? I cant see it.