can I use the HTML widget to parse a google maps embed?

Question

I am trying to put a google map in my application using flutter so I tried to use the HTML widget to parse an iframe that holds the embed link from google maps even tho I am using an iframe the emulator keeps telling me to use an iframe. That is my code:

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:login/components/isFav_button.dart';
import 'package:login/constants.dart';

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Stack(
            children: [
              Image.asset(
                'assets/images/cheeseCake.jpg',
                fit: BoxFit.cover,
              ),
              Positioned.fill(
                  child: Align(
                alignment: Alignment.topRight,
                child: FavoriteButton(),
              ))
            ],
          ),
          Text(
            'Description',
            style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.w600,
                fontFamily: 'Proxima',
                shadows: [
                  Shadow(
                      offset: Offset(3, 3),
                      blurRadius: 3,
                      color: navyBlue.withOpacity(0.5))
                ]),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 8, right: 6),
            child: Text(
              'Look no further for a creamy and ultra smooth classic cheesecake.' +
                  '\nPaired with a buttery graham cracker crust, no one can deny it' +
                  's simple decadence.',
              style: TextStyle(
                color: Colors.black,
                fontSize: 18,
                fontFamily: 'Proxima',
                fontWeight: FontWeight.w600,
              ),
            ),
          ),
          SizedBox(
            height: size.height * 0.01 / 2,
          ),
          Text(
            'Location',
            style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.w600,
                fontFamily: 'Proxima',
                shadows: [
                  Shadow(
                      offset: Offset(3, 3),
                      blurRadius: 3,
                      color: navyBlue.withOpacity(0.5))
                ]),
          ),
          Html(
            data:
                '''<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3453.6684889591766!2d31.232986914593635!3d30.046367225437855!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1458418bb92b5ad9%3A0xe0a4c8f95a81ac3!2zTGEgcG9pcmUgQ2FmZSDZhNin2KjZiNin2LE!5e0!3m2!1sen!2seg!4v1626118298155!5m2!1sen!2seg" 
                    width="600" 
                    height="450" 
                    style="border:0;" 
                    allowfullscreen="" 
                    loading="lazy">
                    </iframe>''',
          ),
        ],
      ),
    );
  }
}

and this is the output:

this is my dependencies:

dependencies:
  flutter:
    sdk: flutter
  flutter_html: ^2.1.0
  webview_flutter: ^2.0.4
  cupertino_icons: ^1.0.2
  flutter_svg: ^0.22.0

the debug console:

E/BufferQueueProducer(16410): [SurfaceTexture-0-16410-3] setAsyncMode: BufferQueue has been abandoned
E/BufferQueueProducer(16410): [SurfaceTexture-0-16410-3] cancelBuffer: BufferQueue has been abandoned
3
W/zygote  (16410): Attempt to remove non-JNI local reference, dumping thread
I/chatty  (16410): uid=10084(com.example.login) identical 1 line
5
W/zygote  (16410): Attempt to remove non-JNI local reference, dumping thread

so is it even possible to use a google maps embed the way I am trying to use it?

Answer 1

HTMLWidget reads iframe tags perfectly, but if the src value is the direct URL of a Google Maps embed, it will give us an error. My solution was to create a complete page that only includes the Google Maps embed iframe. In the iframe's URL, I used the URL of this new page.

instead of:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d40751.77874464102!2d-72.33276177560138!3d-50.32950924136887!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xbdbb0cbeffd34161%3A0x5d60b0a2eef72a37!2sKayak+Santa+Cruz!5e0!3m2!1ses-419!2sar!4v1559132030636!5m2!1ses-419!2sar" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

I created a googlemaps.html file and then used the URL as the value for the iframe's src attribute (e.g.: {url}/googlemaps.html):

<!doctype html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Google Maps</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d40751.77874464102!2d-72.33276177560138!3d-50.32950924136887!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xbdbb0cbeffd34161%3A0x5d60b0a2eef72a37!2sKayak+Santa+Cruz!5e0!3m2!1ses-419!2sar!4v1559132030636!5m2!1ses-419!2sar" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>

My new iframe tag:

<iframe src="{url}/googlemaps.html" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>