easyLocator V2.1

EasyLocator is a jquery plugin to load locations with Google Maps in any website using a google spreadsheet or an array of objects.

Dependencies : ,

1. markerclusterer
2. Jquery
3. underscorejs (Only if you want use templates)

Note: (The file markerclusterer.min.js in this repo, is a version modified, you can use it if you want)

Examples:

1. Basic example
2. Array of object
3. Google Maps options
4. MarkerCluster custom icons
5. Template
6. Template 2
7. Template 3
8. Rebuild

Add easyLocator in your web

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

How to use it.

1. Create a Google spreadsheet like this , columns names need to be the same.

2. Go to: "file > publish to the web" and verify the following fields

3. Copy the url from the browser and extract the spreadsheetId:

   Example:

   h t t p s://docs.google.com/spreadsheets/d/1QM92ghpvJpRBryStWI-PWcRhpBSsYPva4XCXUxieXNU/edit#gid=0

   (bold text is the spreadsheetId)

4. Call easyLocator with your selector and pass your spreadsheetId and teh google maps apiKey

   $(yourContainer).easyLocator({
         spreadsheetId: '1QM92ghpvJpRBryStWI-PWcRhpBSsYPva4XCXUxieXNU',
         apiKey: 'YOUR GOOGLE MAP API KEY'
   })

   "youcontainer" must have height"

5. Done.

After the call, the plugin will return the instance plugin created and you can use the method getMapInstance to get the google map created. example:

var easyLocatorPlugin = $(yourContainer).easyLocator({
      spreadsheetId: '1QM92ghpvJpRBryStWI-PWcRhpBSsYPva4XCXUxieXNU',
      apiKey: 'YOUR GOOGLE MAP API KEY'
})
var currentGoogleMap = easyLocatorPlugin.getMapInstance();

You can use currentGoogleMap to do whatever you want.

Note: before of using this plugin, you must insert the CSS and dependencies

<link rel="stylesheet" type="text/css" href="easyLocator.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="markerclusterer.min.js"></script>

SpreadSheet columns:

title: Title of each locations, this will be use in the list.

description: Description,it will only appear inside the infowindow.

lat: Coordinate use by google maps (latitude).

lng: Coordinate use by google maps (longitude).

image: Image of your location.

link: If you want add a link, it will appear after the description

iconmarker: If you want to customize the icon marker, you can use a url. Size recommended 30x30 pixels (png,jpeg, jpg)

iconmarkeractive: This icon will replace the "iconmarker" when the item is clicked

The most important part when you add a location in your spreadsheet, are the coordinates (lat, lng) together describe the exact location of a place in Google map.

If you want to know these coordinates, you can use this example, just drag the marker and you will see the coordinates lat, lng

easyLocator methods:

getMapInstance: return the google map instance created

rebuild: clean map and list with the new elements. These elements should have the same structure that the array of object

easyLocator properties:

spreadsheetId (string): Google spreadsheetId

useMarkerCluster (boolean): If you want use the cluster marker

markerClustererOptions (object): Marker clusterer options

openInfowindowAfterClick (boolean): If you want open the infowindows after click on ine item in the list.

myLocations (array objects): array of object with your locations instead of the Google Spreadsheed.

example array :

 var data = [{
    title: '',
    description: '',
    image: '', 
    link: '',
    iconMarker: '',
    iconMarkerActive: ''
    lat: 12.9232,
    lng: -85.9206
 }]

showListOnDesktop (boolean): If you want hide the left list items on desktop version, The map will get width 100% automatically

showListOnMobile (boolean): If you want hide the left list items on mobile version

itemListActiveCustomClass (string): This class will be added in the parent item after a click. You can use it to customize the element.

infoWindowCustomClass (string): This class will be added in the infoWindow container. You can use it to customize the element.

contentTemplate (string): template underscorejs with the correct format according to http://underscorejs.org/

mapOptions (Object): Object with options of google maps. For more info about what options use, please visit: Google Maps

centerMapOnLocation (boolean): By default the map is centered in all markers, set false if you want use your own location with the "mapOptions" property

apiKey (string and Mandatory): You need create an api key and put it here. Follow these steps

If you do not add the apiKey the map won't load and you will get this error:

Events:

You can listen all events in this way:

var easyLocatorPlugin = $(yourContainer).easyLocator({
      spreadsheetId: '1QM92ghpvJpRBryStWI-PWcRhpBSsYPva4XCXUxieXNU',
      apiKey: 'YOUR GOOGLE MAP API KEY'
});

easyLocator.onEvents.progress(function(evt){
        console.log(evt);
});

You will receive an object with all details about the event.

loadingMap: loading the map.

templateClosed: the template was closed

locationClicked: location was clicked, in the list or marker on the map.

infoWindowClosed: infowindow was closed

mapLoaded: map was loaded correctly.

rebuildDone: rebuild done

getDataDone: When the data were successfully load from the spreadsheet, return the array of locations

How to use templates:

1. Add http://underscorejs.org/ dependency
2. Set your template in the property "contentTemplate" with the correct format. When you set this, easyLocator will not use the infowindow anymore, instead will give you an empty container element with the class "locatorMap_template".
3. All the content of you template will be inserted inside of "locatorMap_template" element. Is your job add all the styles and media queries needed.
4. You need always add an element with the class "locatorMap_template_close", this will be used by easyLocator to closed the template.
5. Add you own styles.
6. Done

If you have problems, please see the examples

Additional notes:

If you map will change of size dynamically you should this according to Google:

Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize') .

---