WhatsNearby (slightly enhanced)

An enhanced fork of a jQuery plugin to list and show nearby places around a certain position using Google Maps.

• Added a 'placesNames' parm (download and see the new example html) to make it a store locator

###Original DEMO

Dependencies

• jQuery
• Google Maps Javascript API v3
• Google Places API
• ES5 Shim and Sham

Basic usage

First, be sure to include all the above libraries. Then, include WhatsNearby :

<script src="js/WhatsNearby.js" type="text/javascript"></script>

WhatsNearby must be attached to an html element :

<div id="wn"></div>

Using jQuery, setup WhatsNearby on the selected element :

$("#wn").whatsnearby();

You can customize WhatsNearby using an options argument (more details on all options will follow):

$("#wn").whatsnearby({ zoom:14, address:"Montréal, Qc" });

Options

options: {
    address: "Grayslake, IL", //A string representing a physical address, this will be used as the center of the map
    lat: 45.509234, //The latitude coordinate of the center of the map (default if no address set)
    lng: -73.559067, //The longitude coordinate of the center of the map (default if no address set)
    width: 500 , //can be px or %
    height: 400, //can be px or %
    zoom : 10, //map zoom level
    mapType : google.maps.MapTypeId.ROADMAP, //ROADMAP, SATELLITE, HYBRID, TERRAIN
    placeMainMarker : true, //shows the marker for the center position of the map
    mainMarkerIcon : "", //if set, this image will replace the default marker icon
    placesTypes : ['store', 'gym'], //an array of places types
    placesNames : [], //an array of places names NEW
    placesTypesIcon : [], //if set, those images will replace type marker icons (must match placesTypes order)
    excludePlacesTypes : [], //an array of types that will be excluded from the search
    excludeByKeywords: [], //an array of string that will be excluded from the search (name of the place)
    placesRadius : 1000 //the radius, in meters in which Places will be found
    disableDefaultUI: false,
    style: [], // pasted from https://snazzymaps.com/
    draggable:true, // Can you drag the map around
    scrollwheel:true, // Deactivate scrollwheel (very useful for mobile users!)
    backgroundColor: "#cccccc", // Background color under the map
    markercluster: false, // requires markercluster.js
    markerclusterStyles: [], // requires markercluster.js
    markerclusterOptions: {}, // requires markercluster.js
    centerOffsetX: 0, // offsets the center of the map
    centerOffsetY: 0,
    useInfoBox: false, // uses InfoBox to customize Info Windows
    infoBoxOptions: {}
},