fetch markers with AJAX (dynamic loading markers)
Map
MarkerはJavaScript API。住所 <--> 緯度経度変換はGeocoding API。経路検索はDirections API or distance matrix API
Airbnb
南西と北東の座標値をサーバに送信している。これでfetchすべき四角形がわかるので、サーバ側でDBから検索するイメージ
https://www.airbnb.jp/search/search_results?page=1&source=map&airbnb_plus_only=false& sw_lat=35.667819519522304&sw_lng=139.7638565898268& ne_lat=35.70103244505895&ne_lng=139.78093689683362& search_by_map=true&location=%E6%9D%B1%E4%BA%AC%E9%83%BD&checkin=2016%2F09%2F21&checkout=2016%2F09%2F22&guests=1&ss_id=wlhdh25y
食べログ
lat lonなので注意（longitudeはgoogleではlngと略している）。サーバに送信している座標値自体はAirbnbと同じかんじ。
https://s.tabelog.com/smartphone/restaurant_list/get_next_restaurants_for_map?LstCos=0&LstCosT=0&LstReserve=0&LstRev=&LstSitu=0&LstSmoking=0&additional_cond_flg=1&area_datatype=Prefecture&area_id=13&keyword_datatype=Genre2&keyword_id=39&pcd=13&sa=%E6%9D%B1%E4%BA%AC%EF%BC%88%E3%81%99%E3%81%B9%E3%81%A6%EF%BC%89&search_region=japan&sk=%E5%B1%85%E9%85%92%E5%B1%8B&svd=20160904&svps=2&svt=2100&sw=&tid=&utf8=%E2%9C%93& maxLat=35.94620312705464&maxLon=139.78890843949216& minLat=35.42530271535668&minLon=139.2739243086328& SrtT=trend&page=1
Responseデータ
Markers: [{,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…}, {,…},…]
PrMarkers: []
PrRestaurants: []
RstCount: 32063
各Markerの中身はこんな。InfoWindowのHTMLをそのまま送ってる。
content: "↵<article class="rst-popup-box">↵ <a href="https://s.tabelog.com/tokyo/A1311/A131101/13168661/" class="rst-selected">↵ <img src="https://tabelog.ssl.k-img.com/restaurant/images/Rvw/41401/50x50_square_41401718.jpg" width="50" height="50" alt="" />↵ <div class="rst-info">↵ <p class="rst-title">まいか アトレ上野店</p>↵ <p class="rst-ag">（上野、京成上野、上野御徒町 / 居酒屋、魚介料理・海鮮料理、和食（その他））</p>↵ <div class="rst-score">↵ <p class="score30"><span>★</span><span>★</span><span>★</span><span>☆</span><span>☆</span><b>3.07</b></p>↵ </div>↵ </div>↵ </a>↵</article>↵↵<p class="close-popup"><a href="#" id="restaurant_info_hide">×</a></p>↵<div class="floatclear"></div>↵" lat: "35.711847931271926" lng: "139.77587433440803" score: 3.07 vac: false
Distance API vs. distance matrix API
[GoogleMapAPI]ルート計算＆距離と所用時間の算出 | つくりんぐ
Google公式
nameは店名。店を登録する際（あるいはバッチ）にaddress --> lat lng
CREATE TABLE `markers` ( `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY , `name` VARCHAR( 60 ) NOT NULL , `address` VARCHAR( 80 ) NOT NULL , `lat` FLOAT( 10, 6 ) NOT NULL , `lng` FLOAT( 10, 6 ) NOT NULL , `type` VARCHAR( 30 ) NOT NULL ) ENGINE = MYISAM ;
