Open Street Map

test004<input type="button" value="make" onClick="makeMap();"><br />

<div id="mapid" style="height: 500px; width: 500px; border: 1px solid red;"></div>

<button onClick="addM(43.069607, 141.350617,'札幌駅');">札幌駅</button>

<button onClick="addM(43.038668, 141.474010,'新札幌駅');">新札幌駅</button>

<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

<style>

.divicon1 { border: 1px solid red; }

</style>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

<script>

let map1;

var divIcon1 = L.divIcon({

    html: '駅',

    className: 'divicon1',

    iconSize: [40,30],

    iconAnchor: [20,15],

    popupAnchor: [0, -10]

});

function makeMap() {

    map1 = L.map("mapid").setView([35.6895, 139.6917], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

        attribution: '&copy; OpenStreetMap contributors'

    }).addTo(map1);

}

function addM(a, b, m) {

    let target = L.latLng(a, b);

    const mes = m+"です";

    return L.marker(target,{draggable: 'false', icon: divIcon1}).addTo(map1).bindPopup(mes).openPopup();

}  

</script>