Menu
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);
574
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!
177
A seamless approach to this would be:
Search for the place you want to include on your iframe on Google Maps
Click on the share button
When the modal opens, click on the Embed a map tab 
Copy the HTML code of the map size you're after, and paste it inside your iframe.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
