うさぎのイラスト

ネットアンサー55備忘録

web技術を書いていきます

Menu

googlemap カスタマイズ

－2015年12月12日－
googlemapのAPIキー取得方法
設置方法
複数のマーカーを立てる
googlemapのAPI 複数のマーカー
googlemapジェネレータサイト
ジェネレータサイト
?一番簡単な方法 まずはgooglemapから地図の埋め込みを設定します。 サイズなども自身でカスタマイズすることが出来ます。 151212-2jpg ?カスタマイズするやり方 htmlファイルにheaderタグAPIを取得するスクリプトをつけます。
ソースを表示
印刷SyntaxHighlighterについて
1<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
ソースを表示
印刷SyntaxHighlighterについて
1<body onload="initialize();">
2<div id="map_canvas" style="width:100%;height:500px;"></div>
次にgooglemapで目的地を入力して、右クリックで「この場所について」で表示される、座標をコピーする。 取得した座標をもとにjsを記述します。
ソースを表示
印刷SyntaxHighlighterについて
1function initialize() {
2  var latlng = new google.maps.LatLng(35.7075737,139.6624942,17);
3  var myOptions = {
4    zoom: 18, /*拡大比率*/
5    center: latlng, /*表示枠内の中心点*/
6    mapTypeId: google.maps.MapTypeId.ROADMAP/*表示タイプの指定*/
7  };
8  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
9}
※微調整が必要になってくると思います。 これだけでもマップを配置することは出来ます。 次に下記サイトから、色をかえます。 http://www.dwzone-it.com/StyledMapWizard/StyledMapWizard.asp 151212-4 設定を終えてshowjsonでソースを入手する。
ソースを表示
印刷SyntaxHighlighterについて
1function initialize() {
2  var latlng = new google.maps.LatLng(35.7061968,139.6849033,17);
3  var myOptions = {
4    zoom: 17, /*拡大比率*/
5    center: latlng, /*表示枠内の中心点*/
6    mapTypeId: google.maps.MapTypeId.ROADMAP/*表示タイプの指定*/
7  };
8  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
9   
10    /*アイコン設定▼*/
11  var icon = new google.maps.MarkerImage('img/ico.png',
12    new google.maps.Size(42,62),/*アイコンサイズ設定*/
13    new google.maps.Point(0,0)/*アイコン位置設定*/
14    );
15  var markerOptions = {
16    position: latlng,
17    map: map,
18    icon: icon,
19    title: '東中野駅'
20  };
21  var marker = new google.maps.Marker(markerOptions);
22　/*アイコン設定ここまで▲*/
23   
24  /*取得スタイルの貼り付け*/
25  var styleOptions =
26[ { "stylers": [ { "hue": "#6eff00" }, { "visibility": "simplified" } ] },{ } ]
27  var styledMapOptions = { name: '東中野駅' }
28  var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
29  map.mapTypes.set('sample', sampleType);
30  map.setMapTypeId('sample');
31}
32google.maps.event.addDomListener(window, 'load', initialize);
/*取得スタイルの貼り付け*/の二行目の箇所にソースを貼り付ける 細かい設定は下記を参考に lig アイコンをつける。 アイコンを作ります。 42px 62pxのアイコンを作成しました。 下記のように記述を足します。
ソースを表示
印刷SyntaxHighlighterについて
1function initialize() {
2  var latlng = new google.maps.LatLng(35.7061968,139.6849033,17);
3  var myOptions = {
4    zoom: 17, /*拡大比率*/
5    center: latlng, /*表示枠内の中心点*/
6    mapTypeId: google.maps.MapTypeId.ROADMAP/*表示タイプの指定*/
7  };
8  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
9   
10    /*アイコン設定▼*/
11  var icon = new google.maps.MarkerImage('img/ico.png',
12    new google.maps.Size(42,62),/*アイコンサイズ設定*/
13    new google.maps.Point(0,0)/*アイコン位置設定*/
14    );
15  var markerOptions = {
16    position: latlng,
17    map: map,
18    icon: icon,
19    title: '東中野駅'
20  };
21  var marker = new google.maps.Marker(markerOptions);
22　/*アイコン設定ここまで▲*/
23   
24  /*取得スタイルの貼り付け*/
25  var styleOptions =
26[ { "stylers": [ { "hue": "#6eff00" }, { "visibility": "simplified" } ] },{ } ]
27  var styledMapOptions = { name: '東中野駅' }
28  var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
29  map.mapTypes.set('sample', sampleType);
30  map.setMapTypeId('sample');
31}
出来上がりがこんな感じです。 151212-5 作業1
作業2
複数のピンを刺す

Page top



Copyright2015 © netanswer55 All Rights Reserved.