物件 Google Mapsの表示のしくみ
- Wednesday, March 06 2019 @ 01:14 PM JST
- 投稿者: Admin
- 表示回数 5,051
Google Maps表示は、緯度経度がわかっている場合は以下のソースをテンプレートに埋め込みます。
<style>
#map{code} {
border:solid 1px #666;
height: 350px;
width: 100%;
background-color: grey;
}
</style>
<div id="map{code}"></div>
<script>
// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap() {
var map = new google.maps.Map(document.getElementById('map{code}'), {
zoom: 15,
center: {lat: {lat}, lng: {lng}}
});
var image = '{site_url}/images/maps/icons/icon_{data_type_mst_disp}.png';
var beachMarker = new google.maps.Marker({
position: {lat: {lat}, lng: {lng}},
map: map,
icon: image
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=キー&callback=initMap">
</script>
Geeklog では、dataBoxからMapsプラグインへデータを移行させる機能があり、その際に、dataBoxのデータに緯度・経度が格納されます。