Google maps - two marker cluster groups

by katalin_2003

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script>
// markerclusterer.js
// https://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.12/src/markerclusterer_packed.js
/*jslint browser: true, confusion: true, sloppy: true, vars: true, nomen: false, plusplus: false, indent: 2 */
/*global window,google */

/**
 * @name MarkerClustererPlus for Google Maps V3
 * @version 2.0.12 [April 21, 2012]
 * @author Gary Little
 * @fileoverview
 * The library creates and manages per-zoom-level clusters for large amounts of markers.
 * <p>
 * This is an enhanced V3 implementation of the
 * <a href="http://gmaps-utility-library-dev.googlecode.com/svn/tags/markerclusterer/"
 * >V2 MarkerClusterer</a> by Xiaoxi Wu. It is based on the
 * <a href="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/"
 * >V3 MarkerClusterer</a> port by Luke Mahe. MarkerClustererPlus was created by Gary Little.
 * <p>
 * v2.0 release: MarkerClustererPlus v2.0 is backward compatible with MarkerClusterer v1.0. It
 *  adds support for the <code>ignoreHidden</code>, <code>title</code>, <code>printable</code>,
 *  <code>batchSizeIE</code>, and <code>calculator</code> properties as well as support for
 *  four more events. It also allows greater control over the styling of the text that appears
 *  on the cluster marker. The documentation has been significantly improved and the overall
 *  code has been simplified and polished. Very large numbers of markers can now be managed
 *  without causing Javascript timeout errors on Internet Explorer. Note that the name of the
 *  <code>clusterclick</code> event has been deprecated. The new name is <code>click</code>,
 *  so please change your application code now.
 */

/**
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    ...

JavaScript

// Get center
var map_center = new google.maps.LatLng(0.1700235000, 20.7319823000);

// Load google map
var map = new google.maps.Map(document.getElementById("gmap"), {
  zoom: 1,
  center: map_center,
  mapTypeId: google.maps.MapTypeId.HYBRID,
  panControl: false,
  streetViewControl: false,
  mapTypeControl: false
});

var pos;
var marker;
var marker_list1 = [];
var marker_list2 = [];
for (var i = 0; i < 200; i++) {
  pos = new google.maps.LatLng(Math.floor(Math.random() * 50), Math.floor(Math.random() * 100));

  if (Math.random() < 0.5) {
    marker = new google.maps.Marker({
      position: pos,
      map: map,
      title: 'Title',
      icon: 'http://a32.me/other/gmap/images/people45.png'
    });
    marker_list1.push(marker);
  } else {
    marker = new google.maps.Marker({
      position: pos,
      map: map,
      title: 'Title',
      icon: 'http://a32.me/other/gmap/images/people35.png'
    });
    marker_list2.push(marker);
  }
}

// Add marker clustering with default styles
var markerCluster1 = new MarkerClusterer(map, marker_list1);

// Custom styles
var markerCluster2 = new MarkerClusterer(map, marker_list2, {
  styles: [{
    // url: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/64/Map-Marker-Marker-Outside-Azure.png',
	url: 'https://a32.me/other/gmap/images/people35.png',
    height: 35,
    width: 35,
    opt_anchor: [16, 0],
    opt_textColor: '#FF00FF'
  }, {
    url: 'https://a32.me/other/gmap/images/people45.png',
    height: 45,
    width: 45,
    opt_anchor: [24, 0],
    opt_textColor: '#FF0000'
  }, {
    url: 'https://a32.me/other/gmap/images/people55.png',
    height: 55,
    width: 55,
    opt_anchor: [32, 0]
  }]
});



/**/