Show Nearby Places Using jQuery And Google Maps - WhatsNearby

File Size: 19.6 KB
Views Total: 6238
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Show Nearby Places Using jQuery And Google Maps - WhatsNearby

WhatsNearby is a simple-to-use jQuery plugin that shows nearby places and place details within a specified area using Google Places API.

How to use it:

1. Load the necessary jQuery library and Google Places API in the document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

2. Download the load the JavaScript file WhatsNearby.js after jQuery library.

<script src="WhatsNearby.js"></script>

3. Initialize the plugin to generate a default Google map on the webpage.

$("#container").whatsnearby({ 
  address: "32 Saint-Charles Ouest, Longueuil, Qc, Canada"
});

4. Specify the type of place you are searching for.

$("#container").whatsnearby({ 
  address: "32 Saint-Charles Ouest, Longueuil, Qc, Canada",
  placesTypes: [ 'restaurant', 'cafe', 'gym' ]
});

5. More options to customize the WhatsNearby plugin.

$("#container").whatsnearby({ 
  "address": "",
  "lat": 45.509234,
  "lng": -73.559067,
  "width": 500,
  "height": 500,
  "zoom":8,
  "mapType": google.maps.MapTypeId.ROADMAP,
  "placeMainMarker": true,
  "mainMarkerIcon": "",
  "placesTypes": [],
  "placesTypesIcon": [],
  "excludePlacesTypes": [],
  "excludeByKeywords": [],
  "placesRadius": 500,
  "disableDefaultUI": false,
  "style": [],
  "scrollwheel":true,
  "backgroundColor": "#000000"
});

This awesome jQuery plugin is developed by LaGrangeMtl. For more Advanced Usages, please check the demo page or visit the official website.