File: /var/www/elite/node_modules/js-info-bubble/examples/example.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>InfoBubble Example</title>
<style>
body {
font-size: 83%;
}
body, input, textarea {
font-family: arial, sans-serif;
}
#map {
width: 600px;
height: 500px;
}
#styles, #add-tab {
float: left;
margin-top: 10px;
width: 400px;
}
#styles label,
#add-tab label {
display: inline-block;
width: 130px;
}
.phoney {
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgb(112,112,112)),color-stop(0.51, rgb(94,94,94)),color-stop(0.52, rgb(57,57,57)));
background: -moz-linear-gradient(center top,rgb(112,112,112) 0%,rgb(94,94,94) 51%,rgb(57,57,57) 52%);
}
.phoneytext {
text-shadow: 0 -1px 0 #000;
color: #fff;
font-family: Helvetica Neue, Helvetica, arial;
font-size: 16px;
line-height: 25px;
padding: 4px 45px 4px 15px;
font-weight: bold;
background: url(../images/arrow.png) 95% 50% no-repeat;
}
.phoneytab {
text-shadow: 0 -1px 0 #000;
color: #fff;
font-family: Helvetica Neue, Helvetica, arial;
font-size: 18px;
background: rgb(112,112,112) !important;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var script = '<script src="../src/infobubble';
if (document.location.search.indexOf('compiled') !== -1) {
script += '-compiled';
}
script += '.js"><' + '/script>';
document.write(script);
</script>
<script>
var map, infoBubble, infoBubble2;
function init() {
var mapCenter = new google.maps.LatLng(-35.397, 150.644);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(-35, 150),
draggable: true
});
var contentString = '<div id="content">'+
'<h1>Uluru</h1>'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.</p>'+
'<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
'(last visited June 22, 2009).</p>'+
'</div>';
infoBubble = new InfoBubble({
maxWidth: 300
});
infoBubble2 = new InfoBubble({
map: map,
content: '<div class="phoneytext">Some label</div>',
position: new google.maps.LatLng(-35, 151),
shadowStyle: 1,
padding: 0,
backgroundColor: 'rgb(57,57,57)',
borderRadius: 4,
arrowSize: 10,
borderWidth: 1,
borderColor: '#2c2c2c',
disableAutoPan: true,
hideCloseButton: true,
arrowPosition: 30,
backgroundClassName: 'phoney',
arrowStyle: 2
});
infoBubble.open(map, marker);
infoBubble2.open();
var div = document.createElement('DIV');
div.innerHTML = 'Hello';
infoBubble.addTab('A Tab', div);
infoBubble.addTab('Uluru', contentString);
google.maps.event.addListener(marker, 'click', function() {
if (!infoBubble.isOpen()) {
infoBubble.open(map, marker);
}
});
google.maps.event.addDomListener(document.getElementById('update'),
'click', updateStyles);
google.maps.event.addDomListener(document.getElementById('add'),
'click', addTab);
google.maps.event.addDomListener(document.getElementById('update-tab'),
'click', updateTab);
google.maps.event.addDomListener(document.getElementById('remove'),
'click', removeTab);
google.maps.event.addDomListener(document.getElementById('open'),
'click', function() {
infoBubble2.open();
});
google.maps.event.addDomListener(document.getElementById('close'),
'click', function() {
infoBubble2.close();
});
}
google.maps.event.addDomListener(window, 'load', init);
function updateStyles() {
var shadowStyle = document.getElementById('shadowstyle').value;
infoBubble.setShadowStyle(shadowStyle);
var padding = document.getElementById('padding').value;
infoBubble.setPadding(padding);
var borderRadius = document.getElementById('borderRadius').value;
infoBubble.setBorderRadius(borderRadius);
var borderWidth = document.getElementById('borderWidth').value;
infoBubble.setBorderWidth(borderWidth);
var borderColor = document.getElementById('borderColor').value;
infoBubble.setBorderColor(borderColor);
var backgroundColor = document.getElementById('backgroundColor').value;
infoBubble.setBackgroundColor(backgroundColor);
var maxWidth = document.getElementById('maxWidth').value;
infoBubble.setMaxWidth(maxWidth);
var maxHeight = document.getElementById('maxHeight').value;
infoBubble.setMaxHeight(maxHeight);
var minWidth = document.getElementById('minWidth').value;
infoBubble.setMinWidth(minWidth);
var minHeight = document.getElementById('minHeight').value;
infoBubble.setMinHeight(minHeight);
var arrowSize = document.getElementById('arrowSize').value;
infoBubble.setArrowSize(arrowSize);
var arrowPosition = document.getElementById('arrowPosition').value;
infoBubble.setArrowPosition(arrowPosition);
var arrowStyle = document.getElementById('arrowStyle').value;
infoBubble.setArrowStyle(arrowStyle);
var closeSrc = document.getElementById('closeSrc').value;
infoBubble.setCloseSrc(closeSrc);
}
function addTab() {
var title = document.getElementById('tab-title').value;
var content = document.getElementById('tab-content').value;
if (title !== '' && content !== '') {
infoBubble.addTab(title, content);
}
}
function updateTab() {
var index = document.getElementById('tab-index-update').value;
var title = document.getElementById('tab-title-update').value;
var content = document.getElementById('tab-content-update').value;
if (index) {
infoBubble.updateTab(index, title, content);
}
}
function removeTab() {
var index = document.getElementById('tab-index').value;
infoBubble.removeTab(index);
}
</script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12846745-20']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' === document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<h3>InfoBubble</h3>
<p><a href="?compiled">Compiled</a> or <a href="?">Standard</a> version of the script.</p>
<div id="map"></div>
<div id="styles">
<h2>Style</h2>
<div>
<label>ShadowStyle:</label>
<select id="shadowstyle">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div>
<label>Padding:</label>
<input type="text" id="padding" value="10"/>
</div>
<div>
<label>borderRadius:</label>
<input type="text" id="borderRadius" value="10"/>
</div>
<div>
<label>borderWidth:</label>
<input type="text" id="borderWidth" value="1"/>
</div>
<div>
<label>borderColor:</label>
<input type="text" id="borderColor" value="#ccc"/>
</div>
<div>
<label>backgroundColor:</label>
<input type="text" id="backgroundColor" value="#fff"/>
</div>
<div>
<label>minWidth:</label>
<input type="text" id="minWidth"/>px
</div>
<div>
<label>maxWidth:</label>
<input type="text" id="maxWidth" value="300"/>px
</div>
<div>
<label>minHeight:</label>
<input type="text" id="minHeight"/>px
</div>
<div>
<label>maxHeight:</label>
<input type="text" id="maxHeight"/>px
</div>
<div>
<label>arrowSize:</label>
<input type="text" id="arrowSize" value="15"/>px
</div>
<div>
<label>arrowPosition:</label>
<input type="text" id="arrowPosition" value="50"/>%
</div>
<div>
<label>arrowStyle:</label>
<select id="arrowStyle">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div>
<label>closeSrc:</label>
<input type="text" id="closeSrc" value="https://maps.gstatic.com/intl/en_us/mapfiles/iw_close.gif"/>
</div>
<button id="update">Update styles</button>
</div>
<div id="add-tab">
<h2>Add Tab</h2>
<div><label>Title:</label><input type="text" id="tab-title"/></div>
<div><label>Content:</label><textarea id="tab-content"></textarea></div>
<button id="add">Add</button>
<h2>Update Tab</h2>
<div><label>Index:</label><input type="text" id="tab-index-update"/></div>
<div><label>Title:</label><input type="text" id="tab-title-update"/></div>
<div><label>Content:</label><textarea id="tab-content-update"></textarea></div>
<button id="update-tab">Update</button>
<h2>Remove Tab</h2>
<div><label>Index:</label><input type="text" id="tab-index"/></div>
<button id="remove">Remove</button>
<h2>Other InfoBubble</h2>
<button id="open">Open</button>
<button id="close">Close</button>
</div>
</body>
</html>