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

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

ただいまの
回答率

90.35%

  • jQuery

    8762questions

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

  • Google マップ

    449questions

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

  • Model

    98questions

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

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

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 429

satoru32

score 11

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

ページURLです。
satoru4518.html.xdomain.jp/instagram/index.html 

現在はグーグルマップのプラグインjquery-axgmapのグーグル・マップの中にモーダルウィンドウのプラグインmodaalの埋め込みまで完了をしております。

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

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

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

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

/*

AxGmap  version 1.2.1
(jQuery plugin) 
URL       : https://github.com/Nouris-Inc/jquery-axgmap/ 
Author    : tsaeki (http://nouris.jp/)
Copyright : copyright (c) 2015 Nouris Inc.
License   : licensed under the MIT licenses.
*/

;(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);

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • sousuke

    2018/04/03 23:51

    コードはマークダウン記法でくくってください。読みにくいので。

    キャンセル

  • Lhankor_Mhy

    2018/04/04 10:05

    https://teratail.com/questions/119087 と同一の質問ですので、削除リクエストをしてください。https://teratail.com/help#posted-otherservice

    キャンセル

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

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

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • jQuery

    8762questions

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

  • Google マップ

    449questions

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

  • Model

    98questions

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