JavaScript[Google Map]

Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490

APIキーの取得

webサイト

地図の中心位置を緯度経度で変数chuoに代入。
centerで地図の中心位置を指定しています。
zoomでズームレベルの値を指定しています。
positionではマーカーを表示する位置を指定します。

  <script>
  function initMap() {
   var chuo= {lat:35.7014, lng:139.7453};
   var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: sotec
   });
   var marker = new google.maps.Marker({
    position: sotec,
    map: map
   });
  }
  </script>

コード全体

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <style>
  #map {
   width: 100%;
   height: 600px;
   background-color: grey;
  }
  </style>
  <title>地図表示のサンプル</title>
 </head>
 <body>
  <h3>ソーテック社の場所の案内</h3>
  <div id="map"></div>

  <script>
  function initMap() {
   var sotec = {lat:35.7014, lng:139.7453};
   var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: sotec
   });
   var marker = new google.maps.Marker({
    position: sotec,
    map: map
   });
  }
  </script>

  <script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
  </script>
 </body>
</html>