温故知新 linux実践講座

温故知新 linux実践講座

温故知新。linuxを使いこなしてみよう。

ホーム » スクリプト入門 » google maps api v3を使って住所から緯度経度変換する

— 広告 —


— 広告 —

google maps api v3を使って住所から緯度経度変換する

所要時間 約 5分

マーカーを変更して少しだけオリジナルな雰囲気にしてみました。


sample.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>Google Maps v3 ぴよふぁくとりぃ</title>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script src="sample.js" type="text/javascript"></script>
</head>
<body onload="initialize()">
<table style="width:300px;border:0;" >
<tr style="background-color:#dddddd;">
<th style="width:120px">項目</th>
<th>情報</th></tr>
<tr><td>緯度</td><td id="latitude"></td></tr>
<tr><td>経度</td><td id="longitude"></td></tr>
</table>
<input id="address" type="textbox" value="仙台市青葉区角五郎1-5-40">
<br>
<input type="button" value="緯度経度変換" onclick="codeAddress()">
<br><br>
<div id="map_canvas" style="width:300px; height:300px"></div>
</body>
</html>

sample.js

var geocoder;
var map;
function initialize() {
  geocoder = new google.maps.Geocoder();
  // 仙台市青葉区角五郎1-5-40
  var latlng = new google.maps.LatLng(38.2667202,140.8516019);
  var opts = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
    map = new google.maps.Map
    (document.getElementById("map_canvas"), opts);
    codeAddress();
}
 
function codeAddress() {
  var address = document.getElementById("address").value;
  if (geocoder) {
    geocoder.geocode( { 'address': address,'region': 'jp'},
    function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var bounds = new google.maps.LatLngBounds();
        for (var r in results) {
          if (results[r].geometry) {
            var latlng = results[r].geometry.location;
            bounds.extend(latlng);
            new google.maps.Marker({
              icon:{ url:'http://hoge.com/piyogeo.gif' },
              title:'ぴよふぁくとりぃ',
              position: latlng,map: map
            });
          document.getElementById('latitude').innerHTML = latlng.lat();
          document.getElementById('longitude').innerHTML = latlng.lng();
          }
       }
     }else{
       alert("Geocode 取得に失敗しました reason: "
         + status);
     }
   });
  }  // if (geocoder)
}

google maps api v3を使って住所から緯度経度変換する

sample.html の

<div id="map_canvas" style="width:300px; height:300px"></div>

<div id="map_canvas" style="width:0px; height:0px"></div>

に変更。

-- 広告 -- -- 広告 --

 

この記事に関連する記事一覧

アフィリエイトで稼ぐ
プロフィール

ぴよふぁくとりぃです。

職業は自宅でサーバ管理、資格は薬剤師です。
趣味も職業もパソコンラブです。
よろしくね。
連絡先: admin@arakanoj.com
URL: http://piyofactory.com

検索
人気ページ
東京電力予想最大電力(万kW)
twitter
使い方を知れば知るほど楽しく使える Linux。
Linux の基本を覚えてもっともっと楽しいコンピュータの使い方を身につけましょう。