埋め込んだGoogleMapsの所在地を、好きなアイコンに変更する方法
2015/11/24
皆様こんにちは!
GoogleMaps埋め込みの応用編です。
① ホームページに地図を載せた後に、自社のアイコンを配置します。
② さらに、複数の場所の地図を埋め込み、同様にアイコンを配置します。
まずはHTMLファイルから。
1 2 3 4 5 6 7 8 9 10 11 |
<div class="gmap_wrapper"> <h3>本社</h3> <div id="map_customize01" style="width: 100%; height: 640px;"></div> <p class="text-right"><a href="https://goo.gl/maps/EPCUSmRNzps" target="_blank">Google Mapsで見る</a></p> </div><!-- /.gmap_wrapper --> <div class="gmap_wrapper"> <h3>秋葉原オフィス</h3> <div id="map_customize02" style="width: 100%; height: 640px;"></div> <p class="text-right"><a href="https://goo.gl/maps/cbHatc6VLhz" target="_blank">Google Mapsで見る</a></p> </div><!-- /.gmap_wrapper --> |
map自体のdivの外側をさらにgmap_wrapperというクラスのdivでくくっていますが、これはスマホで閲覧したユーザーが無限スクロールにハマるのを防ぐためでした。(→前の紹介記事はこちら)
つぎに、JSファイルです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
function initialize() { var latlng01 = new google.maps.LatLng(35.655694, 139.699734);/*表示したい場所の経度、緯度*/ var latlng02 = new google.maps.LatLng(35.696368, 139.780363);/*表示したい場所の経度、緯度*/ var myOptions01 = { zoom: 18, /*拡大比率*/ center: latlng01, /*表示枠内の中心点*/ mapTypeControlOptions: { mapTypeIds: ['noText', google.maps.MapTypeId.ROADMAP] }/*表示タイプの指定*/ }; var myOptions02 = { zoom: 18, /*拡大比率*/ center: latlng02, /*表示枠内の中心点*/ mapTypeControlOptions: { mapTypeIds: ['noText', google.maps.MapTypeId.ROADMAP] }/*表示タイプの指定*/ }; var map01 = new google.maps.Map(document.getElementById('map_customize01'), myOptions01);/*マップのID取得*/ var map02 = new google.maps.Map(document.getElementById('map_customize02'), myOptions02);/*マップのID取得*/ /*スタイルのカスタマイズ*/ var styleOptions = [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]; var styledMapOptions01 = { name: '株式会社カラフルクローバー 本社' } var styledMapOptions02 = { name: '株式会社カラフルクローバー 秋葉原オフィス' } var sampleType01 = new google.maps.StyledMapType(styleOptions, styledMapOptions01); var sampleType02 = new google.maps.StyledMapType(styleOptions, styledMapOptions02); map01.mapTypes.set('sample01', sampleType01); map02.mapTypes.set('sample02', sampleType02); map01.setMapTypeId('sample01'); map02.setMapTypeId('sample02'); /*アイコンの取得*/ var icon = new google.maps.MarkerImage('https://colorful-clover.co.jp/img/clover.png',/*アイコンの場所*/ new google.maps.Size(40,40),/*アイコンのサイズ*/ new google.maps.Point(0,0)/*アイコンの位置*/ ); /*マーカーの設置*/ var markerOptions01 = { position: latlng01,/*表示場所と同じ位置に設置*/ map: map01, icon: icon, title: '株式会社カラフルクローバー 本社'/*マーカーのtitle*/ }; var marker01 = new google.maps.Marker(markerOptions01); var markerOptions02 = { position: latlng02,/*表示場所と同じ位置に設置*/ map: map02, icon: icon, title: '株式会社カラフルクローバー 秋葉原オフィス'/*マーカーのtitle*/ }; var marker01 = new google.maps.Marker(markerOptions02); } |
ちょっと長いですが、それぞれの記述にコメントをつけておきましたので、確認してみてください。
1つのページに2つの地図を表示するために、このような記述になっています。
表示はこうなります。
カスタマイズによって地図がモノクロになっていますが、自社のアイコンが表示されました。
ワンポイントになりますので、是非試してみてくださいね!
関連記事
-
-
○htmlから始める、Schooデビュー。
こんばんわ ブログでは初めての投稿になります。 カラフルクローバー広報担当の竹原 …
-
-
SEOにおけるクロールの仕組みについて。
みなさんこんばんわ、今日もSEOの勉強をしたので早速、勉強内容をお知らせします! …
-
-
消えたホームページを復活させる魔法教えます!
皆様こんにちは。 つい先日、サーバー管理業者から連絡が来ました。 来ないでしょ、 …
-
-
注意!コンテンツのレイアウトを考える前に意識すること。
みなさんこんばんわ、 今日もWebライティングの勉強をしたのですが、 今回はコン …
-
-
ソーシャルメディアとの関係はどう理解する?
みなさんこんばんわ。 本日もSEOの学習を進めました。 今回は昨日よりも書籍を …
-
-
Googleアナリティクスは実践あるのみ。
みなさんこんばんわ 本日学習したのは googleアナリティクスの試験勉強。 …