Skip to content

Instantly share code, notes, and snippets.

@jetfire21

jetfire21/google_map.html

Created March 30, 2017 19:07
Show Gist options
  • Save jetfire21/533db1f4d5f88e4399d83626137a0abe to your computer and use it in GitHub Desktop.
Save jetfire21/533db1f4d5f88e4399d83626137a0abe to your computer and use it in GitHub Desktop.
Download ZIP
markerclusterer in google map
Raw
google_map.html
<!-- Динамическая карта показывающая все точки(маркеры) с заданными координатами и группирующие кластеры,можно выводить
подсказки для марекров и кластеров -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="https://jobify-demos.astoundify.com/extended/xmlrpc.php" />
<meta name="viewport" content="initial-scale=1">
<meta name="viewport" content="width=device-width" />
<title>Find A Job &#8211; Extended</title>
</head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?v=3&#038;libraries=geometry%2Cplaces&#038;language=en&#038;key=AIzaSyAJOQtVZMrDEIVLt8uNBIJbMNou5LkzT-c&#038;ver=4.7.3'></script>
<script src="data.json"></script>
<script type='text/javascript' src='http://dugoodr2.dev/tmp/markerclusterer.js'></script>
<!-- <script type='text/javascript' src='http://dugoodr2.dev/tmp/g-markerclusterer.js'></script> -->
<style>
#map{ height: 400px; }
#map .cluster img, #map .cluster div{ background: blue; height: 40px; width: 40px; }
</style>
<body>
<h3>A simple example of MarkerClusterer (100 markers)</h3>
<div id="map-container"><div id="map"></div></div>
<div id="btn">add markers</div>
<script>
// https://developers.google.com/maps/documentation/javascript/marker-clustering
/*
var center = new google.maps.LatLng(37.4419, -122.1419);
var options = {
'zoom': 13,
'center': center,
'mapTypeId': google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), options);
var markers = [];
for (var i = 0; i < 100; i++) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude);
var marker = new google.maps.Marker({'position': latLng});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'images/m'});
*/
function initialize() {
var center = new google.maps.LatLng(51.5074, 0.1278);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow();
var markers = [];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(58.5074, 0.1278),
title: "new york"
// map:map
// position: new google.maps.LatLng(51.5074, 0.1278)
});
// infoWindow.Open(map, marker);
// var marker_l = new google.maps.Marker({
// position: new google.maps.LatLng(51.5074, 1.1278)
// });
console.log("marker1 ");
console.log(marker);
markers.push(marker);
var options = {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
};
var markerCluster = new MarkerClusterer(map, markers, options);
// markerCluster.addMarker(marker_l);
// a21
// var btn = document.getElementById('btn');
// google.maps.event.addDomListener(btn, 'click', refreshMap);
// refreshMap();
// MarkerClusterer.addMarker(marker_l);
console.log(map);
$("#btn").click(function(){
console.log("click btn");
// var marker1 = new google.maps.Marker({
// position: new google.maps.LatLng(51.5074, 1.1278)
// });
// var marker2 = new google.maps.Marker({
// position: new google.maps.LatLng(55.5074, 4.1278)
// });
// var marker3 = new google.maps.Marker({
// position: new google.maps.LatLng(1.5074, 6.1278)
// });
// var marker4 = new google.maps.Marker({
// position: new google.maps.LatLng(-5.5074, 8.1278)
// });
var center = new google.maps.LatLng(-31.563910, 147.154312);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
maxZoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var locations = [
{lat: -31.563910, lng: 147.154312, info: "Андрей Лондон"},
{lat: -33.718234, lng: 150.363181, info: "Вася Питер"},
{lat: -33.727111, lng: 150.371124, info: "Антон Рига"},
{lat: -33.848588, lng: 151.209834, info: "Петя Варшава"},
{lat: -33.851702, lng: 151.216968, info: "Гена Техас"},
{lat: -33.851702, lng: 151.216968, info: "Нина Лондон"},
{lat: -33.851702, lng: 151.216968, info: "Мария Пенза"}]
var infoWin = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location,
label:"label1",
title:location.info
});
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
// var markers = locations.map(function(location, i) {
// return new google.maps.Marker({
// position: location,
// map:map,
// title: "rrrrrrr"
// });
// });
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
var iw = new google.maps.InfoWindow();
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
var content = '';
// Convert lat/long from cluster object to a usable MVCObject
var info = new google.maps.MVCObject;
if(map.getZoom() == 15){
info.set('position', cluster.center_);
iw.close();
//Get markers
console.log(cluster);
var markers = cluster.getMarkers();
var titles = "";
//Get all the titles
for(var i = 0; i < markers.length; i++) {
titles += markers[i].getTitle() + "<br>\n";
// console.log(markers[i].getTitle());
}
iw.setContent('<h1>'+titles+'</h1>');
iw.open(map, info);
}
/*
//Get markers
console.log(cluster);
var markers = cluster.getMarkers();
var titles = "";
//Get all the titles
for(var i = 0; i < markers.length; i++) {
titles += markers[i].getTitle() + "\n";
// console.log(markers[i].getTitle());
}
console.log(titles);
console.log("zoom=======");
console.log(map.getZoom());
*/
});
// infoWindow.Open(map);
// google.maps.event.addListener(markerCluster, "mouseover", function (mCluster) {
// infowindow.content += "<div>Something<\/div>";
// infowindow.setPosition(mCluster.getCenter());
// infowindow.open(map);
// });
// markers.push(marker_l);
// marker1.setMap(map);
// marker2.setMap(map);
// marker3.setMap(map);
// marker4.setMap(map);
// markers.setMap(map);
// markers.push(marker_2);
// var markerCluster = new MarkerClusterer(map, markers, options);
// markerCluster.addMarker(marker_l);
// markerCluster.addMarker(marker_2);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment