質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

673閲覧

Google Maps API オリジナルアイコン画像サイズのレスポンシブ対応について

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/01/03 06:04

●実現したい事
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.' }); } });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

resizeイベントか、window.matchMediaのイベントでアイコンを入れ替えれば良いです。
(アイコンの設定を変えてマーカーを作り直す)

【jQueryのresize()でリサイズされたら処理】
https://www.flatflag.nir87.com/resize-1829

【window.matchMedia をそろそろ活用してもいい頃 - Qiita】
https://qiita.com/amamamaou/items/a29b29f5267196a5e4ea#windowmatchmedia-で判定

投稿2019/01/07 17:40

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/01/07 21:32

回答頂きありがとうございます! 修正してみたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問