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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Google マップ

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

Q&A

1回答

392閲覧

Google map API で選択した場所を表示する

FumineAnli

総合スコア6

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Google マップ

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

0グッド

0クリップ

投稿2017/11/07 15:47

編集2022/01/12 10:55

###前提・実現したいこと
Google map の表示場所を変更したい

現在,Google map APIを用いたWebサイトを作成しています.
「オレンジ色の場所を見る」ボタンを押すと,
選択した参加申し込み可能なイベントの場所を表示したいのですが,
デフォルトに設定した位置から表示が移動しません.

ctrl+uでソースが閲覧できるようになっていますが,サンプルコードを確認しても解決できませんでした.

どなたか教えて頂けると幸いです.
よろしくお願いします.

URL:
https://goo.gl/xcfKV1

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

Google map の表示がデフォルトに設定した場所のままで,変更されない

###該当のソースコード

HTML

1 2<!doctype html> 3<html lang="ja"> 4<head> 5<title> 6join us! 7</title> 8<link rel="stylesheet" href="m1.css"> 9<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> 10</script> 11<script type="text/javascript" src="m1.js"> 12</script> 13</head> 14 15<body onload="init()"> 16<h1>ジョイナス!</h1> 17<h2>イベント参加者募集・希望サイト</h2> 18<p> 19 20<div id="here"></div> 21 22<form id="myform" action="m1.html"> 23 24ID _____ <input type="text" name="id" value=""/> 25<p> 26password <input type="password" value=""/> 27<p> 28 29<h3>参加申し込み可能なイベント </h3> 30<p> 31 32<!-- 33<input type="checkbox" name="ck" value="江津湖の清掃活動">江津湖の清掃活動……</input> 34<font color="red">あと3名</font> 35<p> 36<input type="checkbox" name="ck" value="熊本城の観光案内">熊本城の観光案内……</input> 37<font color="red">あと5名</font> 38<p> 39<input type="checkbox" name="ck" value="坪井川の灯篭流し">坪井川の灯篭流し……</input> 40<font color="red">あと2名</font> 41<p> 42--> 43 44<select id ="ck" size="3"> 45<option value="熊本県熊本市東区中央区江津3丁目7">江津湖の清掃活動</option> 46<option value="熊本県熊本市中央区本丸1-1">熊本城の観光案内</option> 47<option value="熊本県熊本市北区打越町44">坪井川の灯篭流し</option> 48</select> 49 50<p> 51<div id="mymap" style="width:600px;height:400px;"></div> 52<p> 53 54<p> 55<button class="plc" name="place" type="button" onclick="search()" value="PLACE">場所をみる</button> 56<p> 57 58<h3>参加できる日程</h3> 59<p> 60 To <input type="date" name="to" value="2017-10-27"/> 61~ From <input type="date" name="from "value="2017-10-28"/> 62<p> 63 64<h3>当日の集合場所</h3> 65<p> 66<input type="radio" name="rd" value="現地">現地</input> 67<input type="radio" name="rd" value="学校">学校</input> 68<p> 69 70<h3>学年</h3> 71<p> 72<select name="n1" size="5"> 73 <option name="list" value="1年生">1</option> 74 <option name="list" value="2年生">2</option> 75 <option name="list" value="3年生">3</option> 76 <option name="list" value="4年生">4</option> 77 <option name="list" value="5年生">5</option> 78 <option name="list" value="専攻科1年生">AE1</option> 79 <option name="list" value="専攻科2年生">AE2</option> 80</select> 81<p> 82 83<h3>Tシャツのサイズ</h3> 84<p> 85<select name="n2"> 86 <option name="drop" value="XSサイズ">XS</option> 87 <option name="drop" value="Sサイズ">S</option> 88 <option name="drop" value="Mサイズ">M</option> 89 <option name="drop" value="Lサイズ">L</option> 90 <option name="drop" value="XLサイズ">XL</option> 91</select> 92<p> 93 94<h3>備考欄</h3> 95<p> 96<textarea name="memo" cols="10" rows="10"></textarea> 97<p> 98 99<input type="submit" class="sm" onclick="set()" value="確定"/> 100<input type="reset" class="re" value="クリア"/> 101 102 103</form> 104 105</body> 106</html> 107

css

1h1{ 2 font-size:40px; 3 font-weight: bold; 4 padding:10px 30px; 5 background-color: lightgreen; 6 color:#123456; 7 border-style:none; 8} 9 10h2{ 11 color:#123456; 12} 13 14h3{ 15 font-size: 1.2em; 16 font-weight: bold; 17 padding: 10px 30px; 18 background-color: lightgreen; 19 color:#fff; 20 border-style:none; 21} 22 23 #myform { 24 // float:left; 25 margin:0px 0px 10px 30px; 26 } 27 28 #but{ 29 //float:left; 30 margin:0px 10px 0px 100px; 31 } 32 33input.sm { 34 font-size: 1.2em; 35 font-weight: bold; 36 padding: 10px 30px; 37 background-color: crimson; 38 color:#fff; 39 border-style:none; 40} 41 42input.sm:hover{ 43 background-color:maroon; 44 color:lightgray; 45} 46 47 48input.re { 49 font-size: 1.2em; 50 font-weight: bold; 51 padding: 10px 30px; 52 background-color: cornflowerblue; 53 color:#fff; 54 border-style:none; 55} 56 57input.re:hover{ 58 background-color:steelblue; 59 color:lightgray; 60} 61 62button.plc { 63 font-size: 1.2em; 64 font-weight: bold; 65 padding: 10px 30px; 66 background-color: orange; 67 color:#fff; 68 border-style:none; 69}

js

1function init() 2{ 3 var p = new google.maps.LatLng(32.806222, 130.705791); 4 5 var opt ={ 6 zoom:15, 7 center:p, 8 mapTypeId:google.maps.MapTypeId.ROADMAP 9 }; 10 var mm = document.getElementById("mymap"); 11 var map = new google.maps.Map(mm,opt); 12} 13 14function search() 15{ 16 //var str = ["江津湖","熊本城","坪井川"]; 17 var geo= new google.maps.Geocoder(); 18 var value=myform.ck.value; 19 // var value="名古屋市"; 20 /* 21 if(val == "江津湖"){ 22 value = str[0]; 23 } 24 else if(val == "熊本城"){ 25 value = str[1]; 26 } 27 else if(val == "坪井川"){ 28 value = str[2]; 29 } 30 */ 31 //var value = "江津湖"; 32 33 var ad={address:value}; 34 geo.geocode(ad,getResult); 35} 36 37function getResult(res,status) 38{ 39 if (status == google.maps.GeocoderStatus.OK){ 40 var p =res[0].geometry.location; 41 map.setCenter(p); 42 var mp={ 43 map:map, 44 position:p 45 } 46 var mk=new google.maps.Marker(mp); 47 }else{ 48 window.alert("NG"); 49 }

###試したこと
サンプルコードを移植し直す

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2017/11/07 15:58

ソースコードから行番号を取り除いてください。回答・検証の際に邪魔です。
kei344

2017/11/07 18:23

urlは短縮せず、リンクにしてください。(teratailでは質問文中のURLにMarkdownでリンクを張ることができます https://teratail.com/help
guest

回答1

0

javascript

1map.setCenter(p);

mapが未定義のためエラーが起きていると思います。関数のスコープを見直すといいのでは。

投稿2017/11/08 00:34

Lhankor_Mhy

総合スコア35865

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問