CODEWITHSUNDEEP
javascriptgoogle-mapsreactjswebgoogle-maps-api-3
Cornelius
Cornelius

Reputation: 361

How to incorporate <script> in React to add Google Maps instance

Than you very much to thinhvo0108 for showing how this can be implemented using google-map-react. His answer can be found here.

However although this does solve my problem, my original question remains. Imagine there was no react component created that takes away the hassle of using <script>, how would I then implement Google Maps using the scripts as shown in the question below. In other words, how can one implement pure javascript scripts in the form <script> using React (ES6/ES7)

I am working on adding a Google maps in my web application. I found this great generator here and it gave me this code:

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Google Maps</title>
</head>
<body>
    <div id="map_canvas" style="width:500px;height:300px;"></div>

    <script src="https://maps.google.com/maps/api/js"></script>
    <script>
        window.onload = function() {
            initialize();
        };

        function initialize() {
            var myLatlng = new google.maps.LatLng(50.3419169876, 5.60793614352);

            var myOptions = {
                zoom: 16,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var infowindow = new google.maps.InfoWindow({
                content: "Someplace"
            });

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: "Someplace"
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });
        }
    </script>
</body>
</html>

So I take the scripts and paste them in my index.html file. The Google maps instance is supposed to be placed on the contact page. Obviously when I reload the page on /contact, I get the map loaded quickly. However since window is outside the scope in react, whenever I just navigate using my navbar, it does not work.

I have this GoogleMaps.js component which only contains the div of id map_canvas:

import React from 'react'

const GoogleMapsInstance = () => (
  <div id="map_canvas" style={{ width: '100%', height: '400px', overflow: 'hidden' }} />
)
export default GoogleMapsInstance

I was wondering how I could get the scripts inside this component, so I could call the scripts on componentDidMount function or something like that.

I am also open to any other type of solution that gets me a fast loading (no iframe) google maps :)

Thanks for your help!

Upvotes: 2

Views: 1425

Answers (2)

thinhvo0108
thinhvo0108

Reputation: 2232

This way is not complicated, for your preference, I just posted yesterday and it works!

Implementing google maps with react

If you want to add this map element onto your component or vice versa, please let me know!

EDITED VERSION BELOW (BASED ON YOUR NEED):

You can just follow this guide to make the map appear on your contact page:

First, install necessary libraries:

npm install --save google-map-react
npm install --save prop-types

Then, you may copy the whole thing below:

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';

const AnyReactComponent = ({ text }) => <div>{text}</div>;

class MyClass extends Component {
  constructor(props){
    super(props);

  }

  render() {
    return (
      <GoogleMapReact
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
        style={{width: '500px', height: '300px'}}
      >
        <AnyReactComponent
          lat={50.3419169876}
          lng={5.60793614352}
          text={'MY SHOP'}
        />
      </GoogleMapReact>
    );
  }
}
MyClass.defaultProps = {
  center: {lat: 50.34, lng: 5.61},
  zoom: 16
};

export default MyClass;

Feel free to edit the LatLng value, and/or "MY SHOP" text, I believe you can also use some custom PNG image instead of text-element to show your preferred map-pin representing your shop

Upvotes: 2

pirs
pirs

Reputation: 2463

Simple search on Google ;)

Try : https://github.com/tomchentw/react-google-maps

Demo : https://tomchentw.github.io/react-google-maps/

Upvotes: 0

Related Questions