<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MarkerClusterer v3 Simple Example</title>
<style>
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: 600px;
}
#map {
width: 600px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="data.json"></script>
<!-- <script type="text/javascript" src="../src/markerclusterer.js"></script> -->
<script type="text/javascript" src="../src/jquery.min.js"></script>
<script type="text/javascript" src="../src/jquery-ui.js"></script>
<script type="text/javascript" src="../src/oms.min.js"></script>
<script>
//function initialize() {
// var center = new google.maps.LatLng(37.4419, -122.1419);
// var map = new google.maps.Map(document.getElementById('map'), {
// zoom: 3,
// center: center,
// mapTypeId: google.maps.MapTypeId.ROADMAP
// });
// var markers = [];
// for (var i = 0; i < 100; i++) {
// var dataPhoto = data.photos[i];
// var latLng = new google.maps.LatLng(dataPhoto.latitude,
// dataPhoto.longitude);
// var marker = new google.maps.Marker({
// position: latLng
// });
// markers.push(marker);
// }
// var markerCluster = new MarkerClusterer(map, markers, {imagePath: '../images/m'});
//}
function initialize() {
const image_building = {
url: "../images/ico_building.png",
size: new google.maps.Size(37, 50),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 50),
};
var center = new google.maps.LatLng(23.4241, 55.8478);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
$.ajax({
url: 'https://aaa.dsc.com' + '/api/api/Maps/bind/auh',
"method": "GET",
"headers": {
"conte": "application/json",
"cache-control": "no-cache",
}
, success: function (response) {
debugger
lstMaps = response;
var markers = [];
var infowindow = [];
const sightingIcon = {
path: "M 0 0 L 4 -4 L 4 -16 L 26 -16 L 26 -34 L -26 -34 L -26 -16 L -4 -16 L -4 -4 Z",
fillOpacity:1,
fillColor:"#ffcc00",
strokeWeight:1,
strokeColor:"#000",
scale:1,
labelOrigin: {x:0, y:-25}
};
//var bounds = new google.maps.LatLngBounds();
var oms = new OverlappingMarkerSpiderfier(map,
{markersWontMove: true,
markersWontHide: true,
basicFormatEvents: true,
nudgeRadius: 20,
nearbyDistance: 40,
circleSpiralSwitchover: 8,
spiralFootSeparation:20,
spiralLengthStart: 16,
spiralLengthFactor: 12,
circleFootSeparation:50,
circleStartAngle: 180});
for (let i = 0; i < lstMaps.length; i++) {
//debugger
//alert(lstmaps.length);
// const locationItem = locationsArray[i];
let mapIcon = image_building.url;
let latt = 0;
let long = 0;
if (response[i].Attributes[2] != null && response[i].Attributes[2] != undefined && response[i].Attributes[3] != null && response[i].Attributes[3] != undefined) {
latt = parseFloat(response[i].Attributes[3].Value.Value);
long = parseFloat(response[i].Attributes[2].Value.Value)
}
// console.log(mapIcon);
/* markers[i] = new google.maps.Marker({
position: {
lat: latt,
lng: long
},
map,
icon: mapIcon,
// shape: shape,
title: response[i].Attributes[0].Value,
//zIndex: locationItem[3],
}); */
//start
// bounds.extend(response[i]);
var markerData = response[i];
var marker = new google.maps.Marker({position:{lat:latt,lng:long}, title: response[i].Attributes[0].Value, label: response[i].code, opacity: 1, icon: image_building.url});
markers.push(marker);
marker.addListener('spider_click', function(e) {});
oms.addMarker(marker);
//end
}
// var markerCluster = new MarkerClusterer(map, markers, { maxZoom: 19, imagePath: '../images/m' });
var markerCluster = new MarkerClusterer(map, markers,{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',maxZoom:18});
// var iw = new google.maps.InfoWindow()
// map.fitBounds(bounds);
},
error: function (jqXHR, exception) {
var msg = '';
if (jqXHR.status === 0) {
msg = 'Not connect.\n Verify Network.';
} else if (jqXHR.status == 404) {
msg = 'Requested page not found. [404]';
} else if (jqXHR.status == 500) {
msg = 'Internal Server Error [500].';
} else if (exception === 'parsererror') {
msg = 'Requested JSON parse failed.';
} else if (exception === 'timeout') {
msg = 'Time out error.';
} else if (exception === 'abort') {
msg = 'Ajax request aborted.';
} else {
msg = 'Uncaught Error.\n' + jqXHR.responseText;
}
alert(msg);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</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>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier/1.0.3/oms.min.js"></script> -->
</head>
<body>
<h3>A simple example of MarkerClusterer (100 markers)</h3>
<div id="map-container"><div id="map"></div></div>
</body>
</html>
