ジオコーディング

Posted by muchag | Google Maps JavaScript API V3,PHP | 2011-08-09 (火) 16:56:51

ジオコーディング とは、住所から緯度・経度へ変換すること。
Google Maps API 以外に同様のサービスがあるようだ。

Google Code:Google Geocoding API

 

  • ジオコーディング 住所から緯度・経度を取得
  • 逆ジオコーディング 緯度・経度から住所を取得(リバースジオコーディング)
リクエスト

http://maps.google.com/maps/api/geocode/output?parameters
 

output
  • json
  • xml

いずれかを指定する。

例) http://maps.google.com/maps/api/geocode/json
 

parameters
  • address latlng とのいずれか 必須。住所。UTF-8。要 URL エンコード。ジオコーディング
  • latlng address とのいずれか 必須。緯度,経度 の書式。逆ジオコーディング
  • bounds 不明。未試行
  • region 地域コード。未試行
  • language 戻り値の言語。日本語にしたい場合は、language=ja
  • sensor 必須。センサー(GPS)機能付きの端末か否か

例) http://maps.google.com/maps/api/geocode/json?latlng=35.123456,139.123456&language=ja&sensor=false
 

PHP
ジオコーディング
  1. $strResult = file_get_contents(
  2.     'http://maps.google.com/maps/api/geocode/json'
  3.     . '?address=' . urlencode( mb_convert_encoding('東京都港区芝公園4丁目2', 'UTF-8' ) )
  4.     . '&sensor=false'
  5. );
  6. $arrResult = json_decode($strResult, true);
  7.  
  8. print_r($arrResult);
  9.  
  10. // output
  11. Array
  12. (
  13.     [results] => Array
  14.         (
  15.             [0] => Array
  16.                 (
  17.                     [address_components] => Array
  18.                         (
  19.                             [0] => Array
  20.                                 (
  21.                                     [long_name] =>
  22.                                     [short_name] =>
  23.                                     [types] => Array
  24.                                         (
  25.                                             [0] => sublocality_level_3
  26.                                             [1] => sublocality
  27.                                             [2] => political
  28.                                         )
  29.  
  30.                                 )
  31.  
  32.                             [1] => Array
  33.                                 (
  34.                                     [long_name] => 4丁目
  35.                                     [short_name] => 4丁目
  36.                                     [types] => Array
  37.                                         (
  38.                                             [0] => sublocality_level_2
  39.                                             [1] => sublocality
  40.                                             [2] => political
  41.                                         )
  42.  
  43.                                 )
  44.  
  45.                             [2] => Array
  46.                                 (
  47.                                     [long_name] => 芝公園
  48.                                     [short_name] => 芝公園
  49.                                     [types] => Array
  50.                                         (
  51.                                             [0] => sublocality_level_1
  52.                                             [1] => sublocality
  53.                                             [2] => political
  54.                                         )
  55.  
  56.                                 )
  57.  
  58.                             [3] => Array
  59.                                 (
  60.                                     [long_name] => Minato
  61.                                     [short_name] => Minato
  62.                                     [types] => Array
  63.                                         (
  64.                                             [0] => locality
  65.                                             [1] => political
  66.                                         )
  67.  
  68.                                 )
  69.  
  70.                             [4] => Array
  71.                                 (
  72.                                     [long_name] => Tokyo
  73.                                     [short_name] => Tokyo
  74.                                     [types] => Array
  75.                                         (
  76.                                             [0] => administrative_area_level_1
  77.                                             [1] => political
  78.                                         )
  79.  
  80.                                 )
  81.  
  82.                             [5] => Array
  83.                                 (
  84.                                     [long_name] => Japan
  85.                                     [short_name] => JP
  86.                                     [types] => Array
  87.                                         (
  88.                                             [0] => country
  89.                                             [1] => political
  90.                                         )
  91.  
  92.                                 )
  93.  
  94.                         )
  95.  
  96.                     [formatted_address] => Japan, Tokyo Minato芝公園4丁目2
  97.                     [geometry] => Array
  98.                         (
  99.                             [bounds] => Array
  100.                                 (
  101.                                     [northeast] => Array
  102.                                         (
  103.                                             [lat] => 35.6594319
  104.                                             [lng] => 139.7463427
  105.                                         )
  106.  
  107.                                     [southwest] => Array
  108.                                         (
  109.                                             [lat] => 35.6578418
  110.                                             [lng] => 139.7443429
  111.                                         )
  112.  
  113.                                 )
  114.  
  115.                             [location] => Array
  116.                                 (
  117.                                     [lat] => 35.6586039
  118.                                     [lng] => 139.7451331
  119.                                 )
  120.  
  121.                             [location_type] => APPROXIMATE
  122.                             [viewport] => Array
  123.                                 (
  124.                                     [northeast] => Array
  125.                                         (
  126.                                             [lat] => 35.6676693
  127.                                             [lng] => 139.7611405
  128.                                         )
  129.  
  130.                                     [southwest] => Array
  131.                                         (
  132.                                             [lat] => 35.6495375
  133.                                             [lng] => 139.7291257
  134.                                         )
  135.  
  136.                                 )
  137.  
  138.                         )
  139.  
  140.                     [types] => Array
  141.                         (
  142.                             [0] => sublocality_level_3
  143.                             [1] => sublocality
  144.                             [2] => political
  145.                         )
  146.  
  147.                 )
  148.  
  149.         )
  150.  
  151.     [status] => OK
  152. )

 

逆ジオコーディング
  1. $strResult = file_get_contents(
  2.     'http://maps.google.com/maps/api/geocode/json'
  3.     . '?latlng=35.6586039,139.7451331'
  4.     . '&language=ja'
  5.     . '&sensor=false'
  6. );
  7. $arrResult = json_decode($strResult, true);
  8.  
  9. print_r($arrResult);
  10.  
  11. // output
  12. Array
  13. (
  14.     [results] => Array
  15.         (
  16.             [0] => Array
  17.                 (
  18.                     [address_components] => Array
  19.                         (
  20.                             [0] => Array
  21.                                 (
  22.                                     [long_name] =>
  23.                                     [short_name] =>
  24.                                     [types] => Array
  25.                                         (
  26.                                             [0] => sublocality_level_4
  27.                                             [1] => sublocality
  28.                                             [2] => political
  29.                                         )
  30.  
  31.                                 )
  32.  
  33.                             [1] => Array
  34.                                 (
  35.                                     [long_name] =>
  36.                                     [short_name] =>
  37.                                     [types] => Array
  38.                                         (
  39.                                             [0] => sublocality_level_3
  40.                                             [1] => sublocality
  41.                                             [2] => political
  42.                                         )
  43.  
  44.                                 )
  45.  
  46.                             [2] => Array
  47.                                 (
  48.                                     [long_name] => 4丁目
  49.                                     [short_name] => 4丁目
  50.                                     [types] => Array
  51.                                         (
  52.                                             [0] => sublocality_level_2
  53.                                             [1] => sublocality
  54.                                             [2] => political
  55.                                         )
  56.  
  57.                                 )
  58.  
  59.                             [3] => Array
  60.                                 (
  61.                                     [long_name] => 芝公園
  62.                                     [short_name] => 芝公園
  63.                                     [types] => Array
  64.                                         (
  65.                                             [0] => sublocality_level_1
  66.                                             [1] => sublocality
  67.                                             [2] => political
  68.                                         )
  69.  
  70.                                 )
  71.  
  72.                             [4] => Array
  73.                                 (
  74.                                     [long_name] => 港区
  75.                                     [short_name] => 港区
  76.                                     [types] => Array
  77.                                         (
  78.                                             [0] => locality
  79.                                             [1] => political
  80.                                         )
  81.  
  82.                                 )
  83.  
  84.                             [5] => Array
  85.                                 (
  86.                                     [long_name] => 東京都
  87.                                     [short_name] => 東京都
  88.                                     [types] => Array
  89.                                         (
  90.                                             [0] => administrative_area_level_1
  91.                                             [1] => political
  92.                                         )
  93.  
  94.                                 )
  95.  
  96.                             [6] => Array
  97.                                 (
  98.                                     [long_name] => 日本
  99.                                     [short_name] => JP
  100.                                     [types] => Array
  101.                                         (
  102.                                             [0] => country
  103.                                             [1] => political
  104.                                         )
  105.  
  106.                                 )
  107.  
  108.                         )
  109.  
  110.                     [formatted_address] => 日本, 東京都港区芝公園4丁目2-8
  111.                     [geometry] => Array
  112.                         (
  113.                             [location] => Array
  114.                                 (
  115.                                     [lat] => 35.6587039
  116.                                     [lng] => 139.7454081
  117.                                 )
  118.  
  119.                             [location_type] => APPROXIMATE
  120.                             [viewport] => Array
  121.                                 (
  122.                                     [northeast] => Array
  123.                                         (
  124.                                             [lat] => 35.660052880292
  125.                                             [lng] => 139.74675708029
  126.                                         )
  127.  
  128.                                     [southwest] => Array
  129.                                         (
  130.                                             [lat] => 35.657354919709
  131.                                             [lng] => 139.74405911971
  132.                                         )
  133.  
  134.                                 )
  135.  
  136.                         )
  137.  
  138.                     [types] => Array
  139.                         (
  140.                             [0] => sublocality_level_4
  141.                             [1] => sublocality
  142.                             [2] => political
  143.                         )
  144.  
  145.                 )
  146.  
  147.             [1] => Array
  148.                 (
  149.                     [address_components] => Array
  150.                         (
  151.                             [0] => Array
  152.                                 (
  153.                                     [long_name] =>
  154.                                     [short_name] =>
  155.                                     [types] => Array
  156.                                         (
  157.                                             [0] => sublocality_level_3
  158.                                             [1] => sublocality
  159.                                             [2] => political
  160.                                         )
  161.  
  162.                                 )
  163.  
  164.                             [1] => Array
  165.                                 (
  166.                                     [long_name] => 4丁目
  167.                                     [short_name] => 4丁目
  168.                                     [types] => Array
  169.                                         (
  170.                                             [0] => sublocality_level_2
  171.                                             [1] => sublocality
  172.                                             [2] => political
  173.                                         )
  174.  
  175.                                 )
  176.  
  177.                             [2] => Array
  178.                                 (
  179.                                     [long_name] => 芝公園
  180.                                     [short_name] => 芝公園
  181.                                     [types] => Array
  182.                                         (
  183.                                             [0] => sublocality_level_1
  184.                                             [1] => sublocality
  185.                                             [2] => political
  186.                                         )
  187.  
  188.                                 )
  189.  
  190.                             [3] => Array
  191.                                 (
  192.                                     [long_name] => 港区
  193.                                     [short_name] => 港区
  194.                                     [types] => Array
  195.                                         (
  196.                                             [0] => locality
  197.                                             [1] => political
  198.                                         )
  199.  
  200.                                 )
  201.  
  202.                             [4] => Array
  203.                                 (
  204.                                     [long_name] => 東京都
  205.                                     [short_name] => 東京都
  206.                                     [types] => Array
  207.                                         (
  208.                                             [0] => administrative_area_level_1
  209.                                             [1] => political
  210.                                         )
  211.  
  212.                                 )
  213.  
  214.                             [5] => Array
  215.                                 (
  216.                                     [long_name] => 日本
  217.                                     [short_name] => JP
  218.                                     [types] => Array
  219.                                         (
  220.                                             [0] => country
  221.                                             [1] => political
  222.                                         )
  223.  
  224.                                 )
  225.  
  226.                         )
  227.  
  228.                     [formatted_address] => 日本, 東京都港区芝公園4丁目2
  229.                     [geometry] => Array
  230.                         (
  231.                             [bounds] => Array
  232.                                 (
  233.                                     [northeast] => Array
  234.                                         (
  235.                                             [lat] => 35.6594319
  236.                                             [lng] => 139.7463427
  237.                                         )
  238.  
  239.                                     [southwest] => Array
  240.                                         (
  241.                                             [lat] => 35.6578418
  242.                                             [lng] => 139.7443429
  243.                                         )
  244.  
  245.                                 )
  246.  
  247.                             [location] => Array
  248.                                 (
  249.                                     [lat] => 35.6586039
  250.                                     [lng] => 139.7451331
  251.                                 )
  252.  
  253.                             [location_type] => APPROXIMATE
  254.                             [viewport] => Array
  255.                                 (
  256.                                     [northeast] => Array
  257.                                         (
  258.                                             [lat] => 35.659985830291
  259.                                             [lng] => 139.74669178029
  260.                                         )
  261.  
  262.                                     [southwest] => Array
  263.                                         (
  264.                                             [lat] => 35.657287869708
  265.                                             [lng] => 139.74399381971
  266.                                         )
  267.  
  268.                                 )
  269.  
  270.                         )
  271.  
  272.                     [types] => Array
  273.                         (
  274.                             [0] => sublocality_level_3
  275.                             [1] => sublocality
  276.                             [2] => political
  277.                         )
  278.  
  279.                 )
  280.  
  281.             [2] => Array
  282.                 (
  283.                     [address_components] => Array
  284.                         (
  285.                             [0] => Array
  286.                                 (
  287.                                     [long_name] => 4丁目
  288.                                     [short_name] => 4丁目
  289.                                     [types] => Array
  290.                                         (
  291.                                             [0] => sublocality_level_2
  292.                                             [1] => sublocality
  293.                                             [2] => political
  294.                                         )
  295.  
  296.                                 )
  297.  
  298.                             [1] => Array
  299.                                 (
  300.                                     [long_name] => 芝公園
  301.                                     [short_name] => 芝公園
  302.                                     [types] => Array
  303.                                         (
  304.                                             [0] => sublocality_level_1
  305.                                             [1] => sublocality
  306.                                             [2] => political
  307.                                         )
  308.  
  309.                                 )
  310.  
  311.                             [2] => Array
  312.                                 (
  313.                                     [long_name] => 港区
  314.                                     [short_name] => 港区
  315.                                     [types] => Array
  316.                                         (
  317.                                             [0] => locality
  318.                                             [1] => political
  319.                                         )
  320.  
  321.                                 )
  322.  
  323.                             [3] => Array
  324.                                 (
  325.                                     [long_name] => 東京都
  326.                                     [short_name] => 東京都
  327.                                     [types] => Array
  328.                                         (
  329.                                             [0] => administrative_area_level_1
  330.                                             [1] => political
  331.                                         )
  332.  
  333.                                 )
  334.  
  335.                             [4] => Array
  336.                                 (
  337.                                     [long_name] => 日本
  338.                                     [short_name] => JP
  339.                                     [types] => Array
  340.                                         (
  341.                                             [0] => country
  342.                                             [1] => political
  343.                                         )
  344.  
  345.                                 )
  346.  
  347.                         )
  348.  
  349.                     [formatted_address] => 日本, 東京都港区芝公園4丁目
  350.                     [geometry] => Array
  351.                         (
  352.                             [bounds] => Array
  353.                                 (
  354.                                     [northeast] => Array
  355.                                         (
  356.                                             [lat] => 35.6598254
  357.                                             [lng] => 139.7504335
  358.                                         )
  359.  
  360.                                     [southwest] => Array
  361.                                         (
  362.                                             [lat] => 35.6529283
  363.                                             [lng] => 139.7433174
  364.                                         )
  365.  
  366.                                 )
  367.  
  368.                             [location] => Array
  369.                                 (
  370.                                     [lat] => 35.6574486
  371.                                     [lng] => 139.7470913
  372.                                 )
  373.  
  374.                             [location_type] => APPROXIMATE
  375.                             [viewport] => Array
  376.                                 (
  377.                                     [northeast] => Array
  378.                                         (
  379.                                             [lat] => 35.6598254
  380.                                             [lng] => 139.7504335
  381.                                         )
  382.  
  383.                                     [southwest] => Array
  384.                                         (
  385.                                             [lat] => 35.6529283
  386.                                             [lng] => 139.7433174
  387.                                         )
  388.  
  389.                                 )
  390.  
  391.                         )
  392.  
  393.                     [types] => Array
  394.                         (
  395.                             [0] => sublocality_level_2
  396.                             [1] => sublocality
  397.                             [2] => political
  398.                         )
  399.  
  400.                 )
  401.  
  402.             [3] => Array
  403.                 (
  404.                     [address_components] => Array
  405.                         (
  406.                             [0] => Array
  407.                                 (
  408.                                     [long_name] => 106-0044
  409.                                     [short_name] => 106-0044
  410.                                     [types] => Array
  411.                                         (
  412.                                             [0] => postal_code
  413.                                         )
  414.  
  415.                                 )
  416.  
  417.                             [1] => Array
  418.                                 (
  419.                                     [long_name] => 日本
  420.                                     [short_name] => JP
  421.                                     [types] => Array
  422.                                         (
  423.                                             [0] => country
  424.                                             [1] => political
  425.                                         )
  426.  
  427.                                 )
  428.  
  429.                         )
  430.  
  431.                     [formatted_address] =>106-0044, 日本
  432.                     [geometry] => Array
  433.                         (
  434.                             [bounds] => Array
  435.                                 (
  436.                                     [northeast] => Array
  437.                                         (
  438.                                             [lat] => 35.6600953
  439.                                             [lng] => 139.7473204
  440.                                         )
  441.  
  442.                                     [southwest] => Array
  443.                                         (
  444.                                             [lat] => 35.6534543
  445.                                             [lng] => 139.7358241
  446.                                         )
  447.  
  448.                                 )
  449.  
  450.                             [location] => Array
  451.                                 (
  452.                                     [lat] => 35.6564125
  453.                                     [lng] => 139.7425667
  454.                                 )
  455.  
  456.                             [location_type] => APPROXIMATE
  457.                             [viewport] => Array
  458.                                 (
  459.                                     [northeast] => Array
  460.                                         (
  461.                                             [lat] => 35.6600953
  462.                                             [lng] => 139.7473204
  463.                                         )
  464.  
  465.                                     [southwest] => Array
  466.                                         (
  467.                                             [lat] => 35.6534543
  468.                                             [lng] => 139.7358241
  469.                                         )
  470.  
  471.                                 )
  472.  
  473.                         )
  474.  
  475.                     [types] => Array
  476.                         (
  477.                             [0] => postal_code
  478.                         )
  479.  
  480.                 )
  481.  
  482.             [4] => Array
  483.                 (
  484.                     [address_components] => Array
  485.                         (
  486.                             [0] => Array
  487.                                 (
  488.                                     [long_name] => 芝公園
  489.                                     [short_name] => 芝公園
  490.                                     [types] => Array
  491.                                         (
  492.                                             [0] => sublocality_level_1
  493.                                             [1] => sublocality
  494.                                             [2] => political
  495.                                         )
  496.  
  497.                                 )
  498.  
  499.                             [1] => Array
  500.                                 (
  501.                                     [long_name] => 港区
  502.                                     [short_name] => 港区
  503.                                     [types] => Array
  504.                                         (
  505.                                             [0] => locality
  506.                                             [1] => political
  507.                                         )
  508.  
  509.                                 )
  510.  
  511.                             [2] => Array
  512.                                 (
  513.                                     [long_name] => 東京都
  514.                                     [short_name] => 東京都
  515.                                     [types] => Array
  516.                                         (
  517.                                             [0] => administrative_area_level_1
  518.                                             [1] => political
  519.                                         )
  520.  
  521.                                 )
  522.  
  523.                             [3] => Array
  524.                                 (
  525.                                     [long_name] => 日本
  526.                                     [short_name] => JP
  527.                                     [types] => Array
  528.                                         (
  529.                                             [0] => country
  530.                                             [1] => political
  531.                                         )
  532.  
  533.                                 )
  534.  
  535.                         )
  536.  
  537.                     [formatted_address] => 日本, 東京都港区芝公園
  538.                     [geometry] => Array
  539.                         (
  540.                             [bounds] => Array
  541.                                 (
  542.                                     [northeast] => Array
  543.                                         (
  544.                                             [lat] => 35.6621377
  545.                                             [lng] => 139.7528936
  546.                                         )
  547.  
  548.                                     [southwest] => Array
  549.                                         (
  550.                                             [lat] => 35.6529258
  551.                                             [lng] => 139.7432918
  552.                                         )
  553.  
  554.                                 )
  555.  
  556.                             [location] => Array
  557.                                 (
  558.                                     [lat] => 35.6575015
  559.                                     [lng] => 139.7521575
  560.                                 )
  561.  
  562.                             [location_type] => APPROXIMATE
  563.                             [viewport] => Array
  564.                                 (
  565.                                     [northeast] => Array
  566.                                         (
  567.                                             [lat] => 35.6621377
  568.                                             [lng] => 139.7528936
  569.                                         )
  570.  
  571.                                     [southwest] => Array
  572.                                         (
  573.                                             [lat] => 35.6529258
  574.                                             [lng] => 139.7432918
  575.                                         )
  576.  
  577.                                 )
  578.  
  579.                         )
  580.  
  581.                     [types] => Array
  582.                         (
  583.                             [0] => sublocality_level_1
  584.                             [1] => sublocality
  585.                             [2] => political
  586.                         )
  587.  
  588.                 )
  589.  
  590.             [5] => Array
  591.                 (
  592.                     [address_components] => Array
  593.                         (
  594.                             [0] => Array
  595.                                 (
  596.                                     [long_name] => 105-0011
  597.                                     [short_name] => 105-0011
  598.                                     [types] => Array
  599.                                         (
  600.                                             [0] => postal_code
  601.                                         )
  602.  
  603.                                 )
  604.  
  605.                             [1] => Array
  606.                                 (
  607.                                     [long_name] => 日本
  608.                                     [short_name] => JP
  609.                                     [types] => Array
  610.                                         (
  611.                                             [0] => country
  612.                                             [1] => political
  613.                                         )
  614.  
  615.                                 )
  616.  
  617.                         )
  618.  
  619.                     [formatted_address] =>105-0011, 日本
  620.                     [geometry] => Array
  621.                         (
  622.                             [bounds] => Array
  623.                                 (
  624.                                     [northeast] => Array
  625.                                         (
  626.                                             [lat] => 35.6625143
  627.                                             [lng] => 139.7537082
  628.                                         )
  629.  
  630.                                     [southwest] => Array
  631.                                         (
  632.                                             [lat] => 35.6509114
  633.                                             [lng] => 139.7434881
  634.                                         )
  635.  
  636.                                 )
  637.  
  638.                             [location] => Array
  639.                                 (
  640.                                     [lat] => 35.6575015
  641.                                     [lng] => 139.7521575
  642.                                 )
  643.  
  644.                             [location_type] => APPROXIMATE
  645.                             [viewport] => Array
  646.                                 (
  647.                                     [northeast] => Array
  648.                                         (
  649.                                             [lat] => 35.6625143
  650.                                             [lng] => 139.7537082
  651.                                         )
  652.  
  653.                                     [southwest] => Array
  654.                                         (
  655.                                             [lat] => 35.6509114
  656.                                             [lng] => 139.7434881
  657.                                         )
  658.  
  659.                                 )
  660.  
  661.                         )
  662.  
  663.                     [types] => Array
  664.                         (
  665.                             [0] => postal_code
  666.                         )
  667.  
  668.                 )
  669.  
  670.             [6] => Array
  671.                 (
  672.                     [address_components] => Array
  673.                         (
  674.                             [0] => Array
  675.                                 (
  676.                                     [long_name] => 港区
  677.                                     [short_name] => 港区
  678.                                     [types] => Array
  679.                                         (
  680.                                             [0] => locality
  681.                                             [1] => political
  682.                                         )
  683.  
  684.                                 )
  685.  
  686.                             [1] => Array
  687.                                 (
  688.                                     [long_name] => 東京都
  689.                                     [short_name] => 東京都
  690.                                     [types] => Array
  691.                                         (
  692.                                             [0] => administrative_area_level_1
  693.                                             [1] => political
  694.                                         )
  695.  
  696.                                 )
  697.  
  698.                             [2] => Array
  699.                                 (
  700.                                     [long_name] => 日本
  701.                                     [short_name] => JP
  702.                                     [types] => Array
  703.                                         (
  704.                                             [0] => country
  705.                                             [1] => political
  706.                                         )
  707.  
  708.                                 )
  709.  
  710.                         )
  711.  
  712.                     [formatted_address] => 日本, 東京都港区
  713.                     [geometry] => Array
  714.                         (
  715.                             [bounds] => Array
  716.                                 (
  717.                                     [northeast] => Array
  718.                                         (
  719.                                             [lat] => 35.6825958
  720.                                             [lng] => 139.7828356
  721.                                         )
  722.  
  723.                                     [southwest] => Array
  724.                                         (
  725.                                             [lat] => 35.6231224
  726.                                             [lng] => 139.7087473
  727.                                         )
  728.  
  729.                                 )
  730.  
  731.                             [location] => Array
  732.                                 (
  733.                                     [lat] => 35.6580681
  734.                                     [lng] => 139.7515992
  735.                                 )
  736.  
  737.                             [location_type] => APPROXIMATE
  738.                             [viewport] => Array
  739.                                 (
  740.                                     [northeast] => Array
  741.                                         (
  742.                                             [lat] => 35.6825958
  743.                                             [lng] => 139.7828356
  744.                                         )
  745.  
  746.                                     [southwest] => Array
  747.                                         (
  748.                                             [lat] => 35.6231224
  749.                                             [lng] => 139.7087473
  750.                                         )
  751.  
  752.                                 )
  753.  
  754.                         )
  755.  
  756.                     [types] => Array
  757.                         (
  758.                             [0] => locality
  759.                             [1] => political
  760.                         )
  761.  
  762.                 )
  763.  
  764.             [7] => Array
  765.                 (
  766.                     [address_components] => Array
  767.                         (
  768.                             [0] => Array
  769.                                 (
  770.                                     [long_name] => 東京都
  771.                                     [short_name] => 東京都
  772.                                     [types] => Array
  773.                                         (
  774.                                             [0] => administrative_area_level_1
  775.                                             [1] => political
  776.                                         )
  777.  
  778.                                 )
  779.  
  780.                             [1] => Array
  781.                                 (
  782.                                     [long_name] => 日本
  783.                                     [short_name] => JP
  784.                                     [types] => Array
  785.                                         (
  786.                                             [0] => country
  787.                                             [1] => political
  788.                                         )
  789.  
  790.                                 )
  791.  
  792.                         )
  793.  
  794.                     [formatted_address] => 日本, 東京都
  795.                     [geometry] => Array
  796.                         (
  797.                             [bounds] => Array
  798.                                 (
  799.                                     [northeast] => Array
  800.                                         (
  801.                                             [lat] => 35.898644
  802.                                             [lng] => 139.919853
  803.                                         )
  804.  
  805.                                     [southwest] => Array
  806.                                         (
  807.                                             [lat] => 35.50119
  808.                                             [lng] => 138.942758
  809.                                         )
  810.  
  811.                                 )
  812.  
  813.                             [location] => Array
  814.                                 (
  815.                                     [lat] => 35.6894875
  816.                                     [lng] => 139.6917064
  817.                                 )
  818.  
  819.                             [location_type] => APPROXIMATE
  820.                             [viewport] => Array
  821.                                 (
  822.                                     [northeast] => Array
  823.                                         (
  824.                                             [lat] => 35.898644
  825.                                             [lng] => 139.919853
  826.                                         )
  827.  
  828.                                     [southwest] => Array
  829.                                         (
  830.                                             [lat] => 35.50119
  831.                                             [lng] => 138.942758
  832.                                         )
  833.  
  834.                                 )
  835.  
  836.                         )
  837.  
  838.                     [types] => Array
  839.                         (
  840.                             [0] => administrative_area_level_1
  841.                             [1] => political
  842.                         )
  843.  
  844.                 )
  845.  
  846.             [8] => Array
  847.                 (
  848.                     [address_components] => Array
  849.                         (
  850.                             [0] => Array
  851.                                 (
  852.                                     [long_name] => 日本
  853.                                     [short_name] => JP
  854.                                     [types] => Array
  855.                                         (
  856.                                             [0] => country
  857.                                             [1] => political
  858.                                         )
  859.  
  860.                                 )
  861.  
  862.                         )
  863.  
  864.                     [formatted_address] => 日本
  865.                     [geometry] => Array
  866.                         (
  867.                             [bounds] => Array
  868.                                 (
  869.                                     [northeast] => Array
  870.                                         (
  871.                                             [lat] => 45.6691047
  872.                                             [lng] => 149.120962
  873.                                         )
  874.  
  875.                                     [southwest] => Array
  876.                                         (
  877.                                             [lat] => 23.9207972
  878.                                             [lng] => 122.91
  879.                                         )
  880.  
  881.                                 )
  882.  
  883.                             [location] => Array
  884.                                 (
  885.                                     [lat] => 36.204824
  886.                                     [lng] => 138.252924
  887.                                 )
  888.  
  889.                             [location_type] => APPROXIMATE
  890.                             [viewport] => Array
  891.                                 (
  892.                                     [northeast] => Array
  893.                                         (
  894.                                             [lat] => 45.6691047
  895.                                             [lng] => 149.120962
  896.                                         )
  897.  
  898.                                     [southwest] => Array
  899.                                         (
  900.                                             [lat] => 23.9207972
  901.                                             [lng] => 122.91
  902.                                         )
  903.  
  904.                                 )
  905.  
  906.                         )
  907.  
  908.                     [types] => Array
  909.                         (
  910.                             [0] => country
  911.                             [1] => political
  912.                         )
  913.  
  914.                 )
  915.  
  916.         )
  917.  
  918.     [status] => OK
  919. )
Google Maps JavaScript API V3,PHP | 2011-08-09 (火) 16:56:51 |

event

Posted by muchag | Google Maps JavaScript API V3 | 2011-07-22 (金) 22:21:39

Google マップに対してユーザがことを起こすと
event オブジェクトが生成される。

Google Code:Google Maps JavaScript API V3 のイベント

種類
  • 状態変化イベント
  • ユーザイベント

API クラス毎に様々なイベントが用意されている。

Google Code:Google Maps JavaScript API V3 リファレンス
 

受け取り

addListener(instance:Object, eventName:string, handler:Function)

Google Code:Google Maps JavaScript API V3 リファレンス MapsEventListener オブジェクトの仕様

第1引数:イベントを受け取るオブジェクト
第2引数:イベント名称
第3引数:イベント処理メソッド
 

  1. /* Map オブジェクトの zoom 値が変更されるイベント */
  2. google.maps.event.addListener(map, 'zoom_changed', function() {
  3.     setTimeout(moveToDarwin, 3000);
  4. });
  5.  
  6. /* Marker オブジェクトが click されるイベント */
  7. google.maps.event.addListener(marker, 'click', function() {
  8.     map.setZoom(8);
  9. });

 

プロパティ
latLng

イベントが発生した位置のカーソルの緯度/経度。

  1. /* Map オブジェクトの zoom 値が変更されるイベント */
  2. google.maps.event.addListener(map, 'click', function(event) {
  3.     var latlng = event.latLng; /* ← クリックされた場所の緯度・経度 */
  4. });
  5.  
  6. /* Marker オブジェクトが click されるイベント */
  7. google.maps.event.addListener(marker, 'click', function(event) {
  8.     var latlng = event.latLng; /* ← クリックされたマーカーの緯度・経度 */
  9. });

 
他にも event オブジェクトのプロパティはあるらしいのだが
ブラウザ依存だそうで、ブラウザによって異なる。

そのため使い辛いようだ。

よって、上述の latLng プロパティですら

  1. var latlng = event.latLng;
  2.  
  3. とはせずに
  4.  
  5. var latlng = this.getPosition();

という記述を奨める記事があった。
おやじプログラマー日記:「GoogleMap API V3」 の使い方その4(イベント)

Google Maps JavaScript API V3 | 2011-07-22 (金) 22:21:39 |

マーカーとバルーン

Posted by muchag | Google Maps JavaScript API V3 | 2011-07-22 (金) 10:36:41

クロージャ・・・何となく使えるようになった思っていたのは
気のせいだったらしい。

何度もやり直した。
まだまだまだまだだ。

新しい記事

infoWindow 複数配置
けど、こっちが不要かどうかは未精査。

1個設置
  1. function initialize() {
  2.  
  3.     /* マップ */
  4.     var myOptions = {
  5.         zoom: 5,
  6.         center: new google.maps.LatLng(35, 139), // 適当
  7.         mapTypeId: google.maps.MapTypeId.ROADMAP
  8.     }
  9.     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  10.  
  11.     /* マーカー */
  12.     var marker = new google.maps.Marker({
  13.         position: new google.maps.LatLng(35.362873, 138.731567),
  14.         map: map,
  15.     });
  16.  
  17.     /* バルーン */
  18.     var infowindow = new google.maps.InfoWindow({
  19.         content: "富士山"
  20.     });
  21.     infowindow.open(marker.getMap(), marker);
  22. }

 

 

クリックイベント

上の例だと最初からバルーンが表示されているので
マーカーをクリックしたらバルーンが表示されるタイプに改変。
 

  1. function initialize() {
  2.  
  3.     /* マップ */
  4.     var myOptions = {
  5.         zoom: 5,
  6.         center: new google.maps.LatLng(35, 139), // 適当
  7.         mapTypeId: google.maps.MapTypeId.ROADMAP
  8.     }
  9.     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  10.  
  11.     /* マーカー */
  12.     var marker = new google.maps.Marker({
  13.         position: new google.maps.LatLng(35.362873, 138.731567),
  14.         map: map,
  15.     });
  16.  
  17.     /* バルーン */
  18. -   var infowindow = new google.maps.InfoWindow({
  19. -       content: "富士山"
  20. -   });
  21. -   infowindow.open(marker.getMap(), marker);
  22.  
  23. +   google.maps.event.addListener(marker, 'click', function(event) {
  24. +       var infowindow = new google.maps.InfoWindow({
  25. +           content: "富士山"
  26. +       });
  27. +       infowindow.open(marker.getMap(), marker);
  28. +   });
  29. }

 

複数設置

問題はここから。

マーカーを複数設置するのは問題なし。

でも、そのマーカーのクリックイベントリスナーを
前述の例の如く設定すると、どこをクリックしても
最後のマーカーが反応してしまう。

そこでイベントリスナーは関数にして
外へ出す。
 

  1. function initialize()
  2. {
  3.     /* マップ */
  4.     var myOptions = {
  5.         zoom: 5,
  6.         center: new google.maps.LatLng(35, 139), // 適当
  7.         mapTypeId: google.maps.MapTypeId.ROADMAP
  8.     }
  9.     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  10.  
  11.     var data = new Array();
  12.     data.push({lat: 35.362873, lng: 138.731567, content: "富士山"});
  13.     data.push({lat: 34.295929, lng: 132.319870, content: "厳島神社"});
  14.     data.push({lat: 43.366375, lng: 142.340302, content: "ラベンダーの森"});
  15.  
  16.     for (var i = 0; i < data.length; i++) {
  17.  
  18.         /* マーカー */
  19.         var marker = new google.maps.Marker({
  20.             position: new google.maps.LatLng(data[i].lat, data[i].lng),
  21.             map: map,
  22.         });
  23.  
  24.         /* バルーン */
  25.         var htmlContent = "<dl><dt>" + data[i].content + "</dt><dd></dd></dl>";
  26.         attachMarkerClickEvent(marker, htmlContent);
  27.     }
  28. }
  29.  
  30. function attachMarkerClickEvent(marker, htmlContent)
  31. {
  32.     google.maps.event.addListener(marker, 'click', function(event) {
  33.  
  34.         var infowindow = new google.maps.InfoWindow({
  35.             content: htmlContent
  36.         });
  37.         infowindow.open(marker.getMap(), marker);
  38.     });
  39. }


これで無事に複数のマーカーとそれぞれのバルーンを設置できた。
 

バルーンの制御

しかし、このままだとバルーンが同時にいくつも表示されるし
1つのマーカーでもクリックするたびに同じ位置に新たにバルーンが表示されてしまうので
その辺を改良。
 

  1. +var currentInfoWindow = null;   /* 現在開いているバルーン格納変数 */
  2.  
  3. function initialize()
  4. {
  5.     /* マップ */
  6.     var myOptions = {
  7.         zoom: 5,
  8.         center: new google.maps.LatLng(35, 139), // 適当
  9.         mapTypeId: google.maps.MapTypeId.ROADMAP
  10.     }
  11.     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  12.  
  13.     var data = new Array();
  14.     data.push({lat: 35.362873, lng: 138.731567, content: "富士山"});
  15.     data.push({lat: 34.295929, lng: 132.319870, content: "厳島神社"});
  16.     data.push({lat: 43.366375, lng: 142.340302, content: "ラベンダーの森"});
  17.  
  18.     for (var i = 0; i < data.length; i++) {
  19.  
  20.         /* マーカー */
  21.         var marker = new google.maps.Marker({
  22.             position: new google.maps.LatLng(data[i].lat, data[i].lng),
  23.             map: map,
  24.         });
  25.  
  26.         /* バルーン */
  27.         var htmlContent = "<dl><dt>" + data[i].content + "</dt><dd></dd></dl>";
  28.         attachMarkerClickEvent(marker, htmlContent);
  29.     }
  30. }
  31.  
  32. function attachMarkerClickEvent(marker, htmlContent) {
  33.     google.maps.event.addListener(marker, 'click', function(event) {
  34.  
  35. +       if (currentInfoWindow) currentInfoWindow.close();
  36.  
  37.         var infowindow = new google.maps.InfoWindow({
  38.             content: htmlContent
  39.         });
  40.         infowindow.open(marker.getMap(), marker);
  41.  
  42. +       currentInfoWindow = infowindow;
  43.     });
  44. }

 

1行目

1行目で、現在開いているバルーンを格納する変数を定義。
 

35行目

35行目で、現在開いているバルーンがあれば
まず閉じる。
 

42行目

42行目で新たに開いたバルーンを変数へ格納。
 

参考元サイト

なんちゃって☆めも:複数のgoogle.maps.Markerに吹き出しをつける
Google Maps 活用講座:Maps API v3でv2のように、1つだけの情報ウィンドウが開くようにする(1)

Google Maps JavaScript API V3 | 2011-07-22 (金) 10:36:41 |