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

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

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

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

JavaScript

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

受付中

Google map API: clickしたら追加されるマーカーのfunctionの変数の意味が理解できません...

Iori
Iori

総合スコア54

Google API

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

JavaScript

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

0回答

0グッド

1クリップ

187閲覧

投稿2022/10/15 03:10

前提

Google Maps JavaScript API TutorialというタイトルのYouTubeを見てます。
https://www.youtube.com/watch?v=Zxf1mnP5zcw&ab_channel=TraversyMedia

実現したいこと

最初に設置したマーカーを表示させる。

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

画面でその場所は表示されるのですが、マーカーが表示されません...
イメージ説明

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>My first map</title> 8 <style> 9 #map { 10 height: 400px; 11 width: 100%; 12 } 13 </style> 14 <link rel="stylesheet" href="style.css"> 15 16</head> 17<body> 18 <h3>My Google Maps Demo</h3> 19 <!--The div element for the map --> 20 <div id="map"></div> 21 22 <!-- 23 The `defer` attribute causes the callback to execute after the full HTML 24 document has been parsed. For non-blocking uses, avoiding race conditions, 25 and consistent behavior across browsers, consider loading using Promises 26 with https://www.npmjs.com/package/@googlemaps/js-api-loader. 27 --> 28 29 30 <script type="text/javascript" src="map.js"></script> 31 <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBkBtrfy0IN4dnjtSkiCJlkpYaboxuSiF8&callback=initMap"></script> 32</body> 33</html>

JavaScript

1// Initialize and add the map 2function initMap() { 3 const options = { 4 zoom: 15, 5 // The location of yako sta 6 center: {lat: 35.5394529925972, lng: 139.6801476965727} 7 // mapTypeControl: false😊 8 // mapTypeId: 'satellite'😊 9 10 } 11 12 const map = new google.maps.Map(document.getElementById("map"), options); 13 14 15 16 // traversy Media 25:00 押したら追加 無限 17 // listen for click on map 18 google.maps.event.addListener(map, 'click', function(event) { 19 // add marker 20 addMarker({coords: event.latLng}); 21 22 }); 23 24 25 26 // The marker, positioned at DONKI 27 const marker = new google.maps.Marker({ 28 position: options, 29 map: map, 30 31 icon: { 32 url: 'images/carrot.png', 33 scaledSize: new google.maps.Size(30,30) 34 }, 35 draggable: true, 36 animation: google.maps.Animation.DROP, 37 38 }); 39 marker.addListener("click", toggleBounce) 40 41 42 43 // description 44 45 46 const infoWindow = new google.maps.InfoWindow({ 47 content: '<h1>にんじん美味しい🥰🥰</h1>' 48 }); 49 50 marker.addListener('click', function () { 51 infoWindow.open(map, marker); 52 }); 53 54 // clickでbounceする 55 function toggleBounce() { 56 // 取得した要素に何かしらあったら 57 if (marker.getAnimation() !== null) { 58 // nullにする 59 marker.setAnimation(null); 60 // なかったら 61 } else { 62 marker.setAnimation(google.maps.Animation.BOUNCE); 63 64 } 65 }; 66 67 68 69 70 71 72 73 74 const markers = [ 75 76 ({ 77 // ドンキ 78 coords: {lat: 35.53969381618309,lng: 139.68785424687562}, 79 iconImage: { 80 url: 'images/IOYOG.png', 81 scaledSize: new google.maps.Size(30, 30) 82 }, 83 content: '<h1 style="font-weight: bold;">Oikos!!!!</h1>' 84 85 }), 86 ({ 87 // lazona 88 coords: { 89 lat: 35.53402322653125, 90 lng: 139.6952634089486 91 }, 92 iconImage: marker.icon, 93 content: '<h1 style="font-weight: bold;">Carrot!!!!</h1>' 94 95 }) 96 ]; 97 98// for loopで呼び出す 99 100// 自作🤬 = 0忘れた 101 for(let i = 0; i <= markers.length; i++) { 102 addMarker(markers[i]) 103 }; 104 105 106 // add marker 107 108 // addMarker({ 109 // // 川崎 110 // coords: {lat: 35.5308,lng: 139.7029}, 111 // iconImage: { 112 // url: 'images/IOYOG.png', 113 // scaledSize: new google.maps.Size(30, 30) 114 // }, 115 // content: '<h1 style="font-weight: bold;">Oikos!!!!</h1>' 116 117 // }); 118 119 120 121 // addMarker({ 122 // // 大阪 123 // coords: { 124 // lat: 34.5308, 125 // lng: 135.7029 126 // }, 127 // iconImage: marker.icon 128 // }); 129 130 131 function addMarker(props) { 132 const marker = new google.maps.Marker({ 133 position: props.coords, 134 map: map, 135 // icon: props.iconImage, 136 draggable: true, 137 animation: google.maps.Animation.DROP, 138 //このfunctionがもとになってる👩‍🎓 無限 139 icon: { 140 url: 'images/IOYOG.png', 141 scaledSize: new google.maps.Size(30, 30) 142 } 143 144 }); 145 // check for custom icon 146 if (props.iconImage) { 147 148 marker.setIcon(props.iconImage); 149 } //else { 150 // marker.setIcon(marker.icon); 151 // } 152 153 if(props.content) { 154 const infoWindow = new google.maps.InfoWindow({ 155 content: props.content 156 }); 157 158 marker.addListener('click', function () { 159 infoWindow.open(map, marker); 160 }); 161 162 } 163 164 } 165 166} 167 168window.initMap = initMap;

試したこと

JavScript

1 const options = { 2 zoom: 15, 3 // The location of yako sta 4 center: {lat: 35.5394529925972, lng: 139.6801476965727}, 5 // mapTypeControl: false😊 6 // mapTypeId: 'satellite'😊 7 icon: { url: 'images/carrot.png'} 8 9 } 10

と書いて見ましたが、表示されませんでした。

以下のような質問にはグッドを送りましょう

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

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

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

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

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

Google API

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

JavaScript

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