Responsive airbnb style google map property listing using Ajax, PHP, MySQL and Twitter Bootstrap

Today we are going to implement style google map based property listing using Ajax, Jquery, PHP, MySQL and Twitter bootstrap 3. is famous hotel booking website across the world and it has quite cool UI with User Friendly navigation. In this website, while we make the search then they list the properties in google map based on latitude and longitude of the property. So users can easily find the location of the property.

For this tutorial i have used

Ok. when comes to the implementation i have created one table which is “properties“.It consist of 7 columns like



name –  Property name

image – Property image url

description – Property small description

price – Price of the property

latitude – Property location latitude

longitude – Property location longitude


For google map API , Just include the map library to your html file

Initiate the map while load the page. Load the map to div class or id like this

And i have written ajax call to get the property details from “properties” table.



When call the properties.php file then it returns list of properties details as JSON object. Add markers based on properties json objects by using following add marker method.

It is simple and quite useful for property based websites like hotel booking, real estate etc….
Demo and Download

Thank you….

  • ki

    Amazing… loved your plugin :)

    • azhagupandiyan

      thank you….

  • mastermix

    this is awesome..keep up the good work..


  • bruno

    as I close the infobox when other open another?

  • Justin

    Looks like a great way to learn this tool but I cant seem to download the file, even after I subscribed… :(

  • Justin

    Can you help me with downloading this tutorial, I seem to be having issues.

  • Josean

    Very nice plugin.
    But I was looking for a plugin wich loads the markers while it moves, like AIRBNB does.
    When you move the map, it takes the coordinates, send them to the ddbb, and put in the map just the markers wich are near to the taken coordinates.
    Any idea or example…?

    • ajasra das

      Hi Josean,
      did you manage to get any help?? i am sure you have managed to get something or the other by now. If would please share some information as to how to progress or any tutorial, i would be indebted to you.

  • neelam

    cool plugin. But does it support search with move like airbnb?

  • Franky

    hi, how can i put this on wordpress i need help to put this on my wordpress site

  • Tom

    I can’t get the data through “properties.php”.
    The data become “???”.


  • chalida chainorits

    hi I want to file properties.php I can do it. Thank you

  • samuel

    Brother your tutorials are great.
    but i cant download code.

  • Tayyab

    I have integrated this script and it is working well but facing one issue, I want to close the opened window in map while click on another marker… is it possible??? any helpe

  • Ryan Foster

    I can confirm that the download isn’t working, even after registering and waiting a day. Nice tutorial, too bad the download doesn’t work :/