Vasyworksでは地図にOpenStreetMapを利用しています。地図表示のために「Leaflet」というライブラリを使っています。また、LeafletをVue.jsで扱えるようにするために「Vue2Leaflet」というライブラリも合わせて使っています。
地図の中央にアイコン（48px × 48px）を表示する簡単なサンプルコードを記載します。
■Djangoテンプレート側（sample.html）
{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DjangoテンプレートでのOpenStreetMap表示のサンプル</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
</head>
<body>
<div id="contents">
<div id="map" style="width: 80%; height: 600px;">
<l-map :zoom="zoom" :center="center">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<l-marker :lat-lng="marker" :icon="icon"></l-marker>
</l-map>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.css" />
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue2-leaflet@2.5.2/dist/vue2-leaflet.min.js"></script>
<script type="text/javascript" src="{% static 'sample/js/sample.js' %}"></script>
<script type="text/javascript">
var app = createSampleVue(
35.0116718067,
135.7681251617,
);
</script>
</body>
</html>
■Javaスクリプト側（sample.js）
/*
System Name: Vasyworks
Copyright (C) 2020 Yasuhiro Yamamoto
*/
var { LMap, LTileLayer, LMarker } = Vue2Leaflet;
function createSampleVue(
lat,
lng,
) {
return new Vue({
el: "#contents",
delimiters: ["[[", "]]"],
components: { LMap, LTileLayer, LMarker },
data: {
zoom: 17,
center: L.latLng(lat, lng),
url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
attribution:'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
marker: L.latLng(lat, lng),
icon: L.icon({
iconUrl: "/static/sample/images/map_icon.png",
iconSize: [48, 48],
iconAnchor: [24, 24],
}),
},
mounted: function(event) {
},
methods: {
},
});
}
Djangoテンプレートでは地図表示の部分にVue2Leafletのタグを追加し、Vueオブジェクト作成の引数に緯度、経度を渡します。サンプルでは緯度経度の数値を直接渡していますが、ここではDjangoのビューから受け取った変数の値を渡すこともできます。
Javaスクリプト側ではまず、Vue2Leafletを利用するための宣言をします。
Djangoテンプレートで受け取った緯度、経度（lat, lng）を使って、dataプロパティで地図表示のcenterポイントとmarkerポイントを指定します。zoomは地図の表示倍率ですので、適切な整数を指定してください。
dataプロパティにあるurlの記述はOpenStreetMapを使いたい場合の記述です。このままで使ってください。ちなみに国土地理院の標準地図を使いたい場合は
https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.pngと記述するようです。
OpenStreetMapを利用するためには著作権表示ページへのリンクを掲載しないといけませんので、OpenStreetMapを使う場合はattributionもこのままで使ってください。ちなみに国土地理院の地図を使いたい場合、attributionには
<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank" rel="noopener noreferrer">地理院タイル</a>といった感じで記述するようです。
dataプロパティのiconの指定には、使いたいアイコンの画像ファイルと画像サイズ、画像の支点位置を指定してください。
LeafletおよびVue2Leafletを使って、地図上に複数のアイコンを表示させたり、アイコンをクリックすると地図上にポップアップを表示させたりというようなこともできます。
VasyworksSEARCHの地図検索では表示範囲内にある賃貸物件の緯度経度や基本情報をAjaxで取得して物件アイコン表示させ、物件アイコンをクリックすると基本情報を地図上にポップアップ表示するといったことを実装していますので、ご興味があればGitHubで公開しているソースコードをご覧ください。