Iframe React Google

Topic: Iframe React Google

Renovo asked 6 years ago

Expected behavior iframe for google

Actual behavior tried using the Jquery version but did not work for react

Resources (screenshots, code snippets etc.) I have React PRO. How do I use Iframe for google map url (below)?

https://www.google.com/maps/dir/detroit/cleveland/Buffalo,+NY/Detroit,+MI/@42.2803295,-82.2987942,8z/data=!3m1!4b1!4m26!4m25!1m5!1m1!1s0x8824ca0110cb1d75:0x5776864e35b9c4d2!2m2!1d-83.0457538!2d42.331427!1m5!1m1!1s0x8830ef2ee3686b2d:0xed04cb55f7621842!2m2!1d-81.6943605!2d41.49932!1m5!1m1!1s0x89d3126152dfe5a1:0x982304a5181f8171!2m2!1d-78.8783689!2d42.8864468!1m5!1m1!1s0x8824ca0110cb1d75:0x5776864e35b9c4d2!2m2!1d-83.0457538!2d42.331427!3e0

Please paste code snippet if possible. Do I need to have google map token to embed?

Add comment

Anna Morawska staff answered 6 years ago

0 0 Best answer

Hi @Renovo,

you have to use the "embed" link URL. Please try the code snippet below:

import React, { Component } from 'react';
import { MDBIframe } from 'mdbreact'

class App extends Component {
  render() {
    return (
      <>
        <MDBIframe src=" https://www.google.com/maps/embed?pb=!1m40!1m12!1m3!1d3023547.9783484684!2d-83.39555268685903!3d42.26392947872586!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m25!3e0!4m5!1s0x8824ca0110cb1d75%3A0x5776864e35b9c4d2!2sdetroit!3m2!1d42.331427!2d-83.0457538!4m5!1s0x8830ef2ee3686b2d%3A0xed04cb55f7621842!2scleveland!3m2!1d41.49932!2d-81.6943605!4m5!1s0x89d3126152dfe5a1%3A0x982304a5181f8171!2sBuffalo%2C+NY!3m2!1d42.886446799999995!2d-78.8783689!4m5!1s0x8824ca0110cb1d75%3A0x5776864e35b9c4d2!2sDetroit%2C+MI!3m2!1d42.331427!2d-83.0457538!5e0!3m2!1sen!2spl!4v1558337053762!5m2!1sen!2spl" />
      </>
    );
  }
}

export default App;

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

User: Free
Premium support: No
Technology: MDB React
MDB Version: 4.13.0
Device: React
Browser: chrome
OS: Mac
Provided sample code: No
Provided link: Yes

Renovo

10Support score
2Questions 0Answers

0Snippets likes 0Snippets