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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

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

Google マップ

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

Q&A

0回答

975閲覧

GoogleマップAPIでのマーカー表示でのエラーの解決方法

napnapppp

総合スコア1

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

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

Google マップ

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

0グッド

0クリップ

投稿2020/12/07 04:48

前提・実現したいこと

JavaScriptを用いて地図アプリを作っています。
ジオロケーションで位置を特定した後、登録されたマーカーを表示しようと考えています。

発生している問題・エラーメッセージ

マーカーを表示しようとするとエラーが起こり、表示されない。
「 marker.addEventListener('click',function(){」でエラーが起こり先に進まない。

該当のソースコード

ソースコード
JavaScript
コード

マーカーを表示するところのscriptだけ載せてます。

<script> var markers=[]; function initMap(){ var locations=[ { title:'大学',location:{lat:35.934479,lng:139.431725} }, { title:'駐車場',location:{lat:35.936137,lng:139.425688 } } ]; var largeinfowindow=new google.maps.InfoWindow; var defaultIcon=makeMarkerIcon('0091ff'); var highligthIcon=makeMarkerIcon('FFFF24'); for(var i=0;i<locations.length;i++){ var position=locations[i].location; var title=locations[i].title; var marker=new google.maps.Marker({ position:position, title:title, animation:google.maps.Animation.DROP, icon:defaultIcon, id:i }); marker.addEventListener('click',function(){ this.populateInfoWindow(largeinfowindow)}); marker.addEventListener('mouseover',function(){ this.setIcon(highligthIcon); }); marker.addEventListener('mouseout',function(){ this.setIcon(defaultIcon); }); } document.getElementById('show-listings').addEventListener('click',showListings); document.getElementById('hide-listings').addEventListener('click',hideListings); } function populateInfoWindow(marker,infowindow){ if(infowindow.marker !=marker){ infowindow.setContent(''); infowindow.marker=marker; infowindow.addEventListener('closeclick',function(){ infowindow.marker=null; }); var streetViewService=new google.maps.StreetViewService(); var radius=50; function getStreetview(date,status){ if (status==google.maps.StreetViewStatus.OK){ var nearStreetViewlocation=data.location.latLng; var heading=gogle.maps.geometry.spherical.computeHeading( nearStreetViewlocation,marker,position); infowindow.setCotent('<div>'+marker.title+'</div><div id="pano"></div>'); var panoramaOptions={ position:nearStreetViewlocation, pov:{ heading:heading, pitch:30 } }; var panorama=new google.maps.StreetViewPanorama( document.getElementById('pano'),panoramaOptions); }else{ infowindow.setContent('<div>'+marker.title+'</div>'+'<div>No Street View Found</div>'); } } streetViewService.getPanoramaByLocation(marker.position,radius,getStreetview); infowindow.open(map,marker); } } function showListing(){ var bounds=new google.maps.LatLngBounds(); for(var i=0;i<markers.length;i++){ markers[i].setMap(map); bounds.extend(markers[i].position); } map.fitBoundes(bounds); } function hideListings(){ for(var i=0;i<markers.length;i++){ markers[i].setMap;(null); } } function makeMarkerIcon(markerColor){ var markerimage=new google.maps.MarkerImage( 'http://chart.googleapis.com/chart/chst=d_map_spin&chld=1.15|0|'+markerColor+ '|40|_|%E2%80%A2', new google.maps.Size(21,34), new google.maps.Point(0,0), new google.maps.Point(10,34), new google.maps.Size(21,34)); } </script>

試したこと

addEvevtListenerの部分をaddListenerに変えて試みたがエラーが起こった。

補足情報(FW/ツールのバージョンなど)

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問