googleMapでinfoWindowを表示すると画面が再読込されてしまう。

よろしくお願い致します。

現在wordpressから店舗情報を取得して
googleマップに店舗分のマーカーと店舗情報をinfoWindowに表示しようと思っております。

wp側では緯度経度はもっていないので、
本サイト側で店舗の住所からgeocodeを利用して緯度経度を取得して、
その値をMapのMakerに渡して表示させております。

Markerを表示させるところまではうまく行ったのですが、
infoWindowを表示させると
一瞬正常にMapが表示されて、再読込されてMapの中心が全然別の場所になってしまうようになってしまいました。

このような感じです。
該当部分のソースは以下になります。

# ①Wordpressから店舗情報一覧を取得して緯度経度を入れ直す

import axios from 'axios';

const URL_BASE = 'http://xxxxxxxxxxxxxx.work/wp-json/wp/v2';
const ENDPOINT = `${URL_BASE}/shops`;
const GEOCODE_ENDPOINT = 'https://maps.googleapis.com/maps/api/geocode/json';

const storeShopInfo = (shop, location) => (
  {
    id: shop.id,
    name: shop.title.rendered,
    zipcode: shop.acf['郵便番号'],
    prefecture: shop.acf['都道府県'],
    address: shop.acf['市町区村'],
    address2: shop.acf['番地・建物など'],
    tel: shop.acf['電話番号'],
    thumbnail: shop.acf['店舗画像'][0]['画像'].url,
    acf: shop.acf,
    location: {
      lat: location.lat,
      lng: location.lng,
    },
  }
);
const geocode = (address) => {
  const request = new XMLHttpRequest();
  request.open('GET', `${GEOCODE_ENDPOINT}?address=${address}`, false);
  request.send(null);
  const { location } = JSON.parse(request.response).results[0].geometry;
  return location;
};
const fetchShops = () =>
  axios
    .get(ENDPOINT)
    .then((results) => {
      const shops = results.data.map((shop) => {
        const location = geocode(`${shop.acf['都道府県']}${shop.acf['市町区村']}`);
        return storeShopInfo(shop, location);
      });
      return shops;
    });
export default fetchShops;

# ②Map表示

import React from 'react';
import PropTypes from 'prop-types';
import { withGoogleMap, GoogleMap } from 'react-google-maps';
import Shop from './MapShop';

const InnerMap = withGoogleMap(({ location, shops }) => (
  <GoogleMap
    defaultZoom={12}
    defaultCenter={location}
    center={location}
  >
    {shops.map(shop => <Shop key={shop.id} {...shop} />)}
  </GoogleMap>
));

const Map = ({ location, shops }) => (
  <InnerMap
    containerElement={(<div />)}
    mapElement={(<div className="map" />)}
    location={location}
    shops={shops}
  />
);

Map.propTypes = {
  location: PropTypes.objectOf(PropTypes.number).isRequired,
};

export default Map;

# ③MarkerとInfoWindowを表示

import React from 'react';
import { Marker, InfoWindow } from 'react-google-maps';

const Shop = (shop) => {
  return (
    <Marker position={shop.location}>
      <InfoWindow>
        <ul style={{ width: '200px' }}>
          <li>{shop.name}</li>
          <li>{shop.address}{shop.address2}</li>
          <li>{shop.tel}</li>
        </ul>
      </InfoWindow>
    </Marker>
  );
};
export default Shop;

①Wordpressから店舗情報一覧を取得して緯度経度を入れ直す
の部分で、geocodeせずに適当な値
を予め用意しておくと画面が読み込みなおすことがなくなるので、
この部分が問題だとはあたりはつけているのですが、
具体的な対応がわかりませんでした。

# 用意した適当な値をいれれば問題ない
const locations = [
  { lat: 100, lng: 120 },
  { lat: 120, lng: 110 },
  { lat: 80, lng: 80 },
  { lat: 80, lng: 80 },
  { lat: 80, lng: 80 },
  { lat: 80, lng: 80 },
  { lat: 60, lng: 60 },
];

# 実際の値をconsole.logで確認。この場合だと地図がリロードされてしまう。
{lat: 43.7706576, lng: 142.3628469}
{lat: 36.5002223, lng: 140.6242071}
{lat: 35.6619133, lng: 139.6999565}
{lat: 35.7320975, lng: 139.711308}
{lat: 35.70861900000001, lng: 139.774939}
{lat: 35.7010718, lng: 139.7712716}
{lat: 35.16379610000001, lng: 136.908276}
{lat: 34.6720373, lng: 135.4995382}

お知恵を拝借できれば幸いです。
どうぞよろしくお願い致します。

mix-peach

2018/04/02 03:04

適当な値を設定している時と、geocodeの値を設定している時で、shop.locationの中身に差（構造とか型とか）はありませんか？

yusukexyusuke

2018/04/02 21:46

ありがとうございます！仕事でバタバタしてしまい返信が遅くなりました。適当な値と実際の値を追記いたしました。ご確認いただけますと幸いです。よろしくお願い致します。

mix-peach

2018/04/03 09:14 編集

適当な設定値を、実際の緯度経度に近い値にした場合も、リロードは起こらないのでしょうか？　あと気になるのが、shopにgeocode設定している部分で、lng: location.lng,　←この最後のカンマ・・・　消してみたらうまくいったりしないですかね？ｗ　（これがあると構造が違うようにも見える・・）