JoyArtは大阪を拠点にフリーランスで活動するマークアップエンジニアです。年末年始休業のお知らせ2015年12月26日-カテゴリー:お知らせ誠に勝手ながら、2016年1月1日(金)から2016年1月4日(月)は年末年始休業とさせていただきます。ご不便をおかけしますが、何卒ご理解いただきますようお願いいたします。入力された施設名や住所から経度緯度を取得し、グーグルマップにマーカーを立てる2015年03月08日-カテゴリー:javascript先日、電車の座席に座っていた時、乗ってきたおばあさんに席を譲ろうとしたところ、かたくなに拒否され恥をかいたという話はどうでもいいんですが、久々の更新になります。今回は、グーグルマップのAPIを使い施設名や住所から経度緯度を取得し、グーグルマップにマーカーを立てる手法をご紹介いたします。type="text/javascript"></script>まず、グーグルマップのAPIを読み込みます。本来はAPIキーを指定しないといけないんですが、指定しなくても一応は動きます。次にHTMLの記述です。500px;"></div>ID:search_formで囲っているのが、施設名や住所を入力するためのテキストフィールドと検索をする際に押す検索ボタンです。ID:mapはグーグルマップを表示するためのボックスです。最後にjavascriptの記述です。{alert("情報の取得に失敗しました");}});}</script>window.onloadでページのロードが完了した際に、地図の初期化を実行しています。google.maps.Map~略~」でID:mapに地図を表示します。{~略~」では、変数「address_str」に代入されている文字を元に経度緯度情報を取得しています。「map.setCenter(results[0].geometry.location);」では、取得した経度緯度情報が地図の中心になるように移動させています。google.maps.Marker({~略~」で地図にマーカーをセットしています。マーカーの座標は、地図の中心座標(取得した経度緯度情報)です。geo_search_map()は、検索ボタンが押された際に実行される関数ですが、処理の内容はテキストフィールドから文字を取得する以外は、上記で説明したものと同じ内容になっています。サンプルはこちら年末年始休業のお知らせ2014年12月10日-カテゴリー:お知らせ誠に勝手ながら、2015年1月1日(木)から2015年1月5日(月)は年末年始休業とさせていただきます。ご不便をおかけしますが、何卒ご理解いただきますようお願いいたします。お知らせ入力された施設名や住所から経度緯度を取得し、グーグルマップにマーカーを立てる年末年始休業のお知らせjqueryを使ってフォームに入力された文字数をチェックするビジネスキャリア検定をうけてきました。