ReactでGeolocation APIを使用した現在地の取得ができない。

Question

前提・実現したいこと

React+Redux+Laravelを使用して個人でアプリケーションを開発しています。
そこで、現在地を取得してGoogleMapsで表示させようと思っているのですが、なぜか現在地がでたらめな場所に表示されてしまいます。関西と関東ほどの誤差があります。
現在地の取得にはcomponentDidMount内でJS標準のGeolocation APIを使用して取得した緯度、経度をstateに保存して使用しています。GoogleMapsの表示に関してはgoogle-map-reactを使用しています。
どなたか解決方法のご教授お願いいたします。

※開発環境にはLaradocを使用しています。
※getGourmet関数に関してはホットペッパーAPIを叩いているだけですので今回は関係ないです。

該当のソースコード

import React from 'react'
import { Link } from 'react-router-dom'
import { withStyles } from '@material-ui/core/styles'
import GoogleMapReact from 'google-map-react'
import * as actions from '../../actions'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

import Card from '@material-ui/core/Card'
import CardActions from '@material-ui/core/CardActions'
import CardContent from '@material-ui/core/CardContent'
import CardMedia from '@material-ui/core/CardMedia'
import Button from '@material-ui/core/Button'
import AddLocationIcon from '@material-ui/icons/AddLocation'
import EmojiPeopleIcon from '@material-ui/icons/EmojiPeople'
import Replay from '@material-ui/icons/Replay'


const drawerWidth = 250 // Width for Drawer

const styles = (theme) => ({
    root: {
        [theme.breakpoints.up('md')]: {
            width: `calc(100% - ${drawerWidth}px)`,
            marginLeft: drawerWidth
        },
        padding: 30,
    },
    toolbar: theme.mixins.toolbar, // Minimum height of Toolbar
    link: {
        textDecoration: 'none'
    },
    titleArea: {
        margin: '0 auto',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'column'
    },
    title: {
        margin: '0 auto',
        marginBottom: 20,
        padding: 0
    },
    btn: {
        margin: 'auto',
        textAlign: 'center',
    },
    map: {
        width: '90vmin',
        height: '90vmin',
        marginTop: 40,
        marginBottom: 50,
        margin: '0 auto'
    },
    shopListTitle: {
        textAlign: 'center'
    },
    card: {
        [theme.breakpoints.up('sm')]: {
            width: '45%'
        },
        width: '100%',
        margin: 10,
    },
    cardTitle: {
        textDecoration: 'none',
        color: 'black',
    },
    infoTable: {
        borderCollapse: 'collapse'
    },
    info: {
        border: 'solid 1px red',
        padding: 5
    },
    share: {
        textDecoration: 'none',
        color: '#bbb'
    },
    more: {
        textDecoration: 'none',
        color: '#bbb'
    },
    cards: {
        display: 'flex',
        flexWrap: 'wrap',
        margin: '0 auto',
    }
})

const Me = () => <div><EmojiPeopleIcon /></div>
const Pin = () => <div><AddLocationIcon /></div>

class Result extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            lat: null,
            lng: null,
            shops: ''
        }
    }

    render() {
        const { classes } = this.props
        const shops = Array.from(this.state.shops)
        const center = { lat: this.state.lat, lng: this.state.lng }

        // TODO: いいねボタン
        return (
            <div className={classes.root}>
                <div className={classes.toolbar} />
                <div className={classes.titleArea}>
                    <h2 className={classes.title}>周辺のお店</h2>
                    <Link to="/" className={classes.link}><Button className={classes.btn} startIcon={<Replay />} variant="outlined" color="primary">やり直す</Button></Link>
                </div>
                <div className={classes.map}>
                    <GoogleMapReact
                        bootstrapURLKeys={{
                            key: '***********'
                        }}
                        center={center}
                        defaultZoom={14}
                        yesIWantToUseGoogleMapApiInternals
                    >
                        {/* 現在地 */}
                        <Me
                            lat={this.state.lat}
                            lng={this.state.lng}
                        />

                        {/* 店にピンを挿す */}
                        {shops.map((shop, i) => (
                            <Pin
                                key={i}
                                lat={shop.lat}
                                lng={shop.lng}
                            />
                        ))}
                    </GoogleMapReact>
                </div>
                <h2 className={classes.shopListTitle}>お店一覧</h2>
                <div className={classes.cards}>
                    {/* 店の情報を一覧表示 */}
                    {shops.map((shop, i) => (
                        <Card className={classes.card} key={i}>
                            <CardMedia
                                className={classes.media}
                                image={shop.logo_image}
                                title="Contemplative Reptile"
                            />
                            <CardContent>
                                <h2><a href={shop.urls.pc} target="_blank" className={classes.cardTitle}>{shop.name}</a></h2>
                                <p>ー {shop.genre.catch} ー</p>
                                <table className={classes.infoTable}>
                                    <thead>
                                        <tr><td className={classes.info}>アクセス</td><td className={classes.info}>{shop.access}</td></tr>
                                    </thead>
                                    <tbody>
                                        <tr><td className={classes.info}>平均予算</td><td className={classes.info}>{shop.budget.average}</td></tr>
                                        <tr><td className={classes.info}>飲み放題</td><td className={classes.info}>{shop.free_drink}</td></tr>
                                        <tr><td className={classes.info}>食べ放題</td><td className={classes.info}>{shop.free_food}</td></tr>
                                        <tr><td className={classes.info}>最大人数</td><td className={classes.info}>{shop.party_capacity}人</td></tr>
                                        <tr><td className={classes.info}>駐車場</td><td className={classes.info}>{shop.parking}</td></tr>
                                        <tr><td className={classes.info}>open</td><td className={classes.info}>{shop.open}</td></tr>
                                    </tbody>
                                </table>
                            </CardContent>
                            <CardActions>
                                <Button size="small">
                                    <a href={shop.urls.pc} target="_blank" className={classes.more}>Show More</a>
                                </Button>
                            </CardActions>
                        </Card>
                    ))}
                </div>
            </div>
        )
    }

    componentDidMount() {
        navigator.geolocation.getCurrentPosition(pos => {
            this.setState({
                lat: pos.coords.latitude,
                lng: pos.coords.longitude
            })

            const http = axios.create({
                baseURL: 'http://localhost:8000/api/gourmet',
                timeout: 2000,
            })

            this.props.actions.httpRequest()

            // TODO: 関数化?
            const getGourmet = async () => {
                try {
                    const response = await http.get('', {
                        params: {
                            range: 3,
                            order: 4,
                            lat: pos.coords.latitude,
                            lng: pos.coords.longitude,
                            party_capacity: `${this.props.QuestionsReducer.people}`,
                            budget: `${this.props.QuestionsReducer.budget}`,
                            free_food: `${this.props.AmountReducer.freeFood}`,
                            free_drink: `${this.props.AmountReducer.freeDrink}`,
                            genre: `${this.props.QuestionsReducer.genre}`
                        }
                    })
                    this.setState({
                        shops: response.data.results.shop
                    })
                    console.log(response.data.results.shop)
                } catch (error) {
                    console.log(error)
                }
            }

            getGourmet()

            this.props.actions.httpSuccess()
        }, err => {
            this.props.actions.httpFailure()
            console.log(err)
        })
    }
}

const mapStateToProps = state => ({
    QuestionsReducer: state.QuestionsReducer,
    AmountReducer: state.AmountReducer,
    HttpReducer: state.HttpReducer
})

const mapDispatchToProps = dispatch => ({
    actions: bindActionCreators(actions, dispatch)
})

const styledResult = withStyles(styles, { withTheme: true })(Result)

export default connect(mapStateToProps, mapDispatchToProps)(styledResult)

Comments

[jun68ykt]

一点、念のための確認になってしまい恐縮ですが、ご質問に挙げられているコンポーネントを表示させるときの URL は、http ではなくセキュアなhttp すなわち、 https で始まっていますでしょうか？

[退会済みユーザー]

ご回答ありがとうございます！
httpですね！
httpsでないとセキュリティ的に正しい現在地が取得できないという情報は知っていたのですが、localhostで動作させているということと、一番初めに動作させたときはしっかり位置情報を拾ってくれたので、可能性からは省いてしまったのですが、やはりこれが原因でしょうか？
当方、知識不足ですので馬鹿なことを言っているかもしれませんが、お付き合い頂けると幸いです…。

[jun68ykt]

回答しました。参考になれば幸いです。

Answer 1

こんにちは

MDN の Geolocation API　の説明の一番上に、以下のように注記があります。

安全なコンテキスト用

この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

と明記されていますので、https でない限りは、意図した結果にならないと思ったほうがよいと思われます。ちなみにURLスキームが https である場合に、現在地を取得できていることは以下のように確認できます。

Geolocation API　のページのURLは、

https://developer.mozilla.org/ja/docs/Web/API/Geolocation/Using_geolocation　

で、URLスキームは https です。このページをスマホのブラウザで表示させ、以下のような黄色の背景に「Show my location」というボタンのあるところまでスクロールします。

そしてこのボタンをタップすると、位置情報を送信してよいかの許可を求められて、それに了解すると、現在の正確な緯度経度が表示されるかと思いますが、いかがでしょう？（私は iPhone8 を使用し、Safariで開きましたが、正確な現在地の緯度経度が表示されました）

以上、参考になれば幸いです。

Comments

[退会済みユーザー]

ご回答ありがとうございます！
私のMacBookのChromeでタップしてみましたが、 Unable to retrieve your location と表示されて、現在地が取得できませんね…。Safariのほうではいけました！
因みに携帯（iPhone8）では表示されているので、ネットワークの問題ではないと思います…。

[jun68ykt]

MacBookではなくスマホで確認することはできますでしょうか？ひとつ前のご質問で、お手持ちのiPhoneでテストをしている、というようようなことが書いてありましたので、そちらのiPhone で
https://developer.mozilla.org/ja/docs/Web/API/Geolocation/Using_geolocation
を表示して、上記の「Show my location」ボタンをクリックしてみると、いかがでしょうか？

[退会済みユーザー]

PCの翻訳がかかっていたので、それを原文になおしたら位置情報は取得できました！
しかし、位置情報が相変わらず大きく外れていますね…。

[退会済みユーザー]

iPhoneでは正常に位置情報を取得できました！

[jun68ykt]

おお、そうですか！

MacBook のほうで位置情報が正確ではない点については、以下などを参考にするとよいかもしれません。

OS X と Safari の位置情報サービスについて
https://support.apple.com/ja-jp/HT5403

または、「macbook OS X 位置情報」でググっても分かり易く説明している記事がみつかると思います。

iPhone で 先のMDN のサイトに対しては、正常に位置情報を取得、送信できることが分かったのですが、そのiPhone でご質問にあるコンポーネントがreder される画面を表示することは（WIFI経由だったりで）できるのでしょうか？

[退会済みユーザー]

これは一つ前の質問にも関係してくるのですが、iPhoneでlocalhostに繋ぐと、ブラウザ内で完結している動きに関しては問題なく表示、動作するのですが、バックのLaravel　APIに非同期通信したり、位置情報を取得したりなどすると正常に動作しないです…。
本当に困っているので、解決方法がお分かりででしたら、本当に助かります…。

[jun68ykt]

MacBook による開発中は、一台のMacBook の中でLaravelによるサーバーを動かし、フロントエンドは webpack dev server か何かを動かして、PC のブラウザから http://localshost:3000 のようなURLでフロント画面が表示される、的な感じを想像していますが、実際のiPhone 端末からフロント画面を表示させようとするならば、MakBook と iPhone とが同じWiFi に接続している前提で、MacBook の IP アドレスを調べて、たとえばそれば　192.168.1.100 だったとすると、iPhone のブラウザで、http://192.168.1.100:3000 　というURLでアクセスしないと、iPhoneでは表示できないですね。
iPhone のブラウザで htt://localhost・・・　と打っても、 iPhone にとってのlocalhost とはそのiPhone 自身ですので。

[退会済みユーザー]

すいません！質問に語弊がありました！
localhostではなく、ipアドレスとポート番号を正確に打って、画面は表示できているのですが、ログイン処理でのLaravel APIとの通信や、現在地の取得などの通信が発生するとうまく動作しないです…。
ボタンをタップしての画面遷移や、ダイアログの表示などはできています！
開発環境に関してはLaradockを使用しています。

[jun68ykt]

なるほど。了解です。

(1) Laravel APIとの通信については、iPhoneの実機でテストをするときは、フロントエンド側のどこかに書いてある、APIサーバーのURLも 127.0.0.1 だったり、localhost ではなく、192.168･･･か何かのIPアドレス:Laravelサーバのポートにしなければなりませんが、そのようになってますでしょうか？

(2) 現在地の取得については、

navigator.geolocation.getCurrentPosition(pos => {
this.setState({
lat: pos.coords.latitude,
lng: pos.coords.longitude
})

の this.setState は行われているということでよいのでしょうか？

navigator.geolocation.getCurrentPosition

は以下のような引数

navigator.geolocation.getCurrentPosition(success[, error[, [options]])

を取れるので、this.setStateが実行されているということは、 successハンドラが実行されているということなのでgetCurrentPosition　が成功したことになります。

もしかすると、iPhone実機 での疎通ができると、「安全なコンテキスト (HTTPS) でのみ利用できます。」と書いてあることに反して、正確な緯度経度が表示されるかもしれませんね。（淡い願望に過ぎませんが）

[jun68ykt]

何にせよ、この先開発を進めるにあたって、まずは、お手持ちの iPhoneの実機と、MacBook上のフロントエンドdevサーバー、バックエンドAPIサーバー（Laravel)とを疎通させて、iPhone 上でも動作確認できるところまでもっていくことが優先順位高そうな気がします。（もちろん、ふだんの開発は localhost で PCのブラウザからでよいと思いますが。）

[退会済みユーザー]

何度も丁寧なご回答ありがとうございます！
携帯の方でのLaravel APIとの通信はipアドレスを変更したら通信できました！
localhostにしていました！申し訳ございません！

位置情報の取得に関しては相変わらずですね…。
successハンドラ内でconsole.logを随所でしたところすべて表示されているので、恐らく取得はできているのかもしれません。

[退会済みユーザー]

位置情報の取得は上記に載せている通り、componentDidMount内で実行しています。それをstateに保存しています。

[退会済みユーザー]

それを、render()内のGoogle Mapで使用していると言う感じですね。

[jun68ykt]

なるほどですね。

ちょっと余談ですが
navigator.geolocation.getCurrentPosition　の第１引数は成功時のコールバックですが、第２引数のコーバックは、失敗時のもので、以下に書き方の例がありました。

https://stackoverflow.com/a/39367531

上記の　var browserGeolocationFail = function(error) {　・・・　} 　です。いくつかの case があるようです。

ただ、khkhkhさんの現状では、成功時のコールバックに行っているわけですよね？ 調べが足りないと思うのは、https ではなく http でアクセスした場合に、getCurrentPosition がどの程度、うまくいかないのかは、ブラウザ依存だったりプラットフォーム依存（PC or iOS or Android ）だったりするのでは？ ということです。ブラウザによっては、失敗ではなく成功コールバックに一応いくのだけれども、位置情報はそんなに正確には出ない、みたいな挙動をするのかもしれません。（←思いつきを言ってます。）このあたりを掘っていってもいいですが、やはりMDNに

この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

と一番上に明記されているわけですから、（失敗の仕方がブラウザによってまちまちであるのかもしれないけれども、何にせよ）上手くいかないのが想定内という気はします。

[jun68ykt]

ところで、

> 携帯の方でのLaravel APIとの通信はipアドレスを変更したら通信できました！

とのことだったので、そうすると、ひとつ前のご質問

React+Redux+Material-ui onClickイベントがiOSで反応しない

は解決されたのでしょうか？（ひとつでも問題が解決できたらいいなと思う次第です）

[退会済みユーザー]

なるほど…。確かに納得いたしました！
私の調べが足りてませんでしたね…。
jun68yktさんの回答で全ての疑問が解消されました！
最後まで拙い質問に付き合って頂き本当にありがとうございます！！
またご縁があれば是非回答をよろしくお願いいたします！！！

[退会済みユーザー]

あ、それらも無事解決致しました！感謝感激です！ありがとうございました！！

[jun68ykt]

どういたしまして！
それでは、
React+Redux+Material-ui onClickイベントがiOSで反応しない
は自己解決にされるとよいでしょう。
また次回お役に立てれば幸いです。