HTMLとJavaScriptで地図を表示させる方法【OpenStreetMap】

HTMLとJavaScriptで、ウェブサイトにマップを表示させたいと考えたことはありませんか？

実はウェブサイト内にマップを表示させるのは非常に簡単です。

そこで今回は実際にOpenStreetMapのプログラムを使ってウェブサイト上にマップを表示させる方法と応用したプログラムをいくつかご紹介します！

使用するプログラム言語はHTMLとJavaScriptのみです！

今回のテーマ

HTMLとJavaScriptでOpenStreetMapを表示するプログラム
HTMLとJavaScriptでOpenStreetMapを表示し、地図上をクリックすると、その場所の緯度経度が表示されるプログラム
HTMLとJavaScriptでOpenStreetMapを表示し、地図上をクリックすると、その場所を中心とした地図が表示されるプログラム

当サイトではプログラミングやWebサイト運営に関する記事を毎日投稿しています。
他の記事も合わせて読んでいただけると嬉しいです。

HTMLとJavaScriptでOpenStreetMapを表示するプログラム
HTMLとJavaScriptでOpenStreetMapを表示し、地図上をクリックすると、その場所の緯度経度が表示されるプログラム
HTMLとJavaScriptでOpenStreetMapを表示し、地図上をクリックすると、その場所を中心とした地図が表示されるプログラム
まとめ

HTMLとJavaScriptでOpenStreetMapを表示するプログラム

まずはHTMLとJavaScriptでOpenStreetMapを表示するプログラムです。

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>1</title>
  </head>

  <body>

    <div id="map" style="width:300px;height:300px"></div>

  <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap" type="text/javascript"></script>
  <script type="text/javascript" src="mymap.js"></script>


      <button onclick="関数名()">ラベル</button>

      <canvas id="canvas" width="200" height="200">描画領域</canvas>


      <script type="text/javascript" src="https://ipl.sfc.keio.ac.jp/text/info2-2018-9/lib/jquery-3.3.1.min.js"></script>
      <script type="text/javascript">

      function changeColor() {
      $("").css("");
      }

      function initMap() {
        var latlng = new google.maps.LatLng(35.388276, 139.427348);

        var opt = {
          zoom: 15,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map'), opt);
      }

      </script>

  </body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

function changeColor() {

$("").css("");

}

function initMap() {

var latlng = new google.maps.LatLng(35.388276, 139.427348);

var opt = {

zoom: 15,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById('map'), opt);

}

</script>

</body>

</html>

HTMLとJavaScriptでOpenStreetMapを表示し、地図上をクリックすると、その場所の緯度経度が表示されるプログラム

続いてはHTMLとJavaScriptでOpenStreetMapを表示し、地図上をクリックすると、その場所の緯度経度が表示されるプログラムです。

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>2</title>
  </head>

  <body>


    <div id="map" style="width:300px;height:300px"></div>

<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap" type="text/javascript"></script>
<script type="text/javascript" src="mymap.js"></script>


      <button onclick="関数名()">ラベル</button>

      <canvas id="canvas" width="200" height="200">描画領域</canvas>

      <script type="text/javascript" src="https://ipl.sfc.keio.ac.jp/text/info2-2018-9/lib/jquery-3.3.1.min.js"></script>
      <script type="text/javascript">
      function changeColor() {
      $("").css("");
      }

      function initMap() {
        var latlng = new google.maps.LatLng(35.388276, 139.427348);

        var opt = {
          zoom: 15,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map'), opt);

        function click_callback(e) {
          alert(e.latLng.toString());
        }

        map.addListener('click', click_callback);
      }
      </script>

  </body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

function changeColor() {

$("").css("");

}

function initMap() {

var latlng = new google.maps.LatLng(35.388276, 139.427348);

var opt = {

zoom: 15,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById('map'), opt);

function click_callback(e) {

alert(e.latLng.toString());

}

map.addListener('click', click_callback);

}

</script>

</body>

</html>

HTMLとJavaScriptでOpenStreetMapを表示し、地図上をクリックすると、その場所を中心とした地図が表示されるプログラム

最後はHTMLとJavaScriptでOpenStreetMapを表示し、地図上をクリックすると、その場所を中心とした地図が表示されるプログラムです。

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>3</title>
  </head>

  <body>

    <div id="map" style="width:300px;height:300px"></div>

<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap" type="text/javascript"></script>
<script type="text/javascript" src="mymap.js"></script>


      <button onclick="関数名()">ラベル</button>

      <canvas id="canvas" width="200" height="200">描画領域</canvas>

      <script type="text/javascript" src="https://ipl.sfc.keio.ac.jp/text/info2-2018-9/lib/jquery-3.3.1.min.js"></script>
      <script type="text/javascript">
      function changeColor() {
      $("").css("");
      }

      function initMap() {
        var latlng = new google.maps.LatLng(35.388276, 139.427348);

    var opt = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById('map'), opt);

    function click_callback(e) {
      latling = map.setCenter(e.latLng);
    }

    map.addListener('click', click_callback);

  }
      </script>

  </body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

function changeColor() {

$("").css("");

}

function initMap() {

var latlng = new google.maps.LatLng(35.388276, 139.427348);

var opt = {

zoom: 15,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById('map'), opt);

function click_callback(e) {

latling = map.setCenter(e.latLng);

}

map.addListener('click', click_callback);

}

</script>

</body>

</html>

まとめ

今回はHTML&JavaScriptを使ってOpenStreetMapの地図を表示させる方法について解説しました。

ご覧の通り、HTMLとJavaScriptだけで簡単に実装できるのでおすすめです。

みなさんも是非実践してみてください！

わからない部分がある方はお問合せフォームで質問して貰えばすぐに返信します。

今サイトではこれからもウェブサイト運営に関する有益な情報をたくさん発信していきたいと思っていますので応援よろしくお願いします！

▼プログラミングで行き詰まっている方はこちらの記事がオススメです▼

: プログラミングを理解できないときの対処法を解説【５つのパターンから解説】
続きを見る

: 【超お得】無料体験があるプログラミングスクール10選を徹底解説
続きを見る

: プログラミングでエラーが発生したときの解決方法をご紹介
続きを見る

HTMLとJavaScriptで地図を表示させる方法【OpenStreetMap】

HTMLとJavaScriptでOpenStreetMapを表示するプログラム

HTMLとJavaScriptでOpenStreetMapを表示し、地図上をクリックすると、その場所の緯度経度が表示されるプログラム

HTMLとJavaScriptでOpenStreetMapを表示し、地図上をクリックすると、その場所を中心とした地図が表示されるプログラム

まとめ

プログラミングを理解できないときの対処法を解説【５つのパターンから解説】

【超お得】無料体験があるプログラミングスクール10選を徹底解説

プログラミングでエラーが発生したときの解決方法をご紹介

【超お得】無料体験があるプログラミングスクール10選を徹底解説

マンツーマンサポートに対応しているプログラミングスクール６選をご紹介

【厳選】転職支援に強いプログラミングスクール７選をご紹介

【厳選】転職保証に対応しているプログラミングスクール一覧まとめ

【厳選】年齢制限がない優良プログラミングスクール７選をご紹介

分割払いに対応しているプログラミングスクール８選をご紹介

通学型の優良プログラミングスクール８選をご紹介