カテゴリー
Google Maps API (旧Google Ajax API) からクライアント位置情報を取得する
※ 当ページには【広告/PR】を含む場合があります。
2019/12/17
Google Maps APIs
Google AJAX APIs
Google Maps API
誰でもどこでも使える
事前登録アリ
ともあれAPI KeyなしでAPIを叩いてみる
「今でもAPI Keyなし、事前登録なしで使える」
もうAPI Keyなしじゃ全然動かないよ
index.html
head
...
<head>
<!-- Global tag: (google) - Ex Google Ajax Api -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
const initializeMap = () => {
const geocoder = new google.maps.Geocoder();
if(google.loader.ClientLocation) {
const latlng = new google.maps.LatLng(
google.loader.ClientLocation.latitude,
google.loader.ClientLocation.longitude
);
geocoder.geocode({'latitude_longitude': latlng}, (results, status) => {
if(status == google.maps.GeocoderStatus.OK) {
alert(results[0]['formatted_address']);
};
});
}
}
google.load("maps", "3", {
other_params: "sensor=false",
callback: initializeMap
});
</script>
https://www.google.com/jsapi
google.loader.ClientLocation
latitude
longitude
検証
NoApiKeys
ApiProjectMapError:
Either the provided API key or the API project with which it is associated, could not be resolved.
This error may be temporary.
If this error message persists you may need to get a new API key or create a new API project.
For more information, see Get Started with Google Maps Platform.
API Key
関連付けされたAPIプロジェクト
API Keyの取得
APIプロジェクトの作成
APIとサービス > ダッシュボード
APIの有効化
Maps Javascrtip API
API Keyの作成
APIとサービス > 認証情報
API Key
API Keyの保護
APIとサービス > ダッシュボード
Maps JavaScript API
Maps
認証
API Key
リファラの設定
Zone Apex(wwwとかを含まないドメイン名)
ターゲットAPIの設定
Maps Javascript API
再度検証
API Key
index.html
head
...
<head>
<!-- Global tag: (google) - Ex Google Ajax Api -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
const initializeMap = () => {
const geocoder = new google.maps.Geocoder();
if(google.loader.ClientLocation) {
const latlng = new google.maps.LatLng(
google.loader.ClientLocation.latitude,
google.loader.ClientLocation.longitude
);
geocoder.geocode({'latitude_longitude': latlng}, (results, status) => {
if(status == google.maps.GeocoderStatus.OK) {
alert(results[0]['formatted_address']);
};
});
}
}
google.load("maps", "3", {
'other_params': 'key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', // Your API Key
});
google.setOnLoadCallback(initializeMap);
</script>
google.load
other_parames
key
google.loader.ClientLocation
google.loader.ClientLocation
GeoIP
まとめ
Google Maps Api
GeoIP
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー