質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.08%

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 707

yusukexyusuke

score 42

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

現在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}

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • mix-peach

    2018/04/02 12:04

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

    キャンセル

  • yusukexyusuke

    2018/04/03 06:46

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

    キャンセル

  • mix-peach

    2018/04/03 18:11 編集

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

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.08%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る