Skip to content

Instantly share code, notes, and snippets.

@aabir

aabir/index.html

Last active October 30, 2015 09:33
Show Gist options
  • Save aabir/61c9b851bd8fc62581e7 to your computer and use it in GitHub Desktop.
Save aabir/61c9b851bd8fc62581e7 to your computer and use it in GitHub Desktop.
Download ZIP
Google map API with multiple addresses, custom marker, custom info box window and custom map style.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Info windows</title>
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div id="map" style="width: 900px; height: 500px;"></div>
<a href="javascript:void(0);" id="reset"> Reset </a>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/infobox.js"></script>
<script type="text/javascript">
/* Styling map */
var customMapType = new google.maps.StyledMapType([{
stylers : [ {
hue : "#cccccc"
}, {
saturation : -100
}]
}, {
featureType : "road",
elementType : "geometry",
stylers : [ {
lightness : 100
}, {
visibility : "simplified"
}]
}, {
featureType : "road",
elementType : "labels",
stylers : [ {
visibility : "on"
}]
}, {
featureType: "poi",
stylers: [ {
visibility: "off"
}]
}]);
var customMapTypeId = 'custom_style';
$(document).on('touchend', '.closeInfo', function(e) {
e.preventDefault();
infobox.open(null,null);
});
$(document).on('click', '.closeInfo', function(e) {
e.preventDefault();
infobox.open(null,null);
});
/* Map options */
var delay = 100;
var latlng = new google.maps.LatLng();
var mapOptions = {
zoom: 5,
center: latlng,
panControl: false,
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: true,
overviewMapControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP
},
streetViewControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
mapTypeId: google.maps.MapTypeId.ROADMAP, customMapTypeId
}
/* Info window settings */
var infobox = new InfoBox({
disableAutoPan: false,
maxWidth: 202,
pixelOffset: new google.maps.Size(-101, -282),
zIndex: null,
boxStyle: {
background: "url('images/infobox-bg.png') no-repeat",
opacity: 1,
width: "202px",
height: "245px"
},
closeBoxMargin: "28px 26px 0px 0px",
closeBoxURL: "",
infoBoxClearance: new google.maps.Size(1, 1),
pane: "floatPane",
enableEventPropagation: false
}), locations, i;
var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var bounds = new google.maps.LatLngBounds();
map.mapTypes.set(customMapTypeId, customMapType);
map.setMapTypeId(customMapTypeId);
function geocodeAddress(address, siteimage, subtitle, permalinkview, next) {
geocoder.geocode({address:address}, function (results,status){
if (status == google.maps.GeocoderStatus.OK) {
var p = results[0].geometry.location;
var lat=p.lat();
var lng=p.lng();
createMarker(address, siteimage, subtitle, permalinkview, lat, lng);
} else {
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
nextAddress--;
delay++;
}
}
next();
});
}
/* Address to display */
var locations = [
['London Eye, London'],
['Palace of Westminster, London'],
['Abbey Wood, London'],
['Angel, London'],
['Ardleigh Green, London'],
['Arnos Grove, London'],
['Bankside, London'],
['Barbican, London']
];
/* For images*/
var siteimages=[
['images/avatar.png'],
['images/avatar.png'],
['images/avatar.png'],
['images/avatar.png'],
['images/avatar.png'],
['images/avatar.png'],
['images/avatar.png'],
['images/avatar.png']
];
/* For sub address*/
var subtitle=[
['this is sub address one'],
['This is sub addess two'],
['This is sub addess three'],
['This is sub addess four'],
['This is sub addess five'],
['This is sub addess six'],
['This is sub addess seven'],
['This is sub addess eight']
];
/* For Permalink view*/
var permalinkview=[
['http://google.com/'],
['http://google.com/'],
['http://google.com/'],
['http://google.com/'],
['http://google.com/'],
['http://google.com/'],
['http://google.com/'],
['http://google.com/']
];
/* Marker */
function createMarker(add, siteimage, subtitle, permalinkview, lat, lng) {
var cnt = mycontent(add, siteimage, subtitle, permalinkview);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
icon: 'images/marker-green.png',
draggable: true,
animation: google.maps.Animation.DROP
});
/* Onclick show infowindow */
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(16);
singlePos(lat, lng);
infobox.setContent(cnt);
infobox.open(map,marker);
});
bounds.extend(marker.position);
}
function singlePos(lat, lng){ // For centering a specific position on map.
map.setCenter(new google.maps.LatLng(lat, lng));
}
$('#reset').on('click', function(){
theNext();
infobox.open(null,null);
});
var nextAddress = 0;
function theNext() {
if (nextAddress < locations.length) {
setTimeout('geocodeAddress("'+locations[nextAddress]+'","'+siteimages[nextAddress]+'","'+subtitle[nextAddress]+'","'+permalinkview[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
map.fitBounds(bounds);
}
}
theNext();
function mycontent(add, siteimage, subtitle, permalinkview){
return contentString = '<div class="infoW">' +
'<div class="propImg">' +
'<img src="'+siteimage+'">' +
'</div>' +
'<div class="paWrapper">' +
'<div class="propTitle">'+ add +'</div>' +
'<div class="propAddress">'+subtitle+'</div>'+
'</div>' +
'<div class="clearfix"></div>' +
'<div class="infoButtons">' +
'<a href="#" class="btn btn-sm btn-round btn-gray btn-o closeInfo">Close</a>' +
'<a href="'+permalinkview+'" class="btn btn-sm btn-round btn-green viewInfo">View</a>' +
'</div>' +
'</div>';
}
</script>
</body>
</html>
Raw
style.css
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { position: relative; }
.infoW {
font-family: 'open_sansregular', sans-serif, Arial;
color: #333;
padding: 0 1px;
z-index: 10;
}
.propImg {
position: relative;
}
.propImg img {
width: 200px;
height: 120px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.propType {
background-color: #eab134;
font-size: 10px;
line-height: 11px;
color: #fff;
padding: 2px 4px;
border-radius: 2px;
position: absolute;
right: 10px;
bottom: 10px;
text-transform: uppercase;
z-index: 3;
}
.paWrapper {
padding: 10px 10px 0 10px;
}
.propPrice {
position: absolute;
left: 10px;
bottom: 10px;
color: #fff;
font-size: 12px;
line-height: 12px;
z-index: 3;
}
.propTitle {
/*font-weight: bold;*/
font-size: 14px;
line-height: 16px;
white-space: nowrap;
overflow: hidden;
padding-bottom: 3px;
}
.propAddress {
white-space: nowrap;
overflow: hidden;
color: #999;
font-size: 11px;
line-height: 12px;
padding-bottom: 12px;
height: 24px;
}
.infoButtons {
padding: 10px;
}
a.btn.viewInfo, a.btn.closeInfo {
width: 85px;
padding: 6px 29px;
}
a.btn.viewInfo {
margin-left: 10px;
}
.btn-green {
background-color: #0eaaa6;
color: #fff;
}
.btn {
border-radius: 2px;
text-decoration: none;
}
.btn-round {
border-radius: 50px;
}
.btn-o {
border-width: 1px;
border-style: solid;
}
.btn-gray {
background-color: #999;
color: #fff;
}
.btn-o.btn-gray {
background-color: transparent;
color: #999;
border-color: #999;
}
.no-touch .btn-gray:hover,
.btn-gray:focus,
.btn-gray:active,
.btn-gray.active,
.open > .dropdown-toggle.btn-gray {
background-color: #333;
color: #fff;
}
.no-touch .btn-o.btn-gray:hover,
.btn-o.btn-gray:focus,
.btn-o.btn-gray:active,
.btn-o.btn-gray.active,
.open > .dropdown-toggle.btn-o.btn-gray {
background-color: #999;
color: #fff;
}
.btn-light-gray {
background-color: #dfdfdf;
color: #333;
}
.btn-o.btn-light-gray {
background-color: transparent;
color: #999;
border-color: #dfdfdf;
}
.no-touch .btn-light-gray:hover,
.btn-light-gray:focus,
.btn-light-gray:active,
.btn-light-gray.active,
.open > .dropdown-toggle.btn-light-gray {
background-color: #999;
color: #333;
}
.no-touch .btn-o.btn-light-gray:hover,
.btn-o.btn-light-gray:focus,
.btn-o.btn-light-gray:active,
.btn-o.btn-light-gray.active,
.open > .dropdown-toggle.btn-o.btn-light-gray {
background-color: transparent;
color: #333;
border-color: #999;
}
.btn-white {
background-color: #fff;
color: #999;
}
.btn-o.btn-white {
background-color: transparent;
color: #fff;
border-color: #fff;
}
.no-touch .btn-white:hover,
.btn-white:focus,
.btn-white:active,
.btn-white.active,
.open > .dropdown-toggle.btn-white {
background-color: #fff;
color: #333;
}
.no-touch .btn-o.btn-white:hover,
.btn-o.btn-white:focus,
.btn-o.btn-white:active,
.btn-o.btn-white.active,
.open > .dropdown-toggle.btn-o.btn-white {
background-color: #fff;
color: #333;
}
.btn-black {
background-color: #333;
color: #fff;
}
.btn-o.btn-black {
background-color: transparent;
color: #333;
border-color: #333;
}
.no-touch .btn-black:hover,
.btn-black:focus,
.btn-black:active,
.btn-black.active,
.open > .dropdown-toggle.btn-black {
background-color: #000;
color: #fff;
}
.no-touch .btn-o.btn-black:hover,
.btn-o.btn-black:focus,
.btn-o.btn-black:active,
.btn-o.btn-black.active,
.open > .dropdown-toggle.btn-o.btn-black {
background-color: #000;
color: #fff;
}
.btn-green {
background-color: #0eaaa6;
color: #fff;
}
.btn-o.btn-green {
background-color: transparent;
color: #0eaaa6;
border-color: #0eaaa6;
}
.no-touch .btn-green:hover,
.btn-green:focus,
.btn-green:active,
.btn-green.active,
.open > .dropdown-toggle.btn-green {
background-color: #068b85;
color: #fff;
}
.no-touch .btn-o.btn-green:hover,
.btn-o.btn-green:focus,
.btn-o.btn-green:active,
.btn-o.btn-green.active,
.open > .dropdown-toggle.btn-o.btn-green {
background-color: #0eaaa6;
color: #fff;
}
.btn-blue {
background-color: #1d82aa;
color: #fff;
}
.btn-o.btn-blue {
background-color: transparent;
color: #1d82aa;
border-color: #1d82aa;
}
.no-touch .btn-blue:hover,
.btn-blue:focus,
.btn-blue:active,
.btn-blue.active,
.open > .dropdown-toggle.btn-blue {
background-color: #086492;
color: #fff;
}
.no-touch .btn-o.btn-blue:hover,
.btn-o.btn-blue:focus,
.btn-o.btn-blue:active,
.btn-o.btn-blue.active,
.open > .dropdown-toggle.btn-o.btn-blue {
background-color: #1d82aa;
color: #fff;
}
.btn-magenta {
background-color: #9b156e;
color: #fff;
}
.btn-o.btn-magenta {
background-color: transparent;
color: #9b156e;
border-color: #9b156e;
}
.no-touch .btn-magenta:hover,
.btn-magenta:focus,
.btn-magenta:active,
.btn-magenta.active,
.open > .dropdown-toggle.btn-magenta {
background-color: #7e115f;
color: #fff;
}
.no-touch .btn-o.btn-magenta:hover,
.btn-o.btn-magenta:focus,
.btn-o.btn-magenta:active,
.btn-o.btn-magenta.active,
.open > .dropdown-toggle.btn-o.btn-magenta {
background-color: #9b156e;
color: #fff;
}
.btn-yellow {
background-color: #eab134;
color: #fff;
}
.btn-o.btn-yellow {
background-color: transparent;
color: #eab134;
border-color: #eab134;
}
.no-touch .btn-yellow:hover,
.btn-yellow:focus,
.btn-yellow:active,
.btn-yellow.active,
.open > .dropdown-toggle.btn-yellow {
background-color: #dfa412;
color: #fff;
}
.no-touch .btn-o.btn-yellow:hover,
.btn-o.btn-yellow:focus,
.btn-o.btn-yellow:active,
.btn-o.btn-yellow.active,
.open > .dropdown-toggle.btn-o.btn-yellow {
background-color: #eab134;
color: #fff;
}
.btn-red {
background-color: #ea3d36;
color: #fff;
}
.btn-o.btn-red {
background-color: transparent;
color: #ea3d36;
border-color: #ea3d36;
}
.no-touch .btn-red:hover,
.btn-red:focus,
.btn-red:active,
.btn-red.active,
.open > .dropdown-toggle.btn-red {
background-color: #d22a2a;
color: #fff;
}
.no-touch .btn-o.btn-red:hover,
.btn-o.btn-red:focus,
.btn-o.btn-red:active,
.btn-o.btn-red.active,
.open > .dropdown-toggle.btn-o.btn-red {
background-color: #ea3d36;
color: #fff;
}
.btn-facebook {
background-color: #43609c;
color: #fff;
}
.btn-o.btn-facebook {
background-color: transparent;
color: #43609c;
border-color: #43609c;
}
.no-touch .btn-facebook:hover,
.btn-facebook:focus,
.btn-facebook:active,
.btn-facebook.active,
.open > .dropdown-toggle.btn-facebook {
background-color: #395285;
color: #fff;
}
.no-touch .btn-o.btn-facebook:hover,
.btn-o.btn-facebook:focus,
.btn-o.btn-facebook:active,
.btn-o.btn-facebook.active,
.open > .dropdown-toggle.btn-o.btn-facebook {
background-color: #43609c;
color: #fff;
}
.btn-twitter {
background-color: #55acee;
color: #fff;
}
.btn-o.btn-twitter {
background-color: transparent;
color: #55acee;
border-color: #55acee;
}
.no-touch .btn-twitter:hover,
.btn-twitter:focus,
.btn-twitter:active,
.btn-twitter.active,
.open > .dropdown-toggle.btn-twitter {
background-color: #4993cc;
color: #fff;
}
.no-touch .btn-o.btn-twitter:hover,
.btn-o.btn-twitter:focus,
.btn-o.btn-twitter:active,
.btn-o.btn-twitter.active,
.open > .dropdown-toggle.btn-o.btn-twitter {
background-color: #55acee;
color: #fff;
}
.btn-google {
background-color: #dd4b39;
color: #fff;
}
.btn-o.btn-google {
background-color: transparent;
color: #dd4b39;
border-color: #dd4b39;
}
.no-touch .btn-google:hover,
.btn-google:focus,
.btn-google:active,
.btn-google.active,
.open > .dropdown-toggle.btn-google {
background-color: #c44433;
color: #fff;
}
.no-touch .btn-o.btn-google:hover,
.btn-o.btn-google:focus,
.btn-o.btn-google:active,
.btn-o.btn-google.active,
.open > .dropdown-toggle.btn-o.btn-google {
background-color: #dd4b39;
color: #fff;
}
.btn-pinterest {
background-color: #cb2027;
color: #fff;
}
.btn-o.btn-pinterest {
background-color: transparent;
color: #cb2027;
border-color: #cb2027;
}
.no-touch .btn-pinterest:hover,
.btn-v:focus,
.btn-pinterest:active,
.btn-pinterest.active,
.open > .dropdown-toggle.btn-pinterest {
background-color: #b51d22;
color: #fff;
}
.no-touch .btn-o.btn-pinterest:hover,
.btn-o.btn-pinterest:focus,
.btn-o.btn-pinterest:active,
.btn-o.btn-pinterest.active,
.open > .dropdown-toggle.btn-o.btn-pinterest {
background-color: #cb2027;
color: #fff;
}
.btn-linkedin {
background-color: #0177b5;
color: #fff;
}
.btn-o.btn-linkedin {
background-color: transparent;
color: #0177b5;
border-color: #0177b5;
}
.no-touch .btn-linkedin:hover,
.btn-linkedin:focus,
.btn-linkedin:active,
.btn-linkedin.active,
.open > .dropdown-toggle.btn-linkedin {
background-color: #026599;
color: #fff;
}
.no-touch .btn-o.btn-linkedin:hover,
.btn-o.btn-linkedin:focus,
.btn-o.btn-linkedin:active,
.btn-o.btn-linkedin.active,
.open > .dropdown-toggle.btn-o.btn-linkedin {
background-color: #0177b5;
color: #fff;
}
.btn-icon {
padding-left: 0 !important;
padding-right: 0 !important;
width: 36px;
text-align: center;
}
.btn-icon.btn-lg {
width: 41px;
}
.btn-icon.btn-sm {
width: 31px;
}
.btn-icon.btn-xs {
width: 22px;
}
.btn-icon.btn-round {
border-radius: 50%;
}
.btn > .state, .btn.active > .state-active {
display: inline-block;
}
.btn.active > .state, .btn > .state-active {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment