Skip to content

Instantly share code, notes, and snippets.

@Megafry

Megafry/index.html

Created October 23, 2016 15:13
Show Gist options
  • Save Megafry/a563e9ab4856f66623ef03be3eec7753 to your computer and use it in GitHub Desktop.
Save Megafry/a563e9ab4856f66623ef03be3eec7753 to your computer and use it in GitHub Desktop.
Download ZIP
Google Map API3 with Custom infowindow and marker + markerclusterer
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>GoogleMap</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
#googleMap {
margin: auto;
max-width: 900px;
}
.gm-style-iw-parent {
width: 250px !important;
/*height: 83px !important;*/
}
.gm-style-iw {
width: 250px !important;
top: 0 !important;
left: 0 !important;
border-radius: 2px 2px 0 0;
}
.gm-style-iw + div {
right: -5px !important;
top: -5px !important;
border-radius: 5px !important;
background-color: #ff4b4b !important;
}
.gm-style-iw + div:after {
content: "X";
color: #fff;
padding: 0 3px;
}
.gm-style-iw + div img {
display: none !important;
}
.mapCard {
width: 240px;
float: left;
overflow: hidden;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 0px 5px rgba(0, 0, 0, 0.6);
min-height: 80px;
margin: 5px;
}
.mapCard img {
float: left;
margin-right: 15px;
border-radius: 4px 0 0 4px;
}
.mapCard .text {
display: block;
padding-left: 135px;
word-break: break-word;
padding: 5px;
}
.mapCard h3 {
padding: 0;
margin: 0;
}
.gm-style-iw-parent > div:first-child {
top: auto !important;
bottom: 0 !important;
}
.gm-style-iw-parent > div:first-child > div {
top: auto !important;
left: 245px !important;
z-index: 1;
transform: rotate(-90deg) !important;
transform-origin: top left;
bottom: 56px !important;
}
.gm-style-iw-parent > div:first-child > div:first-child{
display: none;
}
</style>
</head>
<base href="">
<body class="dev">
<div id="googleMap" style="height: 600px;">
</div>
<!-- Scripts -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<script >
//original code from http://jsfiddle.net/07cwyj6n/
//var icon = "https://cdn0.iconfinder.com/data/icons/social-networks-and-media-flat-icons/136/Social_Media_Socialmedia_network_share_socialnetwork_network-14-512.png";
/*
var icon = {
url: "https://cdn0.iconfinder.com/data/icons/social-networks-and-media-flat-icons/136/Social_Media_Socialmedia_network_share_socialnetwork_network-14-512.png", // url
scaledSize: new google.maps.Size(30, 30), // scaled size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(15, 15) // anchor
};
*/
var icon = {
path: "M-10,0a10,10 0 1,0 20,0a10,10 0 1,0 -20,0",
fillColor: '#FF0000',
fillOpacity: .8,
anchor: new google.maps.Point(0,0),
strokeWeight: 0,
scale: 1,
//anchor: new google.maps.Point(0, 10) // anchor
}
var icon2 = {
path: "M-10,0a10,10 0 1,0 20,0a10,10 0 1,0 -20,0",
fillColor: '#FF0000',
fillOpacity: .8,
anchor: new google.maps.Point(0,0),
strokeWeight: 0,
scale: 1.2,
//anchor: new google.maps.Point(0, 10) // anchor
}
var getGoogleClusterInlineSvg = function (color) {
var encoded = window.btoa('<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"><defs><radialGradient cy="0.5" cx="0.5" r="0.5" spreadMethod="pad" id="svg_7"><stop offset="0.011719" stop-opacity="0.996094" stop-color="#ffffff"/><stop offset="1" stop-color="'+color+'"/></radialGradient></defs><title>background</title><rect fill="none" id="canvas_background" height="52" width="52" y="-1" x="-1"/><g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid"><rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/></g><title>Layer 1</title><ellipse stroke="null" fill-opacity="0.51" ry="20.5625" rx="20.5625" id="svg_6" cy="25.000001" cx="25.000001" stroke-width="1.5" fill="url(#svg_7)"/><ellipse stroke="null" fill-opacity="0.51" ry="24.249999" rx="24.249999" id="svg_9" cy="25" cx="25" stroke-width="1.5" fill="url(#svg_7)"/><ellipse stroke="null" ry="16.124999" rx="16.124999" id="svg_10" cy="25" cx="24.999999" stroke-width="1.5" fill="'+color+'"/></svg>');
return ('data:image/svg+xml;base64,' + encoded);
};
var cluster_styles = [
{
width: 50,
height: 50,
url: getGoogleClusterInlineSvg('red'),
textColor: 'white',
textSize: 12
},
{
width: 50,
height: 50,
url: getGoogleClusterInlineSvg('#a90000'),
textColor: 'white',
textSize: 14
},
{
width: 60,
height: 60,
url: getGoogleClusterInlineSvg('#820000'),
textColor: 'white',
textSize: 16
}
//up to 5
];
//var json = "http://path/to/universities.json";
var infowindow = new google.maps.InfoWindow({
pixelOffset: new google.maps.Size(-140,100),
maxWidth: 250,
});
function initialize() {
var mapProp = {
center: new google.maps.LatLng(15.0, 0),
zoom: 2,
//scrollwheel: false,
disableDefaultUI: true,
//mapTypeId: google.maps.MapTypeId.ROADMAP,
//styles: googleMapStyle.StyleDark,
};
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
//close the map if the user zoom
google.maps.event.addListener(map,'zoom_changed',function(){
//map.clearMarkers();
if (infowindow) {
infowindow.close();
}
});
// $.getJSON(json, function(json1) {
var json1 = {
"place2": [
{
"title": "Aberystwyth University",
"website": "http://www.aber.ac.uk",
"image": "https://upload.wikimedia.org/wikipedia/commons/d/dd/Aberystwyth_University,_East_Entrance.jpg",
"lat": 52.415524,
"lng": -4.063066},
{
"title": "Bangor University",
"website": "http://www.bangor.ac.uk",
"image": "https://www.easyuni.com/media/institution/photo/2014/11/06/Bangor-Business-School.jpg",
"lat": 53.229520,
"lng": -4.129987},
{
"title": "Cardiff Metropolitan University",
"website": "http://www.cardiffmet.ac.uk",
"image": "http://www.bcie.co.uk/userfiles/universities/cardiff%20met.jpg",
"lat": 51.482708,
"lng": -3.165881}
]
};
var json1 = {
"place": [
{
"title": "Rosina Lamberti,Sunset,Templestowe , Victoria, Australia",
"image": "http://static.panoramio.com/photos/1920x1280/1578881.jpg",
"lng": 145.141754,
"lat": -37.766372
},
{
"title": "kin-dza-dza",
"image": "http://static.panoramio.com/photos/1920x1280/97671.jpg",
"lng": 30.785408,
"lat": 46.639301
},
{
"title": "Arenal",
"image": "http://static.panoramio.com/photos/1920x1280/25514.jpg",
"lng": -84.693432,
"lat": 10.479372
},
{
"title": "Maria Alm",
"image": "http://static.panoramio.com/photos/1920x1280/57823.jpg",
"lng": 12.900009,
"lat": 47.409968
},
{
"title": "Wheatfield in afternoon light",
"image": "http://static.panoramio.com/photos/1920x1280/532693.jpg",
"lng": 11.272659,
"lat": 59.637472
},
{
"title": "Burg Hohenwerfen",
"image": "http://static.panoramio.com/photos/1920x1280/57819.jpg",
"lng": 13.189259,
"lat": 47.483221
},
{
"title": "Thunderstorm in Martinique",
"image": "http://static.panoramio.com/photos/1920x1280/1282387.jpg",
"lng": -61.013432,
"lat": 14.493688
},
{
"title": "Al tard",
"image": "http://static.panoramio.com/photos/1920x1280/945976.jpg",
"lng": 0.490866,
"lat": 40.903783
},
{
"title": "Hintersee bei Ramsau",
"image": "http://static.panoramio.com/photos/1920x1280/73514.jpg",
"lng": 12.852459,
"lat": 47.609519
},
{
"title": "Antelope Canyon, Ray of Light",
"image": "http://static.panoramio.com/photos/1920x1280/298967.jpg",
"lng": -111.407890,
"lat": 36.894037
},
{
"title": "Val Verzasca - Switzerland",
"image": "http://static.panoramio.com/photos/1920x1280/88151.jpg",
"lng": 8.838158,
"lat": 46.257746
},
{
"title": "Guggenheim and spider",
"image": "http://static.panoramio.com/photos/1920x1280/6463.jpg",
"lng": -2.933736,
"lat": 43.269159
},
{
"title": "Mostar",
"image": "http://static.panoramio.com/photos/1920x1280/107980.jpg",
"lng": 17.815200,
"lat": 43.337255
},
{
"title": "Bora Bora",
"image": "http://static.panoramio.com/photos/1920x1280/9439.jpg",
"lng": -151.750000,
"lat": -16.500000
},
{
"title": "Nivane in Ørsta",
"image": "http://static.panoramio.com/photos/1920x1280/673131.jpg",
"lng": 6.108742,
"lat": 62.226676
},
{
"title": "italy-toscany",
"image": "http://static.panoramio.com/photos/1920x1280/346269.jpg",
"lng": 11.616282,
"lat": 43.064389
},
{
"title": "Gentoo Penguins at Sunrise",
"image": "http://static.panoramio.com/photos/1920x1280/290039.jpg",
"lng": -59.070311,
"lat": -52.430295
},
{
"title": "Les Mines",
"image": "http://static.panoramio.com/photos/1920x1280/1870141.jpg",
"lng": 1.314712,
"lat": 45.922199
},
{
"title": "Az Å‘rszem",
"image": "http://static.panoramio.com/photos/1920x1280/516809.jpg",
"lng": 18.239279,
"lat": 47.535341
},
{
"title": "Amanecer en el Salar de Uyuni",
"image": "http://static.panoramio.com/photos/1920x1280/67347.jpg",
"lng": -67.549438,
"lat": -20.552438
},
{
"title": "tulip",
"image": "http://static.panoramio.com/photos/1920x1280/405822.jpg",
"lng": 139.011619,
"lat": 37.871500
},
{
"title": "Warsaw Bridge 01 [www.wierzchon.com]",
"image": "http://static.panoramio.com/photos/1920x1280/233619.jpg",
"lng": 21.035728,
"lat": 52.242353
},
{
"title": "Hospiz",
"image": "http://static.panoramio.com/photos/1920x1280/70975.jpg",
"lng": 8.024461,
"lat": 46.245801
},
{
"title": "icy_chains_1_hdr_web",
"image": "http://static.panoramio.com/photos/1920x1280/882660.jpg",
"lng": -79.798197,
"lat": 43.321353
},
{
"title": "Marble Cave",
"image": "http://static.panoramio.com/photos/1920x1280/9363990.jpg",
"lng": -72.607527,
"lat": -46.647138
},
{
"title": "fukushimagata",
"image": "http://static.panoramio.com/photos/1920x1280/1884507.jpg",
"lng": 139.243813,
"lat": 37.909669
},
{
"title": "Torrent de pareis",
"image": "http://static.panoramio.com/photos/1920x1280/97723.jpg",
"lng": 2.805762,
"lat": 39.852352
},
{
"title": "Sr. da Pedra",
"image": "http://static.panoramio.com/photos/1920x1280/537672.jpg",
"lng": -8.659008,
"lat": 41.068821
},
{
"title": "zaldiak",
"image": "http://static.panoramio.com/photos/1920x1280/204924.jpg",
"lng": -1.806951,
"lat": 43.245140
},
{
"title": "TIBAUM-BIZZAR",
"image": "http://static.panoramio.com/photos/1920x1280/114795.jpg",
"lng": 7.706180,
"lat": 51.665741
},
{
"title": "Aurora borealis",
"image": "http://static.panoramio.com/photos/1920x1280/1287881.jpg",
"lng": 44.215508,
"lat": 65.829148
},
{
"title": "Water Cuts Rock",
"image": "http://static.panoramio.com/photos/1920x1280/1781717.jpg",
"lng": -113.047771,
"lat": 37.312154
},
{
"title": "albufera",
"image": "http://static.panoramio.com/photos/1920x1280/196103.jpg",
"lng": -0.323882,
"lat": 39.349166
},
{
"title": "Boulzojavri",
"image": "http://static.panoramio.com/photos/1920x1280/266224.jpg",
"lng": 24.373169,
"lat": 68.908534
},
{
"title": "Richmond Deer",
"image": "http://static.panoramio.com/photos/1920x1280/6126294.jpg",
"lng": -0.275195,
"lat": 51.445890
},
{
"title": "Buci Seine - Looking Up",
"image": "http://static.panoramio.com/photos/1920x1280/168032.jpg",
"lng": 2.336990,
"lat": 48.853891
},
{
"title": "Mercury Bay Sunrise",
"image": "http://static.panoramio.com/photos/1920x1280/1370932.jpg",
"lng": 175.699196,
"lat": -36.817685
},
{
"title": "Adelie-Prat- Kratzmaier",
"image": "http://static.panoramio.com/photos/1920x1280/120844.jpg",
"lng": -59.683228,
"lat": -62.485684
},
{
"title": "Infrared Mediterranean Heat",
"image": "http://static.panoramio.com/photos/1920x1280/940294.jpg",
"lng": 25.376015,
"lat": 36.461537
},
{
"title": "Vizivarázs",
"image": "http://static.panoramio.com/photos/1920x1280/4446084.jpg",
"lng": 17.504482,
"lat": 47.842773
},
{
"title": "Wave",
"image": "http://static.panoramio.com/photos/1920x1280/498352.jpg",
"lng": -112.005315,
"lat": 36.995972
},
{
"title": "Leoparden",
"image": "http://static.panoramio.com/photos/1920x1280/775893.jpg",
"lng": 36.046829,
"lat": -3.818353
},
{
"title": "Sunset Beach Walker",
"image": "http://static.panoramio.com/photos/1920x1280/665502.jpg",
"lng": -124.077530,
"lat": 44.519888
},
{
"title": "Wat Suwan Kuha or Wat Tham, Phang Nga, Winner Unusual Location April 2008",
"image": "http://static.panoramio.com/photos/1920x1280/9021415.jpg",
"lng": 98.471628,
"lat": 8.428840
},
{
"title": "Landwasser-Viadukt - This is an unofficial photo point. Just follow the footpath up from the official one, until the clearing.",
"image": "http://static.panoramio.com/photos/1920x1280/287244.jpg",
"lng": 9.675007,
"lat": 46.681229
},
{
"title": "Oak tree in winter",
"image": "http://static.panoramio.com/photos/1920x1280/677366.jpg",
"lng": 10.771065,
"lat": 59.663926
},
{
"title": "albufera",
"image": "http://static.panoramio.com/photos/1920x1280/196086.jpg",
"lng": -0.323882,
"lat": 39.349166
},
{
"title": "Cold morning",
"image": "http://static.panoramio.com/photos/1920x1280/4340931.jpg",
"lng": 12.113349,
"lat": 49.342559
},
{
"title": "Arpy Lake - Aosta Valley - Italy",
"image": "http://static.panoramio.com/photos/1920x1280/88122.jpg",
"lng": 6.999636,
"lat": 45.723008
},
{
"title": "MITTENS ALONG THE ROAD",
"image": "http://static.panoramio.com/photos/1920x1280/10219582.jpg",
"lng": -110.091248,
"lat": 36.970810
},
{
"title": "Táltostánc",
"image": "http://static.panoramio.com/photos/1920x1280/558167.jpg",
"lng": 18.001614,
"lat": 47.409038
}]};
var markers = [];
$.each(json1.place, function (key, data) {
var latLng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: icon,
animation: google.maps.Animation.DROP,
title: data.title,
});
markers.push(marker);
var details = '<div class="mapCard"><img height="80px" src="' + data.image + '"><div class="text"><h3>'+ data.title +'</h3> <a href="' + data.website + '">link</a></div> </div>';
bindInfoWindow(marker, map, infowindow, details);
// });
});
/*var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'ico'});
*/
var markerCluster = new MarkerClusterer(map, markers,
{styles: cluster_styles});
}
function bindInfoWindow(marker, map, infowindow, strDescription) {
google.maps.event.addListener(marker, 'click', function () {
currentMark = this;
//marker.setAnimation(google.maps.Animation.BOUNCE);
this.setIcon(icon2);
infowindow.setContent(strDescription);
infowindow.open(map, this);
var iwOuter = $('.gm-style-iw');
var iwBackground = iwOuter.prev();
iwBackground.children(':nth-child(2)').css({'display' : 'none'});
iwBackground.children(':nth-child(4)').css({'display' : 'none'});
iwBackground.parent().addClass("gm-style-iw-parent");
});
}
google.maps.event.addListener(infowindow,'closeclick',function(){
currentMark.setIcon(icon);
});
google.maps.event.addDomListener(window, 'load', initialize);
//style for the map
var googleMapStyle = {
"StyleDark": [
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [
{
"saturation": 36
},
{
"color": "#000000"
},
{
"lightness": 40
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"
},
{
"color": "#000000"
},
{
"lightness": 16
}
]
},
{
"featureType": "all",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 20
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
},
{
"weight": 1.2
}
]
},
{
"featureType": "administrative",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.country",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "administrative.country",
"elementType": "geometry",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "administrative.country",
"elementType": "labels.text",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "administrative.province",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
},
{
"saturation": "-100"
},
{
"lightness": "30"
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
},
{
"gamma": "0.00"
},
{
"lightness": "74"
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 20
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "all",
"stylers": [
{
"lightness": "3"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 21
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 29
},
{
"weight": 0.2
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 18
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 16
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 19
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
}
]
}
]
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment