This is a Google Map Api utility tool which is basically an OO abstraction of Google Map API, Google Place Auto-Complete, Marker-Clusterer

Think of this as a utility belt tool like Batman's but instead of catching the baddies, it's for handling Google Map Api, Google Place, and Marker Clusterer.

This is created as an OO high level absctraction tool that enables one to easily create a custom interactive map.

By separating the logic of handling the map object, and the list of items / states, it makes the code of creating a custom map to be more portable and easier to re-use on other projects.

ensure that the following script is included in your html page in the following order:

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> // Google map api with Google Place library enabled.
<script src='../src/markerClustererPlus.js'></script> // Marker clusterer plus library
<script src='../src/list.js'></script> // this script handles the list logic
<script src='../src/mapster.js'></script> // this script handles the map object
<script src='../src/mapOptions.js'></script> // this script contains the map configuration options

create a MAP var that initiate the creation of the MAPSTER object. The map is created with the MAP_OPTIONS as specified in "mapOptions.js", and the map is hooked on the DOM element with ID 'map-canvas'

 var MAP = Mapster.create('map-canvas', Mapster.MAP_OPTIONS);

This will hook the Google Place Auto-Complete on the DOM input element with ID 'txtPlaces'

 MAP.setPlaces('txtPlaces', {
    events: [{
      name: 'place_changed',
      callback: function(e, places){
        var place = places.getPlace();
        console.log(place.geometry.location);
      }
    }]
  });

This will utilize HTML5 navigator function to get the user's geolocation if the feature is enabled, and then pan the map to the user's location (or to the default location set in mapOptions.js if the feature is disabled)

 MAP.getCurrentPosition( function(position) {
    var lat = position.coords.latitude,
        lng = position.coords.longitude;

    MAP.panTo({
      lat: lat,
      lng: lng
    });      

  });

This will add marker onto the map. We can pass in properties to the markers as object. The properties include event, custom styles, marker's properties, or additional properties we'd like to add onto the marker.

 MAP.addMarker({
      lat: -37.818667 + Math.random()/50, // Specifiy the lat prop of the marker
      lng: 144.971466 + Math.random()/50, // Specifiy the lng prop of the marker
      animation: google.maps.Animation.DROP, // add animation to the marker property
      content: 'I like my girl', // add content info to the marker property.
      venue_type: 'romantic', // add venue_type attribute on the marker
      venue_dog_friendly: 'yes' // add venue_dog_friendly attribute on the marker
});

The findBy function takes a callback that allows us to specify a condition. This returned callback will be passed to the List.js logic to filter the markers that satisfy the callback condition.

var myGirlMarkers = MAP.findBy(function(marker) { 
    return marker.content === 'I like my girl'
});

Refer to the example folder, or the live demo link

• zoom() = get current map's zoom level.
• zoom(num) = set current map's zoom level to specified num.
• panTo(coord) = pan the map to the specified coord position {lat: xx, lng: xx}.
• geocode(opts) = if geocoder = is enabled in mapOptions.js, we can pass in an address to the marker's address property to geocode the location through google map.
• getCurrentPosition(callback) = Get user's current position. this function takes a callback that will be evaluated if the feature is enabled on the user's browser.
• setPlaces(selector, opts) = Hook google place to the DOM element with id selector. by passing the callback we can specify the event we want to trigger, eg: on place_changed event.
• addMarker(opts) = add maker onto the map, and passing in options.
• findBy(callback) = find the markers that satisfy the condition in the evaluated callback function.
• removeBy(callback) = remove the markers that satisfy the condition in the evaluated callback funciton.
• removeAll() = remove all marker on the map.
• visibleMarkersCount(selector) = count the visible markers on the map and render it on the DOM element with ID selector.

• Big thanks to David East, the library is built upon from one of David's course - Tutsplus - Custom interactive maps with goole maps api