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

更新日 : 2023年9月25日

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

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

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

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

今回のテーマ

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

【迷ったらココ！】HTMLやJavaScriptが学べるプログラミングスクール3選

テックアカデミー	デイトラ	侍エンジニア
講師は全員現役エンジニア週2回のマンツーマンメンタリング無料の転職サポートあり課題レビュー＆チャット質問し放題	1年間のエンジニアサポートカリキュラムは無期限閲覧可能専用チャットコミュニティ参加 Webセミナー勉強会に参加	累計指導45,000人＆転職成功率98% オーダーメイドカリキュラム対応無料の転職サポートあり専属マンツーマンレッスン方式
公式サイト	公式サイト	公式サイト

当サイトではプログラミング学習やエンジニア転職に関する情報を発信しています。他の記事も合わせてご覧ください。

: HTML/CSSが学べるプログラミングスクールおすすめ10選【2023年最新版】
HTML/CSSを学習して挫折したからプログラミングスクールに入塾したい！でもどのスクールが良いんだろう... HTML/CSSを学びたいけどまず何から始めたら良いのか分からない...プログラミングス ...
続きを見る

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選を解説
プログラミングスクールって思ったより高いからなかなか決められない... 無料体験できるプログラミングスクールを知りたい！せっかくプログラミングスクールに入るなら、無料体験に参加して自分に合うスクール ...
続きを見る

: プログラミングでエラーが発生したときの解決方法をご紹介
プログラミングでエラーが発生したけど解決方法が分からない！今回はこんな疑問にお答えしていきます。プログラミング学習をしていると必ず発生するのが「エラー」です。特に初心者の方にとっては、まずエラー ...
続きを見る

wagtechblog

本サイトの運営者・管理人。慶應義塾大学環境情報学部卒。人材系のWeb系メガベンチャー企業に新卒入社。兼業でフリーランスとしてiOSアプリ開発、Web開発、Webメディア運営、SEOマーケティング等を行う。IT人材系のベンチャー企業でiOSエンジニア、Web系メガベンチャー企業でWebアプリケーションエンジニア、士業のスタートアップ企業でフロントエンドエンジニア、Web系メガベンチャー企業でプロダクトマネージャー兼SEOディレクター、ゲーム系のスタートアップ企業で最高技術責任者(CTO)、学生向けプログラミングスクールで講師の勤務経験あり(インターンを含む)。好きなプログラミング言語はSwiftとPythonとPHPとRubyとJavaScript。侍エンジニア塾元受講生。エンジニアやプログラミングスクールでの体験・経験に基づいた記事を執筆。
保有資格：ITパスポート / 基本情報技術者試験 / TOEIC730点 / 日商簿記3級

-HTML, JavaScript

合わせて読みたい：関連記事はこちら

: 【厳選】Vue.jsが学べるプログラミングスクールおすすめ7選
Vue.jsを学習して挫折したからプログラミングスクールに入塾したい！でもどのスクールが良いんだろう... Vue.jsを学びたいけどまず何から始めたら良いのか分からない...プログラミングスクールで ...
JavaScript プログラミングスクール

: JavaScriptが学べるプログラミングスクールおすすめ8選
JavaScriptを学習して挫折したからプログラミングスクールに入塾したい！でもどのスクールが良いんだろう... JavaScriptを学びたいけどまず何から始めたら良いのか分からない...プログラ ...
JavaScript プログラミングスクール

: ReactとVueはどっちがおすすめ？違いを比較【難易度・求人数・学習コスト】
React.jsとVue.jsだったらどっちがおすすめ？難易度・求人数・学習コストなどの違いを詳しく知りたい！今回はこんな疑問にお答えしていきます。エンジニアを目指す人が最初に抱える悩みの1つに「 ...
JavaScript

: HTML&CSS&JavaScriptで３つのタブを作る方法を解説
今回はHTMLとCSSとJavaScriptを使って３つのタブを作っていくコードを解説します。【迷ったらココ！】HTMLやJavaScriptが学べるプログラミングスクール3選テックアカデミーデ ...
HTML JavaScript

: テックアカデミーのHTML/CSSトレーニングってどうなの？【料金やカリキュラムをご紹介】
テックアカデミーのHTML/CSSトレーニングってどうなの？特徴や料金について詳しく知りたい！今回はこんな悩みを解決していきます。ここ最近プログラミングの需要は急激に高まってきており、フリーランス ...
HTML TechAcademy

: 【PHP】MySQLにデータを保存するフォームを作成してみた
MySQLにデータを保存するフォームをPHPとHTMLで作成しました。重複投稿防止の機能も追加しております。参考にしていただけたら幸いです。今回のテーマ PHPを使ってMySQLにデータを追加す ...
HTML PHP

: RaiseTech(レイズテック)のReactコースの評判・口コミ【料金や特徴を解説】
RaiseTech(レイズテック)のReactコースってどうなの？特徴や料金、評判や稼ぎ方について詳しく知りたい！今回はこんな悩みを解決していきます。ここ最近プログラミングの需要は急激に高まってき ...
JavaScript RaiseTech

: Node.jsが学べるプログラミングスクールおすすめ5選をご紹介
Node.jsを学習して挫折したからプログラミングスクールに入塾したい！でもどのスクールが良いんだろう... Node.jsを学びたいけどまず何から始めたら良いのか分からない...プログラミングスクー ...
JavaScript プログラミングスクール

: PythonとJavaScriptはどっちがおすすめ？似てる？【違いを比較】
PythonとJavaScriptだったらどっちを使えば良いのかな？両方の特徴や違いを詳しく知りたい！今回はこんな疑問にお答えしていきます。エンジニアを目指す人が最初に抱える悩みの1つに「プログラ ...
JavaScript Python

: HTML&JavaScriptを使って「戻る」「進む」「更新」ボタンを作成する方法
今回はHTMLとJavaScriptを使って「戻るボタン」「進むボタン」「更新ボタン」を作成する方法をご紹介します。どのボタンもページ遷移の操作には欠かせない重要な要素です。一見すると難しそうな操 ...
HTML JavaScript

: テックアカデミーのはじめてのプログラミングコースの評判・口コミ【料金や特徴をご紹介】
テックアカデミーのはじめてのプログラミングコースって稼げる？特徴や料金、評判について詳しく知りたい！今回はこんな悩みを解決していきます。ここ最近プログラミングの需要は急激に高まってきており、フリー ...
HTML TechAcademy

: テックアカデミーのフロントエンドコースの評判・口コミ【転職できる？難しい？】
テックアカデミーのフロントエンドコースの評判・口コミを知りたい！転職できるかな？今回はこんな悩みを解決していきます。ここ最近プログラミングの需要は急激に高まってきており、フリーランスや転職といった ...
JavaScript TechAcademy

: jQueryを学べるプログラミングスクールおすすめ7選【2023年最新】
jQueryを学びたいが、どんなプログラミングスクールにするべき？おすすめを知りたい！今回はこんな悩みを解決していきます。一口にプログラミングスクールと言っても、学べる内容はスクールごとにさまざま ...
JavaScript プログラミングスクール

: JavaとJavaScriptはどっちがおすすめ？全然違う？【難易度や違いを比較】
JavaとJavaScriptだったらどっちを使えば良いのかな？両方の特徴や違いを詳しく知りたい！今回はこんな疑問にお答えしていきます。エンジニアを目指す人が最初に抱える悩みの1つに「プログラミン ...
Java JavaScript