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

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

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

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1797閲覧

GoogleMapAPIのマーカー表示について

Mtw0706

総合スコア24

Google API

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2016/07/07 12:42

編集2016/07/07 12:52

郵便番号から得られた住所を元に地図上にマーカー表示を行おうと思っています。
住所からGoogleAPIを利用して、緯度経度情報を取得、地図の更新を行う予定です。

現在、緯度経度情報の取得には成功しているのですが、地図の更新は下記のエラーで実行できません。
Test.js:19TypeError: undefined is not an object (evaluating 'map.setCenter')
どのようにすれば解決できますでしょうか。

実行環境は、Safari、Chrome。ともにローカルで実行しています。

#test.js

javascript

1var map; 2var geocoder; 3var marker; 4function initialize() { 5 var latlng = new google.maps.LatLng(35,135); 6 var opts = { 7 zoom: 15, 8 center: latlng, 9 mapTypeId: google.maps.MapTypeId.ROADMAP 10 }; 11 var map = new google.maps.Map(document.getElementById("map_canvas"), opts); 12} 13 14function SearchMap(address) { 15 var geocoder = new google.maps.Geocoder(); 16 geocoder.geocode( { 'address': address, 'language': 'ja'}, function(results, status) { 17 if (status == google.maps.GeocoderStatus.OK) { 18 alert(results[0].geometry.location); 19 map.setCenter(results[0].geometry.location); 20 } else { 21 console.log('Geocode was not successful for the following reason: ' + status); 22 } 23 }); 24} 25 26function Address(){ 27 var button = document.getElementById("button"); 28 var address1 = UserInput.region.value; 29 var address2 = UserInput.locality.value; 30 var address3 = UserInput.streetaddress.value; 31 var address = address1 + address2 + address3; 32 33 SearchMap(address); 34}

#Test.html

html

1<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3<html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 6 <meta name="robots" content="noindex,nofollow,noarchive" /> 7 <title>地図検索</title> 8 9 <script src="test.js" type="text/javascript"></script> 10 <script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?key="API_KEY"&sensor=false"></script> 11 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 12 <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script> 13 14 <script type="text/javascript"> 15 16 </script> 17 18 </head> 19 20 <body onload="initialize()"> 21 <p>郵便番号を入力してください。</p> 22 <form name="UserInput" class="h-adr"> 23 <span class="p-country-name" style="display:none;">Japan</span> 24<input type="text" class="p-postal-code" size="3" maxlength="3"> 25 -<input type="text" class="p-postal-code" size="4" maxlength="4"> 26 <input name="region" type="text" class="p-region"> 27 <input name="locality" type="text" class="p-locality"> 28 <input name="streetaddress" type="text" class="p-street-address"> 29 30 <input type="button" value="地図検索" onclick="Address()" id="button"> 31 <!-- <button onclick="Address()">地図検索</button> --> 32 </form> 33 34 <p>検索結果</p> 35 <div id="map_canvas" style="width:500px; height:300px"></div> 36 </body> 37</html>

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

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

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

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

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

kei344

2016/07/07 12:48

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
Mtw0706

2016/07/07 12:53

すいません、見辛かったですね。修正いたしました。
kei344

2016/07/07 12:54

「if (status」の直前に「console.log(results);」を入れて、その値を質問文に追記おねがいします。
Mtw0706

2016/07/07 13:07

出力される情報が膨大なのですが、どのようにすればよいでしょう。
kei344

2016/07/07 15:18

ひとまずconsole.log(results[0].geometry.location);にしてalert()を消してください。
Mtw0706

2016/07/07 15:56

すいません、解決いたしました。 ご協力ありがとうございます。
guest

回答1

0

ベストアンサー

JavaScript

1// var map = new google.maps.Map(document.getElementById("map_canvas"), opts); 2// ↓ 3 map = new google.maps.Map(document.getElementById("map_canvas"), opts);

initializeのローカルスコープ内の変数mapに割り当てられているための問題だと思います。

投稿2016/07/07 15:25

kei344

総合スコア69364

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

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

Mtw0706

2016/07/07 15:55

無事解決いたしました。 本当にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問