※new-chance/profile にて実装
gmap.v3.js は下記からダウンロード
https://www.synck.com/contents/download/javascript/gmap.v3.js.html
もしくはdesktop/webコンテンツツール/gmap.v3.jsに保存
スマホでも複数マーカーが見切れないようにするには少々カスタム必要
まずは、
●gmap.v3.js
gmap.v3.js 下記の紫の箇所はnullすること。widthとheightの値はhtml側で別途表記しないと見切れる。
28行目から30行目あたり。
function gmap(obj){
this.init = function(obj){
this.Default = {“width”: null,”height”: null,”mobile-width”: null,”mobile-height”: null,“lat”: null,”lng”: null,“zoom”: null,“title”: “Map”,”type”: “ROADMAP”,”icon”: null,”window”: false,’multiwindow’: false};
●ｈｔｍｌ
<head>内には
<script type=”text/javascript” src=”gmap.v3.js”></script>
<body>には
<div class=”gmap” id=”mapContainer” data-width=”100%” data-mobile-width=”100%” data-zoom=”10″ data-height=”350″ data-mobile-height=”250″ >
<div class=”gmaker” data-lat=”36.720227″ data-lng=”136.9852728″ data-title=”チャンスメーカー本社” >
<h3>チャンスメーカー本社</h3>
<p>本社<br/>高岡市戸出市野瀬790番地</p>
</div>
<div class=”gmaker” data-lat=”36.656766″ data-lng=”137.240868″ data-title=”チャンスメーカー富山事務所”>
<h3>チャンスメーカー富山事務所</h3>
<p>富山事務所<br/>富山県富山市本郷30番地6</p>
</div>
<div class=”gmaker” data-lat=”36.720227″ data-lng=”136.981774″ data-title=”チャンスメーカー製作室”>
<h3>チャンスメーカー製作室</h3>
<p>制作室<br/>富山県高岡市辻73-2</p>
</div>
</div>
class=”gmap” class=”gmaker” は必要要素。
data-width=”100%” data-mobile-width=”100%”で幅を設定 ％でもpxでもどちらもＯＫ
data-height=”350″ data-mobile-height=”250″ で高さ設定
data-zoom=”10″でマップの縮小サイズを決める。複数マーカーが入る縮小サイズにする。
data-lat=”36.656766″ data-lng=”137.240868″ で緯度経度
●ＣＳＳ
.gmapや.gmap iframe, .gmap object, .gmap embedに設定記述は不要。かえって記入すると辺になる