Skip to content

Instantly share code, notes, and snippets.

@krusynth
Created July 3, 2012 15:49
Show Gist options
  • Save krusynth/3040600 to your computer and use it in GitHub Desktop.
Save krusynth/3040600 to your computer and use it in GitHub Desktop.
Google Maps API Markers adding custom data to clicks, also Marker Clustering for large numbers of marker pins
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="map.json"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDQCAf3BpPm2bDERFkXORaQjdiwtC4meDM&sensor=false"></script>
<script type="text/javascript" src="markerclusterer_packed.2_0_9.js"></script>
<script type="text/javascript">
function initialize() {
/*
We have to do a bit of trickery to get the custom data
for the profile into the marker. Google Maps API gives
you a different object - NOT a marker - on the pin click.
As a result, we use a function as a closure to make sure
we have access to the profile in that context.
For the MarkerClusterer click, we *do* have a real marker,
so we can attach all the custom data we want to itm, via
the prototype.
*/
/* Custom getters & setters */
google.maps.Marker.prototype.getCustomData = function(key) {
if(typeof(this.custom_data) === 'undefined') {
this.custom_data = {};
}
if(typeof(key) !== 'undefined') {
return this.custom_data[key];
}
else {
return this.custom_data;
}
}
google.maps.Marker.prototype.setCustomData = function(key, value) {
if(typeof(this.custom_data) === 'undefined') {
this.custom_data = {};
}
if(typeof(value) !== 'undefined') {
this.custom_data[key] = value;
}
else {
this.custom_data = key;
}
}
var myOptions = {
center: new google.maps.LatLng(40.686962, -73.986425),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
'chco=FFFFFF,008CFF,000000&ext=.png';
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
markers = [];
for( key in map_data.data ) {
var loc = map_data.data[key];
marker = createMarker(loc);
markers.push(marker);
}
function createMarker(loc) {
var latLng = new google.maps.LatLng(parseFloat(loc.latitude),parseFloat(loc.longitude))
var marker = new google.maps.Marker({
position: latLng,
draggable: false,
icon: markerImage,
title: "test"
});
var profile = loc.profile;
marker.setCustomData('profile', profile);
google.maps.event.addListener(marker, "click", function (marker) {
console.log( build_profile( profile ) );
});
return marker;
}
var mc = new MarkerClusterer(map, markers, {
zoomOnClick: false
});
google.maps.event.addListener(mc, "click", function (cluster) {
// Find number of unique LatLng in clusters
var clusterMarkers = cluster.getMarkers();
var profile_list = ""
for(var j = 0; j < clusterMarkers.length; j++) {
profile_list += build_profile( clusterMarkers[j].getCustomData('profile') );
}
console.log(profile_list);
});
function build_profile(profile) {
return profile.first_name+' '+profile.last_name+"\n";
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('5 J(b,a){b.1c().X(J,o.n.2Y);4.I=b;4.N=a;4.B=s;4.q=s;4.1x=s;4.1m=t;4.L(b.z())}J.6.2J=5(){7 c=4;7 f;7 d;4.q=3O.3H("1Q");9(4.1m){4.1O()}4.5d().50.4U(4.q);o.n.u.1G(4.z(),"4B",5(){d=f});o.n.u.1H(4.q,"4o",5(){f=K;d=t});o.n.u.1H(4.q,"2P",5(e){f=t;9(!d){7 a;7 b=c.I.1c();o.n.u.W(b,"2P",c.I);o.n.u.W(b,"4e",c.I);9(b.2I()){a=b.1z();b.z().2D(c.I.1y());9(a!==s&&(b.z().1f()>a)){b.z().45(a+1)}}e.41=K;9(e.2r){e.2r()}}});o.n.u.1H(4.q,"2p",5(){7 a=c.I.1c();o.n.u.W(a,"2p",c.I)});o.n.u.1H(4.q,"2m",5(){7 a=c.I.1c();o.n.u.W(a,"2m",c.I)})};J.6.2j=5(){9(4.q&&4.q.2f){4.1r();o.n.u.3x(4.q);4.q.2f.3u(4.q);4.q=s}};J.6.2n=5(){9(4.1m){7 a=4.23(4.B);4.q.14.1M=a.y+"A";4.q.14.1D=a.x+"A"}};J.6.1r=5(){9(4.q){4.q.14.35="33"}4.1m=t};J.6.1O=5(){9(4.q){7 a=4.23(4.B);4.q.14.4K=4.2X(a);9(4.I.13){4.q.2S="<4y 4v=\'"+4.21+"\'><1Q 14=\'2a: 3d; 1M: 2Q; 1D: 2Q; 18: "+4.Y+"A;\'>"+4.1x.19+"</1Q>"}E{4.q.2S=4.1x.19}4.q.2N=4.I.1c().2M();4.q.14.35=""}4.1m=K};J.6.2K=5(a){4.1x=a;7 b=v.4d(0,a.2F-1);b=v.1W(4.N.p-1,b);7 c=4.N[b];4.21=c.1V;4.S=c.15;4.Y=c.18;4.H=c.48;4.1S=c.44||[1P(4.S/2,10),1P(4.Y/2,10)];4.2u=c.3Y||"3W";4.2q=c.3M||11;4.2l=c.3J||"33";4.2h=c.3E||"3C";4.2C=c.3A||"3z";4.2d=c.3v||"3t,3q-3p";4.2v=c.3m||"0 0"};J.6.2s=5(a){4.B=a};J.6.2X=5(b){7 a=[];9(!4.I.13){a.F(\'2A-5c:1V(\'+4.21+\');\');a.F(\'2A-2a:\'+4.2v+\';\')}9(1L 4.H===\'58\'){9(1L 4.H[0]===\'3f\'&&4.H[0]>0&&4.H[0]<4.S){a.F(\'15:\'+(4.S-4.H[0])+\'A; 3c-1M:\'+4.H[0]+\'A;\')}E{a.F(\'15:\'+4.S+\'A; 3b-15:\'+4.S+\'A;\')}9(1L 4.H[1]===\'3f\'&&4.H[1]>0&&4.H[1]<4.Y){a.F(\'18:\'+(4.Y-4.H[1])+\'A; 3c-1D:\'+4.H[1]+\'A;\')}E{a.F(\'18:\'+4.Y+\'A; 19-3a:1b;\')}}E{a.F(\'15:\'+4.S+\'A; 3b-15:\'+4.S+\'A; 18:\'+4.Y+\'A; 19-3a:1b;\')}a.F(\'4S:4R; 1M:\'+b.y+\'A; 1D:\'+b.x+\'A; 4Q:\'+4.2u+\'; 2a:3d; 1E-1n:\'+4.2q+\'A; 1E-4M:\'+4.2d+\'; 1E-4J:\'+4.2h+\'; 1E-14:\'+4.2C+\'; 19-4H:\'+4.2l+\';\');j a.4F("")};J.6.23=5(b){7 a=4.2V().22(b);a.x-=4.1S[1];a.y-=4.1S[0];j a};5 C(a){4.V=a;4.T=a.z();4.Q=a.2R();4.U=a.38();4.17=a.37();4.13=a.3e();4.k=[];4.B=s;4.27=s;4.Z=G J(4,a.1Y())}C.6.4f=5(){j 4.k.p};C.6.1C=5(){j 4.k};C.6.2O=5(){j 4.B};C.6.z=5(){j 4.T};C.6.1c=5(){j 4.V};C.6.1y=5(){7 i;7 b=G o.n.1l(4.B,4.B);7 a=4.1C();w(i=0;i<a.p;i++){b.X(a[i].P())}j b};C.6.1B=5(){4.Z.L(s);4.k=[];1X 4.k};C.6.1A=5(e){7 i;7 c;7 b;9(4.2L(e)){j t}9(!4.B){4.B=e.P();4.1Z()}E{9(4.17){7 l=4.k.p+1;7 a=(4.B.O()*(l-1)+e.P().O())/l;7 d=(4.B.1a()*(l-1)+e.P().1a())/l;4.B=G o.n.1j(a,d);4.1Z()}}e.1i=K;4.k.F(e);c=4.k.p;b=4.V.1z();9(b!==s&&4.T.1f()>b){9(e.z()!==4.T){e.L(4.T)}}E 9(c<4.U){9(e.z()!==4.T){e.L(4.T)}}E 9(c===4.U){w(i=0;i<c;i++){4.k[i].L(s)}}E{e.L(s)}4.2H();j K};C.6.2G=5(a){j 4.27.2Z(a.P())};C.6.1Z=5(){7 a=G o.n.1l(4.B,4.B);4.27=4.V.25(a)};C.6.2H=5(){7 c=4.k.p;7 a=4.V.1z();9(a!==s&&4.T.1f()>a){4.Z.1r();j}9(c<4.U){4.Z.1r();j}7 b=4.V.1Y().p;7 d=4.V.2E()(4.k,b);4.Z.2s(4.B);4.Z.2K(d);4.Z.1O()};C.6.2L=5(a){7 i;9(4.k.1q){j 4.k.1q(a)!==-1}E{w(i=0;i<4.k.p;i++){9(a===4.k[i]){j K}}}j t};5 8(a,c,b){4.X(8,o.n.2Y);c=c||[];b=b||{};4.k=[];4.D=[];4.1g=[];4.1t=s;4.1h=t;4.Q=b.4c||4b;4.U=b.4a||2;4.1U=b.49||s;4.N=b.46||[];4.1T=b.2N||"";4.1K=K;9(b.2B!==1k){4.1K=b.2B}4.17=t;9(b.2z!==1k){4.17=b.2z}4.16=t;9(b.2y!==1k){4.16=b.2y}4.13=t;9(b.2x!==1k){4.13=b.2x}4.1w=b.42||8.2w;4.1v=b.40||8.2t;4.1p=b.3T||8.2b;4.1N=b.3S||8.2o;4.1R=b.3L||8.2e;4.1s=b.3K||8.2k;9(3I.3G.3F().1q("3D")!==-1){4.1R=4.1s}4.2g();4.2i(c,K);4.L(a)}8.6.2J=5(){7 a=4;4.1t=4.z();4.1h=K;4.1e();4.1g=[o.n.u.1G(4.z(),"3B",5(){a.1u(t);9(4.1f()===0){o.n.u.W(4,"2c")}}),o.n.u.1G(4.z(),"2c",5(){a.1d()})]};8.6.2j=5(){7 i;w(i=0;i<4.k.p;i++){4.k[i].L(4.1t)}w(i=0;i<4.D.p;i++){4.D[i].1B()}4.D=[];w(i=0;i<4.1g.p;i++){o.n.u.3y(4.1g[i])}4.1g=[];4.1t=s;4.1h=t};8.6.2n=5(){};8.6.2g=5(){7 i,1n;9(4.N.p>0){j}w(i=0;i<4.1p.p;i++){1n=4.1p[i];4.N.F({1V:4.1w+(i+1)+"."+4.1v,15:1n,18:1n})}};8.6.3N=5(){7 i;7 a=4.1C();7 b=G o.n.1l();w(i=0;i<a.p;i++){b.X(a[i].P())}4.z().2D(b)};8.6.2R=5(){j 4.Q};8.6.3w=5(a){4.Q=a};8.6.38=5(){j 4.U};8.6.3P=5(a){4.U=a};8.6.1z=5(){j 4.1U};8.6.3Q=5(a){4.1U=a};8.6.1Y=5(){j 4.N};8.6.3R=5(a){4.N=a};8.6.2M=5(){j 4.1T};8.6.3s=5(a){4.1T=a};8.6.2I=5(){j 4.1K};8.6.3r=5(a){4.1K=a};8.6.37=5(){j 4.17};8.6.3U=5(a){4.17=a};8.6.3V=5(){j 4.16};8.6.3o=5(a){4.16=a};8.6.3X=5(){j 4.1v};8.6.3n=5(a){4.1v=a};8.6.3Z=5(){j 4.1w};8.6.3l=5(a){4.1w=a};8.6.3k=5(){j 4.1p};8.6.3j=5(a){4.1p=a};8.6.2E=5(){j 4.1N};8.6.43=5(a){4.1N=a};8.6.3e=5(){j 4.13};8.6.3i=5(a){4.13=a};8.6.3h=5(){j 4.1s};8.6.3g=5(a){4.1s=a};8.6.1C=5(){j 4.k};8.6.47=5(){j 4.k.p};8.6.5b=5(){j 4.D};8.6.5a=5(){j 4.D.p};8.6.1A=5(b,a){4.29(b);9(!a){4.1d()}};8.6.2i=5(b,a){7 i;w(i=0;i<b.p;i++){4.29(b[i])}9(!a){4.1d()}};8.6.29=5(b){9(b.59()){7 a=4;o.n.u.1G(b,"55",5(){9(a.1h){4.1i=t;a.1e()}})}b.1i=t;4.k.F(b)};8.6.54=5(c,a){7 b=4.28(c);9(!a&&b){4.1e()}j b};8.6.52=5(a,c){7 i,r;7 b=t;w(i=0;i<a.p;i++){r=4.28(a[i]);b=b||r}9(!c&&b){4.1e()}j b};8.6.28=5(b){7 i;7 a=-1;9(4.k.1q){a=4.k.1q(b)}E{w(i=0;i<4.k.p;i++){9(b===4.k[i]){a=i;4Z}}}9(a===-1){j t}b.L(s);4.k.4Y(a,1);j K};8.6.4W=5(){4.1u(K);4.k=[]};8.6.1e=5(){7 a=4.D.4V();4.D=[];4.1u(t);4.1d();39(5(){7 i;w(i=0;i<a.p;i++){a[i].1B()}},0)};8.6.25=5(d){7 f=4.2V();7 c=G o.n.1j(d.26().O(),d.26().1a());7 a=G o.n.1j(d.24().O(),d.24().1a());7 e=f.22(c);e.x+=4.Q;e.y-=4.Q;7 g=f.22(a);g.x-=4.Q;g.y+=4.Q;7 b=f.36(e);7 h=f.36(g);d.X(b);d.X(h);j d};8.6.1d=5(){4.20(0)};8.6.1u=5(a){7 i,M;w(i=0;i<4.D.p;i++){4.D[i].1B()}4.D=[];w(i=0;i<4.k.p;i++){M=4.k[i];M.1i=t;9(a){M.L(s)}}};8.6.34=5(b,e){7 R=4O;7 g=(e.O()-b.O())*v.1J/1F;7 f=(e.1a()-b.1a())*v.1J/1F;7 a=v.1I(g/2)*v.1I(g/2)+v.32(b.O()*v.1J/1F)*v.32(e.O()*v.1J/1F)*v.1I(f/2)*v.1I(f/2);7 c=2*v.4I(v.31(a),v.31(1-a));7 d=R*c;j d};8.6.30=5(b,a){j a.2Z(b.P())};8.6.2T=5(c){7 i,d,12,1b;7 a=4G;7 b=s;w(i=0;i<4.D.p;i++){12=4.D[i];1b=12.2O();9(1b){d=4.34(1b,c.P());9(d<a){a=d;b=12}}}9(b&&b.2G(c)){b.1A(c)}E{12=G C(4);12.1A(c);4.D.F(12)}};8.6.20=5(e){7 i,M;7 d;7 c=4;9(!4.1h){j}9(e===0){o.n.u.W(4,"4E",4);9(1L 4.1o!=="1k"){4D(4.1o);1X 4.1o}}9(4.z().1f()>3){d=G o.n.1l(4.z().1y().24(),4.z().1y().26())}E{d=G o.n.1l(G o.n.1j(2U.4C,-2W.4A),G o.n.1j(-2U.4z,2W.4L))}7 a=4.25(d);7 b=v.1W(e+4.1R,4.k.p);w(i=e;i<b;i++){M=4.k[i];9(!M.1i&&4.30(M,a)){9(!4.16||(4.16&&M.4x())){4.2T(M)}}}9(b<4.k.p){4.1o=39(5(){c.20(b)},0)}E{1X 4.1o;o.n.u.W(4,"4N",4)}};8.6.X=5(d,c){j(5(b){7 a;w(a 4w b.6){4.6[a]=b.6[a]}j 4}).4P(d,[c])};8.2o=5(a,b){7 e=0;7 c=a.p.4u();7 d=c;4t(d!==0){d=1P(d/10,10);e++}e=v.1W(e,b);j{19:c,2F:e}};8.2e=4s;8.2k=4T;8.2w="4r://o-n-4q-4p-4X.4n.4m/4l/51/4k/4j/m";8.2t="57";8.2b=[53,56,4i,4h,4g];',62,324,'||||this|function|prototype|var|MarkerClusterer|if||||||||||return|markers_|||maps|google|length|div_||null|false|event|Math|for|||getMap|px|center_|Cluster|clusters_|else|push|new|anchor_|cluster_|ClusterIcon|true|setMap|marker|styles_|lat|getPosition|gridSize_||height_|map_|minClusterSize_|markerClusterer_|trigger|extend|width_|clusterIcon_|||cluster|printable_|style|height|ignoreHidden_|averageCenter_|width|text|lng|center|getMarkerClusterer|redraw_|repaint|getZoom|listeners_|ready_|isAdded|LatLng|undefined|LatLngBounds|visible_|size|timerRefStatic|imageSizes_|indexOf|hide|batchSizeIE_|activeMap_|resetViewport_|imageExtension_|imagePath_|sums_|getBounds|getMaxZoom|addMarker|remove|getMarkers|left|font|180|addListener|addDomListener|sin|PI|zoomOnClick_|typeof|top|calculator_|show|parseInt|div|batchSize_|anchorIcon_|title_|maxZoom_|url|min|delete|getStyles|calculateBounds_|createClusters_|url_|fromLatLngToDivPixel|getPosFromLatLng_|getSouthWest|getExtendedBounds|getNorthEast|bounds_|removeMarker_|pushMarkerTo_|position|IMAGE_SIZES|idle|fontFamily_|BATCH_SIZE|parentNode|setupStyles_|fontWeight_|addMarkers|onRemove|BATCH_SIZE_IE|textDecoration_|mouseout|draw|CALCULATOR|mouseover|textSize_|stopPropagation|setCenter|IMAGE_EXTENSION|textColor_|backgroundPosition_|IMAGE_PATH|printable|ignoreHidden|averageCenter|background|zoomOnClick|fontStyle_|fitBounds|getCalculator|index|isMarkerInClusterBounds|updateIcon_|getZoomOnClick|onAdd|useStyle|isMarkerAlreadyAdded_|getTitle|title|getCenter|click|0px|getGridSize|innerHTML|addToClosestCluster_|85|getProjection|178|createCss|OverlayView|contains|isMarkerInBounds_|sqrt|cos|none|distanceBetweenPoints_|display|fromDivPixelToLatLng|getAverageCenter|getMinimumClusterSize|setTimeout|align|line|padding|absolute|getPrintable|number|setBatchSizeIE|getBatchSizeIE|setPrintable|setImageSizes|getImageSizes|setImagePath|backgroundPosition|setImageExtension|setIgnoreHidden|serif|sans|setZoomOnClick|setTitle|Arial|removeChild|fontFamily|setGridSize|clearInstanceListeners|removeListener|normal|fontStyle|zoom_changed|bold|msie|fontWeight|toLowerCase|userAgent|createElement|navigator|textDecoration|batchSizeIE|batchSize|textSize|fitMapToMarkers|document|setMinimumClusterSize|setMaxZoom|setStyles|calculator|imageSizes|setAverageCenter|getIgnoreHidden|black|getImageExtension|textColor|getImagePath|imageExtension|cancelBubble|imagePath|setCalculator|anchorIcon|setZoom|styles|getTotalMarkers|anchor|maxZoom|minimumClusterSize|60|gridSize|max|clusterclick|getSize|90|78|66|images|markerclustererplus|svn|com|googlecode|mousedown|library|utility|http|2000|while|toString|src|in|getVisible|img|08136444384544|48388434375|bounds_changed|02070771743472|clearTimeout|clusteringbegin|join|40000|decoration|atan2|weight|cssText|00048865625|family|clusteringend|6371|apply|color|pointer|cursor|500|appendChild|slice|clearMarkers|v3|splice|break|overlayMouseTarget|trunk|removeMarkers||removeMarker|dragend||png|object|getDraggable|getTotalClusters|getClusters|image|getPanes'.split('|'),0,{}))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment