※ テーマによって、script が干渉しあい表示されないこともある

緯度経度検索サイト：http://www.geocoding.jp/

<script type=”text/javascript” src=”//maps.google.com/maps/api/js?sensor=true”></script>
<script type=”text/javascript”>
google.maps.event.addDomListener(window, ‘load’, function()
{
var briskLatLng  = new google.maps.LatLng(34.734526, 137.387573);
// 白黒用スタイル
var stylez = [
{
featureType: “all”,
elementType: “all”,
stylers: [ { saturation: -100 } ]
}
];
// オプションの指定
var mapOptions = {
zoom: 15,  // 地図の初期表示の拡大率
center: briskLatLng, // 地図の中心点の座標（緯度・経度）
mapTypeId: google.maps.MapTypeId.ROADMAP  // MAPタイプの指定
};
// MAPオブジェクトの作成
var mapObj = new google.maps.Map(document.getElementById(‘brisk-map’), mapOptions);
// 白黒用
var styledMapOptions = {
map: mapObj,
name: “brisk-map”
}
var styledMapType = new google.maps.StyledMapType(stylez,styledMapOptions);
mapObj.mapTypes.set(‘mono’, styledMapType);
mapObj.setMapTypeId(‘mono’);
// MARKERイメージを作成
var markerImg = new google.maps.MarkerImage(
“http://workshop.jeez.jp/wp-content/uploads/2018/06/brisk-map-logo.png”,  // アイコン画像のパス
new google.maps.Size(50, 60),     // アイコン画像の表示させたい範囲（サイズ）
new google.maps.Point(0, 0),      // アイコン画像の表示させたい範囲の基準点（左上）
new google.maps.Point(25, 60),    // アイコン画像内のアンカー点の位置
new google.maps.Size(50, 60)      // アイコン画像の実際の表示サイズ
);
// アイコンの座標位置
var latlngs = new google.maps.LatLng(34.734526, 137.387573);
// MARKERオブジェクトを作成
var markerObj = new google.maps.Marker({
position: briskLatLng, // アイコンのアンカー点の緯度・経度
map: mapObj,           // 上で作成したMAPオブジェクトを指定
icon: markerImg        // 上で作成したMARKERイメージを指定
});
});
</script>

<style type=”text/css”><!– .brisk-map { border: 1px solid #777777; height: 400px; width: 100%; } .brisk-map img{ max-width: none !important;} –></style>
<div id=”brisk-map” class=”brisk-map top-map” style=”margin: -50px 0 5px;”></div>

Google map の共有コードから、拡大地図リンクを追加

アイコンをアップロードして、リンクを入れる