gmaps.jsで埋め込みGoogle Mapをカスタマイズする

投稿日:

「Google Mapの埋め込みでライバル店の表示を消したいんだけど」
というような依頼をいただきまして

そんなんできるんかなーといろいろググったら
gmaps.jsというのでできるっぽい

ざっくり説明がありました
[Google API] 手軽にGoogle Maps APIをカスタマイズできる「gmaps.js」の使い方 | ぶぶりんブログ

ここのソースこぴぺでいけるかな、と思ったけど
今現在はAPIキー取得しないと動かないので
まずはAPIキーの取得を

Google Maps の APIキー を簡単に取得する – ねんでぶろぐ

で、APIキー取得したら、コード書いていく

【GoogleMap v3】アイツを消す方法 | Webプログラミング備忘録 | メシのタネ

書いたコードはこんな感じ


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>gmaps.jsサンプル</title>
    <style type="text/css">
        #map {
            width: 800px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyByzk_T-pIejfEbPOO48d76ZlNdx6MIlGY"></script>
    <script src="http://honten.sansui1902.jp/wp-content/themes/baskerville/js/gmaps.js"></script>
   <script>
        window.onload = function(){
          var map = new GMaps({
			div: "#map",
			lat: 35.658607,
			lng: 139.745444,
			zoom: 18
		});	

		var styleOptions = [{
			featureType: "poi",
			elementType: "labels",
			stylers: [
				{ visibility: "off" }
			]}
		];
		map.setOptions({styles: styleOptions});
		
		map.addMarker({
			lat: 35.658607,
			lng: 139.745444,
			title: 'Marker with InfoWindow',
			infoWindow: {
			  content: '<p>東京たわー</p>'
			}
		});
		
        };
		
   </script>
</body>
</html>

①まずランドマーク全消しして
②マーカーを設置する
という感じみたい


さすればこんな感じのMapになります

ほんで、地図の座標ってどうやって見るの?!
という謎がでてきたんですが、これ大したことない話でした


マーカー設置したいとこ右クリックして「この場所について」を選択すると


下からにゅっと情報が出てきます
そこにおもいっきり座標書いてます
URLにも書いてあるけど、ピンポイントならこの座標が正しいはず

という雑な説明でした

どっちかっつーと自分の忘備録的なものやしね・・
整理整頓できない子なのでこういうお役立ちサイトブックマークしまくって
ブックマークが最終的にカオスな感じになってどうにもならんくなるので。

コメントを残す

メールアドレスが公開されることはありません。