I am trying to show Google map in webview, but it is saying
Google Maps Platform rejected your request. Invalid request. Invalid 'pb' parameter.
But when I am rendering the same iframe on web browser, it is working perfectly
here is what I am trying to render in webview, this is the string stored in variable iframeData
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<body>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14988.154038971099!2d57.510438!3d-20.090677!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xc479c0ed4774c8e7!2sThe+Westin+Turtle+Bay+Resort+%26+Spa%2C+Mauritius!5e0!3m2!1sen!2smu!4v1513055435928" width="340.0" height="250" frameborder="0" style="border:0" allowfullscreen></iframe>
</body>
</html>
And this is my Android code to render this iframe into webview
String iframeData = //look above
WebView webViewMap = (WebView) rootView.findViewById(R.id.webViewMap);
WebSettings settings = webViewMap.getSettings();
settings.setJavaScriptEnabled(true);
settings.setBuiltInZoomControls(true);
settings.setSupportZoom(false);
settings.setUseWideViewPort(false);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
settings.setAllowUniversalAccessFromFileURLs(true);
}
settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
webViewMap.loadData(iframeData, "text/html", null);
The URL inside iframe
in your example looks like a link obtained from share location on Google Maps web site. Typically this URL shouldn't be treated as Google Maps Platform product. However, for some reason Google treats it as Google Maps Platform in the WebView
component.
I think this is a bug on Google side.
The workaround is replacing URL for share with URL from Google Maps Embed API. In this case you will have correct Google Maps Platform link and it should work as expected. Note that you will need a valid API key in order to use Google Maps Embed API.
The code snippet is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<body>
<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=The+Westin+Turtle+Bay+Resort+%26+Spa%2C+Mauritius&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU" allowfullscreen></iframe>
</body>
</html>
You should replace my API key with yours.
I hope this helps!