Show Nearby Places Using jQuery And Google Maps - WhatsNearby
| File Size: | 19.6 KB |
|---|---|
| Views Total: | 6323 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.











