K
K
kirillleogky2021-02-03 18:22:33
JavaScript
kirillleogky, 2021-02-03 18:22:33

How to open GoogleMapReact when navigating to a page?

I use 'google-map-react'
When used without Next.js everything works fine
But with Next.js the map appears only when the page with the map is reloaded, and if you go to the page with the map via Link, the map is not displayed
What is the reason ?
Map file:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Helmet } from 'react-helmet';
import GoogleMapReact from 'google-map-react';
import { bindActionCreators } from 'redux';
import { getRestaurants, setRestaurants } from '../../store/actions/addressActions';
import {
    DEFAULT_CENTER,
    getRestaurantLocation,
    GOOGLE_MAPS_API_KEY,
    getRestaurantWorkingTimes,
    isClient
} from '../../utils';
import { sendPageView } from '../../googleAnalyticsHelper';

import { withRouter } from 'next/router';

class RestaurantManager extends Component {

    componentDidMount() {
        const { router, ssrProps, addressData, boundSetRestaurants, boundGetRestaurants } = this.props;
        sendPageView(router.asPath, 'Restoranlar sayfası'); //for ga

        if (isClient() && ssrProps.addressData.restaurants.length && !addressData.restaurants.length) {
            boundSetRestaurants(ssrProps.addressData.restaurants);
        }
    }

    render() {
        return <div className="restaurant-map">
            <Helmet title="En Yakın Pizza Hut Restoranları">
                <meta name="description"
                      content="Size en yakın Pizza Hut restoranlarını görüntüleyebilir, açılış-kapanış saatleri ve adres bilgilerini görüntüleyebilirsiniz."/>
            </Helmet>
            <GoogleMapReact
                bootstrapURLKeys={GOOGLE_MAPS_API_KEY}
                defaultZoom={12}
                center={DEFAULT_CENTER}
            />
        </div>;
    }
}

Answer the question

In order to leave comments, you need to log in

1 answer(s)
�
ⓒⓢⓢ, 2017-08-07
@mr_blaze

Try to get rid of the Cyrillic alphabet in the paths, if it doesn't help in this case, it will help save a lot of time in the future
[09:54:05] Using gulpfile ~/Documents/apps/sg/gulpfile.js

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question