スポンサーサイト

/ スポンサー広告 / Comment[-]

GooglemapAPI スタイル 複数マーカー クリック時アクション

/ HTML5/CSS3/jQuery / Comment[0]
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

個人的なメモです。

function map_canvas() { //マーカーの情報 var data = new Array(); data.push({ lat: '35.705067', lng: '139.761887', url: 'https://goo.gl/maps/oSsTNEUa3e82' }); data.push({ lat: '35.674936', lng: '139.770776', url: 'https://goo.gl/maps/4jX7V3WqCeH2' }); // 初期設定 var latlng = new google.maps.LatLng(35.690900, 139.760775); var opts = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false }; var map = new google.maps.Map(document.getElementById("map"), opts); // マーカー出力 for (i = 0; i < data.length; i++) { console.log( i ); var markers = new google.maps.Marker({ position: new google.maps.LatLng(data[i].lat, data[i].lng), icon: 'http://www.web-jjs.jp/_images/_common/googlemap-maker-'+i+'.png', map: map }); google.maps.event.addListener(markers, 'click', (function(url){ return function(){ window.open(url); }; })(data[i].url)); } // スタイル設定 var styleOptions = [{ featureType: 'all', elementType: 'all', stylers: [{ saturation: -100 }] }], styledMapOptions = { map: map, name: 'mono' }, styledMapType = new google.maps.StyledMapType( styleOptions, styledMapOptions ); map.mapTypes.set( 'mono', styledMapType ); map.setMapTypeId( 'mono' ); } //地図描画を実行 google.maps.event.addDomListener(window, 'load', map_canvas);
関連記事

コメント

:
:
:
:
:
管理人のみ表示を許可