Файл: assets/plugins/markerclusterer/1.0.1/examples/advanced_example.html
Строк: 176
<?php
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MarkerClusterer v3 Example</title>
<style type="text/css">
body {
margin: 0;
padding: 10px 20px 20px;
font-family: Arial;
font-size: 16px;
}
#map-container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
width: 800px;
}
#map {
width: 800px;
height: 400px;
}
#actions {
list-style: none;
padding: 0;
}
#inline-actions {
padding-top: 10px;
}
.item {
margin-left: 20px;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="../src/data.json" type="text/javascript"></script>
<script type="text/javascript">
var script = '<script type="text/javascript" src="../src/markerclusterer';
if (document.location.search.indexOf('compiled') !== -1) {
script += '_compiled';
}
script += '.js"><' + '/script>';
document.write(script);
</script>
<script type="text/javascript">
var styles = [[{
url: '../images/people35.png',
height: 35,
width: 35,
anchor: [16, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: '../images/people45.png',
height: 45,
width: 45,
anchor: [24, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: '../images/people55.png',
height: 55,
width: 55,
anchor: [32, 0],
textColor: '#ffffff',
textSize: 12
}], [{
url: '../images/conv30.png',
height: 27,
width: 30,
anchor: [3, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: '../images/conv40.png',
height: 36,
width: 40,
anchor: [6, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: '../images/conv50.png',
width: 50,
height: 45,
anchor: [8, 0],
textSize: 12
}], [{
url: '../images/heart30.png',
height: 26,
width: 30,
anchor: [4, 0],
textColor: '#ff00ff',
textSize: 10
}, {
url: '../images/heart40.png',
height: 35,
width: 40,
anchor: [8, 0],
textColor: '#ff0000',
textSize: 11
}, {
url: '../images/heart50.png',
width: 50,
height: 44,
anchor: [12, 0],
textSize: 12
}]];
var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
'chco=FFFFFF,008CFF,000000&ext=.png';
function refreshMap() {
if (markerClusterer) {
markerClusterer.clearMarkers();
}
var markers = [];
var infowindow = new google.maps.InfoWindow();
var markerImage = new google.maps.MarkerImage(imageUrl,
new google.maps.Size(24, 32));
for (var i = 0; i < 1000; ++i) {
var content = '<div class="infowindow"><b><a href="'+ data.photos[i].photo_file_url +'">' + data.photos[i].photo_title + '</a></b>'
+ '<br />' + data.photos[i].owner_name + ' '
+ '<p><i>' + data.photos[i].upload_date + '</i></p></div>';
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude)
var marker = new google.maps.Marker({
position: latLng,
draggable: true,
icon: markerImage
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map, marker);
});
markers.push(marker);
}
var zoom = parseInt(document.getElementById('zoom').value, 10);
var size = parseInt(document.getElementById('size').value, 10);
var style = parseInt(document.getElementById('style').value, 10);
zoom = zoom == -1 ? null : zoom;
size = size == -1 ? null : size;
style = style == -1 ? null: style;
markerClusterer = new MarkerClusterer(map, markers, {
maxZoom: zoom,
gridSize: size,
styles: styles[style]
});
}
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(39.91, 116.38),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var refresh = document.getElementById('refresh');
google.maps.event.addDomListener(refresh, 'click', refreshMap);
var clear = document.getElementById('clear');
google.maps.event.addDomListener(clear, 'click', clearClusters);
refreshMap();
}
function clearClusters(e) {
e.preventDefault();
e.stopPropagation();
markerClusterer.clearMarkers();
}
</script>
</head>
<body onload="initialize();">
<h3>An example of MarkerClusterer v3</h3>
<p>
<a href="?compiled">Compiled</a> |
<a href="?">Standard</a> version of the script.
</p>
<div id="map-container">
<div id="map"></div>
</div>
<div id="inline-actions">
<span>Max zoom level:
<select id="zoom">
<option value="-1">Default</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
</span>
<span class="item">Cluster size:
<select id="size">
<option value="-1">Default</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="70">70</option>
<option value="80">80</option>
</select>
</span>
<span class="item">Cluster style:
<select id="style">
<option value="-1">Default</option>
<option value="0">People</option>
<option value="1">Conversation</option>
<option value="2">Heart</option>
</select>
<input id="refresh" type="button" value="Refresh Map" class="item"/>
<a href="#" id="clear">Clear</a>
</div>
</body>
</html>
?>