前回ご紹介した、「GoogleMap で商業施設等のアイコンや表示ラベルがない白地図を作る方法」で作成したマップに、任意で指定した座標にラベルとマーカーを配置する方法をご説明します。
まずは前回の確認から。
初期状態の新宿駅近辺のGoogle map では商業施設や駅名などが所狭しと表示されています。
前回は「Google Cloud Platform」を使って以下のようなコードで、商業施設や景観、駅などを非表示にしました。
<!DOCTYPE html>
<html>
<head>
<title>Custom Map</title>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSy*********pwm5A0"></script> //Keyは取得した値
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 35.6905, lng: 139.6995}, //参照したい場所の座標
zoom: 15, //縮尺度
styles: [
{
featureType: 'poi',
stylers: [{visibility: 'off'}] // 関心のある場所を非表示
},
{
featureType: 'landscape',
stylers: [{visibility: 'off'}] // 景観を非表示
},
{
featureType: 'transit.station',
stylers: [{visibility: 'off'}] // 交通機関の駅を非表示にする
},
]
});
}
</script>
</head>
<body onload="initMap()">
<div id="map" style="height: 500px; width: 100%;"></div>//高さ、幅指定
</body>
</html>下の図の様に路線名、道路名などのラベルだけが残りました。
今回はこの施設名がない地図の任意の場所に、施設名のラベルとマーカーを表示する方法をご説明します。
Javascriptの繰り返し文を使って、指定した座標にテキストとマーカーを追加、テキスト周辺に枠を作成、スタイルシートでラベルの様に見せています。
<!DOCTYPE html>
<html>
<head>
<title>Custom Map with Labels and Markers</title>
<style> /*装飾指定部分*/
#map {
height: 500px;
width: 100%;
}
.custom-label {
background-color: white; /*ラベル背景色*/
border: 1px solid black; /*ラベル文字色*/
padding: 5px; /*ラベル内余白*/
position: absolute;
transform: translate(-50%, 0); /*ラベル位置指定*/
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSy*********pwm5A0"></script>
<script>
function initMap() {
// 地図の初期設定を行う
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 35.6905, lng: 139.6995}, // 中心の緯度と経度を設定
zoom: 15, // ズームレベルを設定
styles: [
{
featureType: 'poi',
stylers: [{visibility: 'off'}] // ビジネスのポイントを非表示にする
},
{
featureType: 'landscape',
stylers: [{visibility: 'off'}] // 景観を非表示にする
},
{
featureType: 'transit.station',
stylers: [{visibility: 'off'}] // 交通機関の駅を非表示にする
},
]
});
// ラベルとマーカーの情報を含む場所の配列
var locations = [
{lat: 35.6895, lng: 139.6917, label: '東京都庁'},
{lat: 35.6854, lng: 139.7099, label: '新宿御苑'},
];
// 各場所に対してマーカーとラベルを追加する
locations.forEach(function(location) {
// マーカーを作成し、地図に追加
var marker = new google.maps.Marker({
position: {lat: location.lat, lng: location.lng},
map: map,
title: location.label // マーカーにラベルを設定
});
// ラベルのためのカスタムHTML要素を作成
var labelDiv = document.createElement('div');
labelDiv.className = 'custom-label';
labelDiv.innerHTML = location.label;
// カスタムオーバーレイを作成
var customLabel = new google.maps.OverlayView();
customLabel.onAdd = function() {
// オーバーレイが追加されたときに呼ばれる
var panes = this.getPanes();
panes.overlayLayer.appendChild(labelDiv); // ラベルをオーバーレイレイヤーに追加
};
customLabel.draw = function() {
// オーバーレイの描画時に呼ばれる
var point = this.getProjection().fromLatLngToDivPixel(marker.getPosition());
if (point) {
labelDiv.style.left = point.x + 'px'; // ラベルの左位置を設定
labelDiv.style.top = (point.y + 20) + 'px'; // ラベルの上位置を設定（マーカーの下に配置）
}
};
customLabel.onRemove = function() {
// オーバーレイが削除されたときに呼ばれる
if (labelDiv.parentElement) {
labelDiv.parentElement.removeChild(labelDiv); // ラベルを削除
}
};
// カスタムオーバーレイを地図に設定
customLabel.setMap(map);
});
}
</script>
</head>
<body onload="initMap()">
<div id="map"></div>
</body>
</html>ちょっと長いコードになりましたが、テンプレートにしておけば毎回流用できそうです。
上のサンプルでは「東京都庁」と「新宿御苑」のラベルを作りましたが、いくつでも対応可能です。
ファイブボックスでは、ちょっとしたお困りごとやご質問、スクラッチやUnityの個別指導のオンラインレッスンも行っています。
ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。
Comments