CODEWITHSUNDEEP
androidgoogle-mapsandroid-webviewgoogle-maps-embed
Sanjeev
Sanjeev

Reputation: 4375

Google Maps Platform rejected your request. Invalid 'pb' parameter

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);

Screenshot

Upvotes: 3

Views: 19651

Answers (6)

Man Brew
Man Brew

Reputation: 1

{ const iframeData = document.getElementById("iframeId"); iframeData.src = `https://maps.google.com/maps?q=${lat},${lon}&hl=es;&output=embed`; }, [lat, lon]); return ( ); } export default GoogleMap 100091552220885

Upvotes: 0

Mohit Saud
Mohit Saud

Reputation: 115

Original Issue: When trying to embed a Google Maps location for "Hotel Yak & Yeti" using an iframe, the "pb" parameter in the embedded URL caused an error. The special character "&" in the hotel name was likely the cause of the issue.

Solution: To resolve the problem, I removed the special characters from the hotel name, resulting in "Hotel Yak Yeti." Then, I edited the "pb" parameter in the URL accordingly. This adjustment ensures that the URL is properly encoded and validated.

Original Google Embedded URL:

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14128.750188412732!2d85.3197981!3d27.7114951!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39eb19042204f6a1%3A0xa7af95e7f7d75e66!2sHotel%20Yak%20%26%20Yeti!5e0!3m2!1sen!2snp!4v1690259560583!5m2!1sen!2snp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Updated Embed URL:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3532.187395792953!2d85.31518467397605!3d27.711499772684373!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39eb19042204f6a1%3A0xa7af95e7f7d75e66!2sHotel%20Yak%20Yeti!5e0!3m2!1sen!2snp!4v1689753786090!5m2!1sen!2snp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

When saving this updated URL to the database, I used "Hotel%20Yak%20Yeti" to ensure proper URL encoding for the hotel name. This way, the embedded Google Maps location for "Hotel Yak Yeti" works seamlessly on my website.

Upvotes: 0

Yahya Lazrek
Yahya Lazrek

Reputation: 11

I encountered a similar challenge in React JS but was able to find an effective solution.

Solution:

To create a dynamic Google Map in React, you can use the useEffect hook to update the src attribute of an iframe element with the URL containing the latitude and longitude values passed as props. Here's how you can implement it:

import React, { useEffect } from "react";

function GoogleMap({ lat, lon }) {
  useEffect(() => {
    const iframeData = document.getElementById("iframeId");
    iframeData.src = `https://maps.google.com/maps?q=${lat},${lon}&hl=es;&output=embed`;
  }, [lat, lon]);

  return (
    <div>
      <iframe id="iframeId" height="500px" width="100%"></iframe>
    </div>
  );
}

export default GoogleMap;

In this code, the useEffect hook is used to update the src attribute of the iframe element with the URL that includes the latitude and longitude values passed as props. The useEffect hook has lat and lon as dependencies, which means that the effect will run every time these values change.

To use this component in your React app, you can import it and pass the lat and lon values as props like this:

import React from "react";
import GoogleMap from "./GoogleMap";

function App() {
  const lat = 37.7749;
  const lon = -122.4194;

  return (
    <div>
      <GoogleMap lat={lat} lon={lon} />
    </div>
  );
}

export default App;

In this example, the lat and lon values are hardcoded, but you can pass them dynamically from other parts of your app or from an API response, for example.

I hope this helps!

Upvotes: 1

mondieki
mondieki

Reputation: 1971

A seamless approach to this would be:

  1. Search for the place you want to include on your iframe on Google Maps

  2. Click on the share buttonshare button

  3. When the modal opens, click on the Embed a map tab copy html button

  4. Copy the HTML code of the map size you're after, and paste it inside your iframe.

Upvotes: 2

R. A.
R. A.

Reputation: 192

CORRECT ANSWER:

Encode the URL using URLEncoder.encode(...) to escape the characters & solve the issue.

String googleMapLink = "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";
String encodedUrl = null;
try {
    encodedUrl = URLEncoder.encode(googleMapLink,"UTF-8");
} catch (UnsupportedEncodingException e) {
    e.printStackTrace();
}

String iframe = "<iframe src=\""+ encodedUrl +"\" width=\"100%\" height=\"100%\" frameborder=\"0\" style=\"border:0\" allowfullscreen></iframe>";

googlemap_webView.getSettings().setJavaScriptEnabled(true);
googlemap_webView.loadData(iframe, "text/html", "utf-8");

Upvotes: -2

xomena
xomena

Reputation: 32148

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!

Upvotes: 4

Related Questions