Download js-marker-clusterer: https://github.com/googlemaps/js-marker-clusterer
or from
https://github.com/googlemaps/v3-utility-library
test.json:
var data = {
'points': [
{lat: 37.4119, lng: -122.1419, idDealer: 1, dealerName: 'test 1', salesDiff: 100},
{lat: 37.4219, lng: -122.1419, idDealer: 2, dealerName: 'test 2', salesDiff: -100},
{lat: 37.4319, lng: -122.1419, idDealer: 3, dealerName: 'test 3', salesDiff: 100},
{lat: 37.4419, lng: -122.1419, idDealer: 4, dealerName: 'test 4', salesDiff: -100},
{lat: 37.4519, lng: -122.1419, idDealer: 5, dealerName: 'test 5', salesDiff: 100},
{lat: 37.4619, lng: -122.1419, idDealer: 6, dealerName: 'test 6', salesDiff: -100},
{lat: 37.4719, lng: -122.1419, idDealer: 7, dealerName: 'test 7', salesDiff: 100},
{lat: 37.4819, lng: -122.1419, idDealer: 8, dealerName: 'test 8', salesDiff: 100},
],
};test.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MarkerClusterer v3 Simple Example</title>
<style >
#map {
width: 800px;
height: 600px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="test.json"></script>
<script src="jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="../src/markerclusterer_compiled.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: 13,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
var infowindow = new google.maps.InfoWindow();
var iconURL = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=';
var iconRed = iconURL + 'D|FF0000|000000';
var iconOrange = iconURL + 'D|ff9933|000000';
var iconGreen = iconURL + 'U|33cc00|000000';
var myIcon = iconGreen;
var markers = [];
for (var i = 0; i < data.points.length; i++) {
var latLng = new google.maps.LatLng(data.points[i].lat, data.points[i].lng);
var marker = new google.maps.Marker({
//id: 'test' + i, // this is optional.
icon: myIcon,
//icon: genIcon(),
position: latLng,
mystr: 'str ' + i,
});
// infowindow mouseover - version 1
google.maps.event.addListener(marker, 'mouseover', setInfoWindowContent_v1(map, marker, infowindow));
// (preferred) infowindow mouseover - version 2
// without passing map, marker to the closure function.
google.maps.event.addListener(marker, 'mouseover', setInfoWindowContent_v2(infowindow));
// infowindow mouseover - version 3
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(data.points[i].dealerName);
infowindow.open(map, marker); // or change marker to this.
}
})(marker, i));
// infowindow mouseover - version 4
google.maps.event.addListener(marker, 'mouseover', (function(marker, dataPoint) {
return function() {
infowindow.setContent(dataPoint.dealerName);
infowindow.open(map, marker); // or change marker to this
}
})(marker, data.points[i]));
// infowindow mouseover - version 5
// without passing marker to the closure function. Use this instead of marker.
google.maps.event.addListener(marker, 'mouseover', (function(dataPoint) {
return function() {
infowindow.setContent(dataPoint.dealerName);
infowindow.open(this.map, this);
}
})(data.points[i]));
// infowindow mouseover - version 6
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.setContent(this.mystr);
infowindow.open(map, this);
});
// click
google.maps.event.addListener(marker, 'click', function() {
console.log($(this).attr('mystr'));
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function(){
$(document).on('click', '#test0', function(e){
e.preventDefault();
console.log('clicked!');
});
$(document).on('click', '.gan', function(e){
e.preventDefault();
console.log('clicked!!!!');
});
});
function setInfoWindowContent_v1(map, marker, infowindow) {
return function() {
infowindow.setContent(marker.mystr);
infowindow.open(map, marker);
}
}
function setInfoWindowContent_v2(infowindow) {
return function() {
infowindow.setContent(this.mystr);
infowindow.open(this.map, this);
}
}
function genIcon() {
var icon = {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 1,
fillColor: '#002664',
strokeWeight: 1,
strokeColor: '#FFFFFF',
scale: 5 //pixels
};
return icon;
}
</script>
</head>
<body>
<div id="map"></div>
<a class="gan">test</a>
</body>
</html>Reference:
http://stackoverflow.com/questions/7044587/adding-multiple-markers-with-infowindows-google-maps-api
http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example/16325107#16325107
http://codereview.stackexchange.com/questions/25882/adding-events-to-multiple-markers-in-a-google-map?newreg=8f84e1facf3c42ac9e3adb089a3c6559
No comments:
Post a Comment