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

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

ただいまの
回答率

91.00%

  • JavaScript

    13865questions

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

  • HTML5

    3396questions

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

  • CSS3

    1752questions

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

  • Google Map

    305questions

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

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

受付中

回答 1

投稿 編集

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

FumineAnli

score 0

前提・実現したいこと

Google map の表示場所を変更したい

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

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

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

URL:
https://goo.gl/xcfKV1

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

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

該当のソースコード

<!doctype html>
<html lang="ja">
<head>
<title>
join us!
</title>
<link rel="stylesheet"  href="m1.css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" src="m1.js">
</script>
</head>

<body onload="init()">
<h1>ジョイナス!</h1>
<h2>イベント参加者募集・希望サイト</h2>
<p>

<div id="here"></div>

<form id="myform" action="m1.html">

ID _____  <input type="text" name="id" value=""/>
<p>
password  <input type="password" value=""/>
<p>

<h3>参加申し込み可能なイベント </h3>
<p>

<!--
<input type="checkbox" name="ck" value="江津湖の清掃活動">江津湖の清掃活動……</input>
<font color="red">あと3名</font>
<p>
<input type="checkbox" name="ck" value="熊本城の観光案内">熊本城の観光案内……</input>
<font color="red">あと5名</font>
<p>
<input type="checkbox" name="ck" value="坪井川の灯篭流し">坪井川の灯篭流し……</input>
<font color="red">あと2名</font>
<p>
-->

<select id ="ck" size="3">
<option value="熊本県熊本市東区中央区江津3丁目7">江津湖の清掃活動</option>
<option value="熊本県熊本市中央区本丸1-1">熊本城の観光案内</option>
<option value="熊本県熊本市北区打越町44">坪井川の灯篭流し</option>
</select>

<p>
<div id="mymap" style="width:600px;height:400px;"></div>
<p>

<p>
<button class="plc" name="place" type="button" onclick="search()" value="PLACE">場所をみる</button>
<p>

<h3>参加できる日程</h3>
<p>
  To  <input type="date" name="to" value="2017-10-27"/>
~  From  <input type="date" name="from "value="2017-10-28"/>
<p>

<h3>当日の集合場所</h3>
<p>
<input type="radio" name="rd" value="現地">現地</input>
<input type="radio" name="rd" value="学校">学校</input>
<p>

<h3>学年</h3>
<p>
<select name="n1" size="5">
    <option name="list" value="1年生">1</option>
    <option name="list" value="2年生">2</option>
    <option name="list" value="3年生">3</option>
    <option name="list" value="4年生">4</option>
    <option name="list" value="5年生">5</option>
    <option name="list" value="専攻科1年生">AE1</option>
    <option name="list" value="専攻科2年生">AE2</option>
</select>
<p>

<h3>Tシャツのサイズ</h3>
<p>
<select name="n2">
    <option name="drop" value="XSサイズ">XS</option>
    <option name="drop" value="Sサイズ">S</option>
    <option name="drop" value="Mサイズ">M</option>
    <option name="drop" value="Lサイズ">L</option>
    <option name="drop" value="XLサイズ">XL</option>
</select>
<p>

<h3>備考欄</h3>
<p>
<textarea name="memo" cols="10" rows="10"></textarea>
<p>

<input type="submit" class="sm" onclick="set()" value="確定"/>
<input type="reset" class="re" value="クリア"/>


</form>

</body>
</html>
h1{
        font-size:40px;
        font-weight: bold;
        padding:10px 30px;
        background-color: lightgreen;
        color:#123456;
        border-style:none;
}

h2{
        color:#123456;
}

h3{
        font-size: 1.2em;
        font-weight: bold;
        padding: 10px 30px;
        background-color: lightgreen;
        color:#fff;
        border-style:none;
}

  #myform {
        // float:left;
         margin:0px 0px 10px 30px;
   }

  #but{
         //float:left;
         margin:0px 10px 0px 100px;
  }

input.sm {
        font-size: 1.2em;
        font-weight: bold;
        padding: 10px 30px;
        background-color: crimson;
        color:#fff;
        border-style:none;
}

input.sm:hover{
        background-color:maroon;
        color:lightgray;
}


input.re {
        font-size: 1.2em;
        font-weight: bold;
        padding: 10px 30px;
        background-color: cornflowerblue;
        color:#fff;
        border-style:none;
}

input.re:hover{
        background-color:steelblue;
        color:lightgray;
}

button.plc {
        font-size: 1.2em;
        font-weight: bold;
        padding: 10px 30px;
        background-color: orange;
        color:#fff;
        border-style:none;
}
function init()
{
        var p = new google.maps.LatLng(32.806222, 130.705791);

        var opt ={
                zoom:15,
                center:p,
                mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        var mm = document.getElementById("mymap");
        var map = new google.maps.Map(mm,opt);
}

function search()
{
        //var str = ["江津湖","熊本城","坪井川"];
        var geo= new google.maps.Geocoder();
        var value=myform.ck.value;
       // var value="名古屋市";
        /*
        if(val == "江津湖"){
              value = str[0];
        }
        else if(val == "熊本城"){
              value = str[1];
        }
        else if(val == "坪井川"){
              value = str[2];
        }
       */
        //var value = "江津湖";

        var ad={address:value};
         geo.geocode(ad,getResult);
}

function getResult(res,status)
{
  if (status == google.maps.GeocoderStatus.OK){
     var p =res[0].geometry.location;
         map.setCenter(p);
        var mp={
                 map:map,
                 position:p
             }
        var mk=new google.maps.Marker(mp);
       }else{
           window.alert("NG");
       }

試したこと

サンプルコードを移植し直す

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

より詳細な情報

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • Kosuke_Shibuya

    2017/11/08 00:58

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

    キャンセル

  • kei344

    2017/11/08 03:23

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

    キャンセル

回答 1

+1

map.setCenter(p);


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

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

関連した質問

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

  • JavaScript

    13865questions

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

  • HTML5

    3396questions

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

  • CSS3

    1752questions

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

  • Google Map

    305questions

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