Script link

q4.googleMap.1.2.4.min.js

Source file

q4.googleMap.js, line 2

Requires

• Markerclusterer.js (optional)
• Markerwithlabel.js (optional)

Examples

<div id='map' class='module-googlemap' style="height: 500px;"></div>
<div class="module-googlemap_legends-container">
   <ul class="module-googlemap_legends">
       <li class="module-googlemap_legend data1" data-category="data1">Legend 1</li>
       <li class="module-googlemap_legend data2" data-category="data2">Legend 2</li>
       <li class="module-googlemap_legend data3" data-category="data3">Legend 3</li>
       <li class="module-googlemap_legend data4" data-category="data4">Legend 4</li>
       <li class="module-googlemap_legend data5" data-category="data5">Legend 5</li>
       <li class="module-googlemap_legend data6" data-category="data6">Legend 6</li>
       <li class="module-googlemap_legend data7" data-category="data7">Legend 7</li>
       <li class="module-googlemap_legend data8" data-category="data8">Legend 8</li>
   </ul>
</div>
<div class="map_fancy-popout-container"></div>
<script>

function initMap() {
   $('.module-googlemap').googleMap({
       fusionTable: '', // sheeetID: '',
       apiKey: '',
       fusionColumns: function(i, col) {
           var cols = {
               'index': i,
               'markerCategory': col[0],
               'cat': col[1],
               'title': col[2],
               'address': col[3],
               'latlng': new google.maps.LatLng(parseFloat(col[4]), parseFloat(col[5])),
               'htmlContent': col[6]
           }
           return cols;
       },
       usePopout: true,
       fancyClass: 'fancyClass-map',
       popoutTemplateID: '#map-popout',
       popoutContainer: '.map_fancy-popout-container',
       popoutTemplate: (
           '<div id="map-popout{{index}}" class="map-popout_content">' +
              '<div class="module-googlemap_category-content {{markerCategory}}"' +
                  '{{{htmlContent}}}' +
              '</div>' +
           '</div>'
       ),
       useInfoWindow: false,
       infoWindowHover: true,
       useMarkerCategories: true,
       markerCategories: {
           'default': '/files/js/property_map/purple.png',
           'data1': '/files/js/property_map/darkblue.png',
           'data2': '/files/js/property_map/royalblue.png',
           'data3': '/files/js/property_map/lightgreen.png',
           'data4': '/files/js/property_map/orange.png',
           'data5': '/files/js/property_map/green.png',
           'data6': '/files/js/property_map/redorange.png',
           'data7': '/files/js/property_map/gold.png',
           'data8': '/files/js/property_map/purple.png'
       },
       mapOpts: {
           center: {
               lat: 0,
               lng: 0
           },
           disableDefaultUI: true,
           scrollwheel: false,
           zoom: 6,
           minZoom: 0,
           maxZoom: 21,
           styles: []
       },
       complete: function(e, g) {
           var map = g.map,
               markers = g.markers;

           $('.module-googlemap_legend').on('click', function() {
               var li = $(this),
                   category = li.data('category'),
                   bounds = new google.maps.LatLngBounds();

               li.toggleClass('js--selected').siblings().removeClass('js--selected');

               $.each(markers, function(i, marker) {
                   if (li.hasClass('js--selected')) {
                       if (category === marker.category) {
                           marker.setVisible(true);
                           bounds.extend(marker.position);
                       } else marker.setVisible(false);
                   } else {
                       marker.setVisible(true);

                       bounds.extend(marker.position);

                       map.fitBounds(bounds);
                       map.panToBounds(bounds);
                       map.setZoom(6);

                       $('.map-popout_content').hide();
                   }
               });

               if (li.hasClass('js--selected')) {
                   map.fitBounds(bounds);
                   map.panToBounds(bounds);
                   map.setZoom(7);
               }
           })
       }
   });
}
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=APIKEYHERE&language=en&callback=initMap" async defer></script>

Options

containerID string

An id selector for the google map container.

Default value

map

fusionTable string

A reference to the docid of the fusion table shouldn't be used with sheetID. DEPRECATED.

sheetID string

A reference to the docid of the google sheets

localData array

Local array of data that will be used instead of google sheets array.

Default value

null

Example

localData:[
     ["Yaurichocha","-12.9055987","-75.2917978"],
     ["Yaurichocha","-12.9055987","-75.2917978"],
     ["Yaurichocha","-12.9055987","-75.2917978"]
],

apiKey

Api Key for use with the fusion table, get from Google Dev Console

useInfoWindow boolean

If set to true the info window option will be opened when clicking or hovering over the markers

Default value

true

infoWindowHover boolean

If set to true the info window for each marker will be shown on hover. If false, info window will open on click.

Default value

false

useCluster boolean

If set to true the marker clusterer will be used. Requires markerclusterer.js plugin.

Default value

false

useMarkerWithLabel boolean

If set to true the map will use the markerwithlabel.js plugin to create markers. Requires markerwithlabel.js plugin.
Requires to use these keys 'markerLabel' and 'markerAnchor' within the fusionColumn schema.
Labels can be customized using its 'marker-label' class.

Default value

false

Example

useMarkerWithLabel: true,
fusionColumns: function(i, col) {
    'markerLabel': col[0],
    'markerAnchor': col[1] // "0,0"
}

usePopout boolean

If set to true the content will be outside the google map block. Fusion table requires to have a "label" column as well as an "anchor" column.

Default value

false

useFancybox boolean

If set to true a fancybox will open when markers are clicked else the content will be visible without fancybox.

Default value

true

fancyClass string

A CSS class applied to the fancybox container when using popout.

Default value

map-fancy

showMarkerTitle boolean

If set to true the marker's title will be shown as a tooltip when hovering

Default value

false

useMarkerCategories boolean

If set to true, will use markerCategories instead of markerImagePath. Enable to specify different marker icons, fusionColumns must include a reference to a key (should be in lowercase) in the markerCategories option

Default value

false

markerCategories object

A JSON object to specify different marker categories and icon urls. Overrides markerImagePath. Object key should reference category name and Object value should reference file path. Requires to have a 'default' key in addition to the custom categories.

Default value

{"default":"/files/js/property_map/pin-small.png"}

clusterImagePath string

A directory string where the cluster images reside. Files should start with m and use a number one through five to indicate cluster icon size (ex. m1.png, m2.png....)

Default value

/files/js/property_map/m

markerImagePath string

A directory string for the default marker's icon. Only used when useMarkerCategories is set to false.

Default value

/files/js/property_map/pin-small.png

fusionColumns function

A callback that fires before the map is rendered. Maps the column names from the fusion table to be used in the template. Required keys: latlng. Required keys depending on selected options: index, title, markerCategory

popoutTemplateID string

A string to specify the id being used for each marker's popoutTemplate

Default value

#map-popout

popoutContainer string

A selector for the container of the popouts

Default value

.map-popout_container

popoutContent string

A selector for the content of the popouts

Default value

.map-popout_content

popoutTemplate string

A Mustache.js template for the each popouts. Tags are used from the fusionColumns. ID should match the popoutTemplateID followed by the {{index}} tag.

infoWindowTemplate string

A Mustache.js template for each marker info window. Tags are used from the fusionColumns

mapOpts object

A set of Google map options. Zoom and Center is required to create a map

Default value

{"center":"","zoom":4,"minZoom":0,"maxZoom":21,"scrollwheel":true,"disableDefaultUI":false,"zoomControl":true,"styles":""}

complete function

A callback that is fired after the map is rendered. Give's access to the map object and marker array.

Parameters

e Event

The event object.

data Object

The data object to access both the map and marker ie. data.map & data.markers