JavaScriptで地図を作る
2024-09-15
JavaScript/jQueryを使ったシンプルな地図作成
JavaScriptとjQueryの基本
JavaScriptはウェブページに動的な要素を追加するプログラミング言語です。jQueryはJavaScriptのライブラリで、DOM操作やイベント処理を簡潔に記述できます。
地図APIの利用
地図を表示するには、地図APIを利用します。代表的なものにはGoogle Maps APIやOpenStreetMapがあります。ここでは、Google Maps APIの使用を例に説明します。
Google Maps APIの導入
- Google Cloud Platformでプロジェクトを作成します。
- APIライブラリからGoogle Maps JavaScript APIを有効化します。
- APIキーを取得します。
HTMLファイルの作成
HTMLファイルに、Google Maps APIのスクリプトを読み込むための<script>タグと、地図を表示するための<div>要素を追加します。
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
JavaScriptファイルの作成
JavaScriptファイルで、地図を初期化し、マーカーを追加する関数を定義します。
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 37.7749, lng: -122.4194 },
zoom: 8
});
const marker = new google.maps.Marker({
position: { lat: 37.7749, lng: -122.4194 },
map: map
});
}
Hashmapの利用（オプション）
Hashmapはキーと値のペアを効率的に管理するためのデータ構造です。地図上のマーカーや情報ウィンドウを管理する際に利用できます。
const markers = new Map();
// マーカーを追加する関数
function addMarker(location, info) {
const marker = new google.maps.Marker({
position: location,
map: map
});
markers.set(marker, info);
marker.addListener("click", () => {
// 情報ウィンドウを表示
const content = `<div>${info}</div>`;
const infowindow = new google.maps.InfoWindow({
content: content
});
infowindow.open(map, marker);
});
}
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 37.7749, lng: -122.4194 },
zoom: 8
});
const marker = new google.maps.Marker({
position: { lat: 37.7749, lng: -122.4194 },
map: map
});
}
const markers = new Map();
// マーカーを追加する関数
function addMarker(location, info) {
const marker = new google.maps.Marker({
position: location,
map: map
});
markers.set(marker, info);
marker.addListener("click", () => {
// 情報ウィンドウを表示
const content = `<div>${info}</div>`;
const infowindow = new google.maps.InfoWindow({
content: content
});
infowindow.open(map, marker);
});
}
Leafletの利用
Leafletは軽量でクロスブラウザ対応のJavaScriptライブラリで、地図の作成や操作が可能です。Google Maps APIとは異なり、独自のタイルサーバーを使用するため、APIキーの取得や制限はありません。
HTMLファイルに、LeafletのCSSとJavaScriptファイルを読み込みます。
<!DOCTYPE html>
<html>
<head>
<title>Simple Map with Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></ script>
</head>
<body>
<div id="map"></div>
</ body>
</html>
const map = L.map('map').setView([37.7749, -122.4194], 8);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">Ope nStreetMap</a> contributors'
}).addTo(map);
const marker = L.mark er([37.7749, -122.4194]).addTo(map);
OpenLayersの利用
OpenLayersは成熟したJavaScriptライブラリで、高度な地図機能を提供します。Google Maps APIやLeafletと同様に、独自のタイルサーバーを使用できます。
<!DOCTYPE html>
<html>
<head>
<title>Simple Map with OpenLayers</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/ol.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
const map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([-1 22.4194, 37.7749]),
zoom: 8
})
});
const marker = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([-122.4194, 37.7749]))
});
const vectorSource = new ol.source.Vector({
features: [marker]
});
const vectorLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer);
javascript jquery hashmap
