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

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

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

MVCモデルの一部であるModelはアプリケーションで扱うデータとその動作を管理するために扱います。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Q&A

0回答

1358閲覧

グーグルマップの中にインスタグラムのモーダルウィンドウの設定

satoru32

総合スコア13

Model

MVCモデルの一部であるModelはアプリケーションで扱うデータとその動作を管理するために扱います。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

0グッド

0クリップ

投稿2018/03/26 13:21

グーグルマップの中にインスタグラムのモーダルウィンドウの設定を行いたいのですがページのリンクの設定を行っても動かないのでご教授の方をお願いします。

モーダルウィンドウのプラグイン
http://humaan.com/modaal/

グーグルマップのプラグイン
https://github.com/Nouris-Inc/jquery-axgmap

この中のコードで下記の設定を行うと動くような事が書いてあったので
すがjsの記述方法が分からず困っております。
google.maps.event.addListener(markers, 'click', (function(url){

グーグルマップのプラグインのjsコード

/*

*/

;(function($, window, document, undefined) {

var AxGmap = function (element){ this.element = $(element); this.gmap; this.markers = []; this.infoWindows = []; this.init(); } AxGmap.prototype = { init: function (){ this.createGmap(); this.fin(); }, createGmap: function(){ var options = this.createGmapOption(); var children = this.element.children(); this.gmap = new google.maps.Map(this.element[0], options); this.createMarker(children); this.showMapStatus(); }, createMarker: function(elements){ var self = this; var openWindowSet = null; elements.each(function(index){ var element = $(this); var windowOpen = false; var options = self.createMarkerOption(element); if (options.windowOpen) { windowOpen = true; delete options.windowOpen; } var marker = new google.maps.Marker(options); self.markers.push(marker); var content = element.html().trim(); if (content.length) { var infoWindowSet = self.createInfoWindowSet(content, marker); self.infoWindows.push(infoWindowSet); if (windowOpen) { openWindowSet = infoWindowSet; }; } }); if (openWindowSet) { self.openInfoWindow(openWindowSet); }; }, createInfoWindowSet: function(content, marker){ var self = this; var infoWindow = new google.maps.InfoWindow({content: content}); google.maps.event.addListener(marker, 'click', function(){ self.openInfoWindow({'infoWindow':infoWindow, 'marker':marker}); }); return {'infoWindow':infoWindow, 'marker':marker}; }, createLatLng: function(element){ var lat = 0; var lng = 0; var latlng = element.data('latlng') ? element.data('latlng') : this.element.data('latlng'); if (latlng) { var split = latlng.split(','); lat = this.parseNum(split[0].trim()); lng = this.parseNum(split[1].trim()); }; return new google.maps.LatLng(lat, lng); }, createGmapOption: function(){ var self = this; var options = { center: this.createLatLng(this.element), zoom: 9 }; if (this.element.data("mapType")) { var mapType = this.element.data("mapType").toUpperCase(); $.extend(options, {'mapTypeId': google.maps.MapTypeId[mapType]}); }; if (this.element.data("mapWidth") != null) { this.element.width(this.element.data("mapWidth")); }; if (this.element.data("mapHeight") != null) { this.element.height(this.element.data("mapHeight")); }; var properties = ["zoom", "draggable", "scrollwheel", "maxZoom", "minZoom", "mapTypeControl", "overviewMapControl", "panControl", "rotateControl", "scaleControl", "streetViewControl", "zoomControl"]; $.each(properties, function(index, property){ if (self.element.data(property) != null) { options[property] = self.element.data(property); } }); return options; }, createMarkerOption: function(element){ var options = { map: this.gmap, position: this.createLatLng(element) }; if (element.data('title') != null) { options['title'] = element.data('title'); } if (element.data('markerImage') != null) { options['icon'] = element.data('markerImage'); } if (element.data('windowOpen')) { options['windowOpen'] = true; } return options; }, openInfoWindow: function(infoWindowSet){ var self = this; infoWindowSet.infoWindow.open(self.gmap, infoWindowSet.marker); $.each(self.infoWindows, function(index, val){ if(val.infoWindow != infoWindowSet.infoWindow){ val.infoWindow.close(); } }); }, parseNum: function(val){ return (typeof val == null) ? 0.0 : parseFloat(val); }, showMapStatus: function(){ var self = this; if (!this.element.data("mapStatus")) { return; }; var status = $('<div style="color:#000; background-color:#fff; border:solid 1px #ccc; width:' + self.element.width() + 'px"><dl style="margin:1em;"><dt>Center LatLng</dt><dd class="axgmap-status-latlng"></dd><dt>Zoom</dt><dd class="axgmap-status-zoom"></dd><dt>Right Click LatLng</dt><dd class="axgmap-status-rightclick">none</dd></dl></div>'); status.insertAfter(this.element); google.maps.event.addListener(this.gmap, 'idle', function(){ $('.axgmap-status-latlng', status).empty().append(self.gmap.getCenter().lat().toFixed(6) + ', ' + self.gmap.getCenter().lng().toFixed(6)); $('.axgmap-status-zoom', status).empty().append(self.gmap.getZoom()); }); google.maps.event.addListener(this.gmap, 'rightclick', function(event){ $('.axgmap-status-rightclick', status).empty().append(event.latLng.lat().toFixed(6) + ', ' + event.latLng.lng().toFixed(6)); }); }, fin: function(){ if (!AxGmap.didCreated) { AxGmap.didCreated = true; $('<style>.gm-style img{max-width:inherit;}</style>').appendTo('head'); }; } }; $.fn.axgmap = function(){ return this.each(function(){ if(!$.data(this, 'AxGmap')){ $.data(this, 'AxGmap', new AxGmap(this)); } }); }; $(function() { $('.axgmap').axgmap(); });

})(jQuery, window, document);

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

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

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

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

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

m.ts10806

2018/03/27 00:38

プラグインのコードは提供されているものであって実際に質問者さんがやろうとしているのはそのプラグインを使うことですよね(それで実現できるかは別として)。未完成でも結構ですので自身が書いたコード(HTML,CSS,Javascript)をご提示ください。
m.ts10806

2018/03/27 00:40

あと現在どこまでできていて何ができていないのかをもう少し具体的に記述願います。
satoru32

2018/04/01 11:30

ページURLになります。satoru4518.html.xdomain.jp/instagram/index.html
satoru32

2018/04/01 11:33

回答が遅くなり申し訳ございません。現在はグーグルマップのプラグインjquery-axgmapのグーグル・マップの中にモーダルウィンドウのプラグインmodaalの埋め込みまで完了をしております。
satoru32

2018/04/01 11:34

グーグル・マップの中にモダールを入れるとモーダルが動かないです。
Lhankor_Mhy

2018/04/04 01:06

ご提示のコードはカッコの対応がされておらず、動作しないものと思われます。今一度コードの確認をしてみてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問