2015/08/22 (更新日: 2017/02/26)

Airbnbっぽく不動産物件を地図表示をするPHPスクリプト

Airbnbっぽく不動産物件を表示するスクリプトってどうやって作るんだろう…と思っていたら見つけました。

※元記事
Responsive airbnb style google map property listing using Ajax, PHP, MySQL and Twitter Bootstrap
※元サイトが閉鎖しちゃったみたいです（更新日：2017年2月26日）

※デモ
Responsive airbnb style google map property listing using Ajax, PHP, MySQL and Twitter Bootstrap – wsnippets.com
※元サイトが閉鎖しちゃったみたいです（更新日：2017年2月26日）

※ダウンロードリンク
manabubannai/airbnb_map

でも、そのままコピーしても動かなかったので、ちょくちょく修正しつつ、日本語対応版のスクリプト作りましたので、公開します。

まずはDBを作成します

テーブル名はなんでもOKですが、WordPressに組み込もうかなと思っていたので、wp_propertiesという名前にしました。以下をコピペでDB作ってください。


CREATE TABLE `wp_properties` (
  `id`    bigint not null auto_increment,
  `name`    varchar(255),
  `image` varchar(255),
  `description` mediumtext,
  `price`   DOUBLE(10, 2) NOT NULL DEFAULT 0, 
  `latitude`   varchar(255),
  `longitude`   varchar(255),
  primary key(id)
);

HTMLは次のとおり

ローカルホストなら、以下のままで動きます。サーバーにアップする場合は、GoogleMap APIにキー入力をしましょう。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Airbnbっぽく不動産物件を地図表示をするPHPスクリプト</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<!-- ローカルホストならこのままでOK -->
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places" charset="UTF-8"></script>

<!-- GoogleMap APIから地図情報をjsonで取得するスクリプト -->
<script src="properties.js" charset="UTF-8"></script>

<script type="text/javascript" charset="UTF-8">
  // 現在ページのURLを指定する
  var base_url = "http://localhost/airbnb_map/";
</script>

<style type="text/css">
  #js-map-container{
    height: 500px;
  }
</style>

</head>
<body>

<div id="js-map-container"></div>

</body>
</html>

GoogleMap APIから地図情報をjsonで取得するスクリプトを書きます

長いですね。読むのが怠いと思いますが、コメントをいれといたのでなんとなく理解しといてください。


var i = 1,
bounds,
marker,
markersArray = Array();

$(window).ready(function(e) {
  initialize();
});

function initialize() {
  var mapOptions = {
    // 地図のを初期表示位置を設定する
    center: new google.maps.LatLng(13.0900, 80.2700),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('js-map-container'), mapOptions);
  map.setZoom(10);
  getMapData();
}

// DBからGoogleMapのデータを抽出する
function getMapData() {
  $.getJSON('properties.php', function(data) {
    if (data.success == true) {
      if (data.data.length > 0) {
        $.each(data.data, function(index, value) {
          lat = data.data[index].latitude;
          lng = data.data[index].longitude;
          name = data.data[index].name;
          image = data.data[index].image;
          price = data.data[index].price;
          url = data.data[index].url;
          addMarker(i, lat, lng, image, name, price, url);
          i++;
        });
      }
    }
  });
}

// 地図内にマーカーを表示する
function addMarker(i, lat, lng, img, name, price, url) {
  if (lat != null && lng != null) {
    myLatLng = new google.maps.LatLng(lat, lng);
    bounds = new google.maps.LatLngBounds();
    var imageUrl = base_url + 'marker.png';
    var markerImage = new google.maps.MarkerImage(imageUrl);
    eval('var marker' + i + ' = new google.maps.Marker({ position: myLatLng,  map: map, icon: markerImage, zIndex: i});');
    var marker_obj = eval('marker' + i);
    bounds.extend(marker_obj.position);
    markersArray.push(eval('marker' + i));
    marker_obj.title = name;
    var li_obj = '.js-map-num' + i;
    image = '';
    if (img != '') {
      image = '<img src="' + base_url + 'images/' + img + '" class="img-responsive img-thumbnail" />';
    }
    var content = '<div class="">' + image + '<h4><a href="' + url + '">' + name + '</a></h4><h4><span class="label label-danger"> $' + price + '</span></h4></div>';
    eval('var infowindow' + i + ' = new google.maps.InfoWindow({ content: content,  maxWidth: 370});');
    var infowindow_obj = eval('infowindow' + i);
    var marker_obj = eval('marker' + i);
    google.maps.event.addListener(marker_obj, 'click', function() {
      infowindow_obj.open(map, marker_obj);
    });
  }
}

最後に、DBから情報抽出するPHPスクリプトを書きます


$response['success'] = false;
$dsn = "mysql:dbname=googlemap_test;host=localhost;charset=utf8;";
$db = new PDO($dsn, "root", "root");
$stmt = $db->prepare("SELECT * FROM wp_properties");
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
if(!empty($result)) {
   $response['success'] = true;
   $response['data'] = $result;
}

echo json_encode($response);

これで終わり。あとは適当にスタイリングしてください〜。スタイリングしたバージョンはそのうち公開するかもです。質問とかはTwitterで受け付けます。
マナブ@セブ島 (@manabubannai) | Twitter

PHP