How to use a react component for showing Google Maps InfoWindow

问题

i have my code as follows, i am not using any external libraries inside my react app

import React, { Component } from "react";
import MarkerInfo from "./MarkerInfo";
import { render } from "react-dom";

class Map extends Component {
componentDidMount() {
    this.renderMap();
}

renderMarkerInfo = () => {
    return (
    <div id="markerinfo">
        <h1>THis is info marker</h1>
    </div>
    );
};

renderMap = () => {
    loadScript(
    "https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap"
    );
    window.initMap = this.initMap;
};

initMap = () => {
    var uluru = { lat: -25.363, lng: 131.044 };
    var map = new window.google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru
    });

    var contentString =
    '<div id="content">' +
    '<div id="siteNotice">' +
    "</div>" +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
    "sandstone rock formation in the southern part of the " +
    "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;mi) by road. Kata Tjuta and Uluru are the two major " +
    "features of the Uluru - Kata Tjuta National Park. Uluru is " +
    "sacred to the Pitjantjatjara and Yankunytjatjara, the " +
    "Aboriginal people of the area. It has many springs, waterholes, " +
    "rock caves and ancient paintings. Uluru is listed as a World " +
    "Heritage Site.</p>" +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
    "(last visited June 22, 2009).</p>" +
    "</div>" +
    "</div>";

    var infowindow = new window.google.maps.InfoWindow({
    content: contentString
    });

    var marker = new window.google.maps.Marker({
    position: uluru,
    map: map,
    title: "Uluru (Ayers Rock)"
    });
    marker.addListener("click", function() {
    infowindow.open(map, marker);
    });
};

render() {
    return (
    <div id="map">
        <MarkerInfo />
    </div>
    );
}
}

function loadScript(url) {
    var index = window.document.getElementsByTagName("script")[0];
    var script = window.document.createElement("script");
    script.src = url;
    script.async = true;
    script.defer = true;
    index.parentElement.insertBefore(script, index);
}

export default Map;

current I am showing the info window with the hardcoded text, I want to show it using a react component, how can I be able to do that?

i wrote another component, whenever the marker i want to show the react component dynamically

Thanks in Advance

回答1:

One option to consider would be:

1) to create an instance of InfoWindow without setting content property at this stage:

const infowindow = new window.google.maps.InfoWindow({
      content: ""
});

2) and set or update content dynamically via InfoWindow.setContent function once a marker is clicked:

marker.addListener("click", () => {
    const content = ReactDOMServer.renderToString(InfoWindowContent);
    infowindow.setContent(content);
    infowindow.open(map, marker);
});

where InfoWindowContent is represented as a React element and ReactDOMServer.renderToString function is used to render it into HTML string since InfoWindow.setContent accepts content value as a string:

const InfoWindowContent = (
  <div id="bodyContent">
    <p>
      <b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large sandstone
      rock formation in the southern part of the Northern Territory, central
      Australia. It lies 335&#160;km (208&#160;mi) south west of the nearest
      large town, Alice Springs; 450&#160;km (280&#160;mi) by road. Kata Tjuta
      and Uluru are the two major features of the Uluru - Kata Tjuta National
      Park. Uluru is sacred to the Pitjantjatjara and Yankunytjatjara, the
      Aboriginal people of the area. It has many springs, waterholes, rock caves
      and ancient paintings. Uluru is listed as a World Heritage Site.
    </p>
    <p>
      Attribution: Uluru,
      <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">
        https://en.wikipedia.org/w/index.php?title=Uluru
      </a>
      (last visited June 22, 2009).
    </p>
  </div>
);

Here is a demo

来源：https://stackoverflow.com/questions/55411539/how-to-use-a-react-component-for-showing-google-maps-infowindow

标签

reactjs

google-maps

infowindow