LoginSignup
2

More than 3 years have passed since last update.

Google maps APIで東京駅を表示する方法

Last updated at Posted at 2020-11-04

事前準備(APIキー取得)

Google maps APIを利用するには、まずAPIキーを取得しなければいけないです。
取得の方法については以下の通りです。

*Google Maps APIコンソールでAPIキーを作成する為に、Googleアカウントが必要なので、事前に準備の必要があります。

Googleアカウントの作成

まず、Googleアカウントでログインします。

プロジェクトの作成

My Projectをクリックします。

新しいプロジェクトをクリックします。

「プロジェクト名」を入力して作成ボタンをクリックします。

作成したプロジェクトを確認して、「APIとサービズ」→「ダッシュボード」の順番でクリックします。

APIの有効化

例:Maps JavaScript APIを有効化にしましょう!

APIキーの取得

東京駅を表示する

html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Sample_GoogleMap</title>
  <script src="http://maps.google.com/maps/api/js?key={}&language=ja"></script>
  <style>
    html { height: 100% }
    body { height: 100% }
    #map { height: 100%; width: 100%}
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    var MyLatLng = new google.maps.LatLng(35.6811673, 139.7670516);
    var Options = {  
     zoom: 15, 
     center: MyLatLng,
     mapTypeId: 'roadmap'   
    };
    var map = new google.maps.Map(document.getElementById('map'), Options);
    var marker = new google.maps.Marker({
      position: map.getCenter(),
      map: map,

    });
  </script>
</body>
</html>

東京駅のマーカーを変更する

html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Sample_GoogleMap</title>
<script src="http://maps.google.com/maps/api/js?key={}&language=ja"></script>
<style>
html { height: 100% }
body { height: 100% }
#map { height: 100%; width: 100%}
</style>
</head>
<body>
<div id="map"></div>
<script>
var MyLatLng = new google.maps.LatLng(35.6811673, 139.7670516);
var Options = {  
 zoom: 15, 
 center: MyLatLng,
 mapTypeId: 'roadmap'   
};
var map = new google.maps.Map(document.getElementById('map'), Options);
var marker = new google.maps.Marker({
  position: map.getCenter(),
  map: map,

 // アイコンの画像を表示する。
 icon: {
      url: "https://maps.google.com/mapfiles/ms/micons/yellow.png",
      scaledSize: new google.maps.Size(60, 60)
    }
});
</script>
</body>
</html>

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2