●実現したい事
Google Maps APIで、指定の座標位置にオリジナルアイコン画像を表示したのですが、
SPサイズの時に画像サイズを小さく切り替えて表示したいです。
地図表示にはGoogleが提供するStyling Wizardで
生成したjsを使用しており、地図とアイコンの表示自体はできております。
●現状
displayサイズが767px以下になった時、アイコン画像を小さく表示する指定ができておりません。
方法について教えていただけないでしょうか。
js内の下記記述部分でアイコンのサイズと座標位置を指定しております。
new google.maps.Size(174, 200), new google.maps.Point(0, 0), new google.maps.Point(75, 200), new google.maps.Size(174, 200),
767px以下になった時は、下記に変更したいです。
new google.maps.Size(87, 100), new google.maps.Point(0, 0), new google.maps.Point(30, 100), new google.maps.Size(87, 100),
●下記Styling Wizardで生成したjsになります。座標位置などはダミーです。
$(function () { function initialize01() { var latlng = new google.maps.LatLng(XXXXXX, yyyyyy); var myOptions = { zoom: 17, scrollwheel: false, streetViewControl: false, mapTypeControl: false, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('access-map'), myOptions); var styleOptions = [{ "stylers": [{ "hue": "#0f2547" }, { "saturation": -73 }] }]; var styledMapOptions = { name: 'shop.' } var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions); map.mapTypes.set('sample', sampleType); map.setMapTypeId('sample'); var icon = new google.maps.MarkerImage('/lp/assets/img/icon_map.png', new google.maps.Size(174, 200), new google.maps.Point(0, 0), new google.maps.Point(75, 200), new google.maps.Size(174, 200), ); var marker = new google.maps.Marker({ position: new google.maps.LatLng(XXXXXX, yyyyyy); map: map, icon: icon, title: 'shop.' }); } });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/01/07 21:32