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

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

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

[Googleアカウントの作成]
(https://accounts.google.com/signup/v2/webcreateaccount?hl=ja&flowName=GlifWebSignIn&flowEntry=SignUp)

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

##プロジェクトの作成

My Projectをクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457891/f0ec4e6c-8221-1161-b1c0-8ae4ccf24da2.png" width=75%>

新しいプロジェクトをクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457891/25807880-3320-c5d8-a914-b19301fdd3b0.png" width=75%>

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457891/0fad3069-a4f8-2319-d4d5-2602999b964b.png" width=75%>

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457891/916f5009-4f32-c34f-ea68-f42b3b6e3ac0.png" width=75%>

##APIの有効化
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457891/a9d804b8-1603-967b-104d-889092d1cf53.png" width=75%>

例：Maps JavaScript APIを有効化にしましょう！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457891/6d14ee89-8d9c-537c-c414-dca9e2aaa2ee.png" width=75%>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457891/c8414a95-65e2-7dc9-a709-588a580651f3.png" width=75%>

##APIキーの取得
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457891/074797e9-f4cb-5999-a0b8-dcb3a17936e1.png" width=75%>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457891/a8e6beb5-dcbe-d6d8-c392-826399d542be.png" width=75%>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457891/d905d74e-c1c4-d965-1150-109eb66d9cbc.png" width=75%>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457891/69a8681e-43fe-dd82-01a5-bad58e858f46.png" width=75%>

##東京駅を表示する

```言語: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>
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457891/ed714867-8535-74f2-6a59-cb845c8b4f0f.png" width=75%>

##東京駅のマーカーを変更する
```言語: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>
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457891/ebe7bd16-bd1a-2fa1-3b4f-eb332ac2d8ff.png" width=75%>