Исходники карты с кастомными инфобаблами и маркерами

atlas.js

function initAtlas(b) {
	var p = false,
		e = null;

	function o() {
		if (e != null) {
			e.close();
			e = null
		}
	}
	var d = false,
		c = function (b) {
			var a = (new RegExp("[#&]" + b + "=([^&]*)")).exec(window.location.hash);
			return a ? a[1] || null : null
		},
		y = new google.maps.MarkerImage(b.visitedSiteImageUrl, new google.maps.Size(12, 20), new google.maps.Point(0, 0), new google.maps.Point(6, 20)),
		H = new google.maps.MarkerImage(b.siteImageUrl, new google.maps.Size(12, 20), new google.maps.Point(0, 0), new google.maps.Point(6, 20)),
		G = new google.maps.MarkerImage(b.wreckImageUrl, new google.maps.Size(16, 16), new google.maps.Point(0, 0), new google.maps.Point(8, 15)),
		z = new google.maps.MarkerImage(b.wreckImageUrl, new google.maps.Size(18, 10), new google.maps.Point(17, 6), new google.maps.Point(6, 10)),
		r = new google.maps.MarkerImage(b.airportImageUrl, new google.maps.Size(32, 37), new google.maps.Point(0, 0), new google.maps.Point(16, 37)),
		n = new google.maps.MarkerImage(b.weatherStationImageUrl, new google.maps.Size(18, 29), new google.maps.Point(0, 0), new google.maps.Point(6, 27)),
		A = new google.maps.MarkerImage(b.photoImageLargeUrl, new google.maps.Size(22, 35), new google.maps.Point(0, 0), new google.maps.Point(11, 35)),
		E = new google.maps.MarkerImage(b.shadowImageUrl, new google.maps.Size(22, 20), new google.maps.Point(0, 0), new google.maps.Point(6, 20)),
		w = new google.maps.MarkerImage(b.shadowImageLargeUrl, new google.maps.Size(37, 35), new google.maps.Point(0, 0), new google.maps.Point(11, 35)),
		C = new google.maps.MarkerImage(b.reticuleImageUrl, new google.maps.Size(13, 13), new google.maps.Point(0, 0), new google.maps.Point(7, 7)),
		D = {
			coords: [13, 13, 13, 13],
			type: "rect"
		},
		h = {
			mapTypeId: google.maps.MapTypeId.HYBRID,
			backgroundColor: "#ebebeb",
			scaleControl: true,
			scaleControlOptions: {
				position: google.maps.ControlPosition.LEFT
			},
			zoom: b.zoom,
			center: b.center,
			mapTypeControl: false
		};
	if (document.location.hash) {
		var i = c("zoom");
		if (i) h.zoom = parseInt(i);
		var j = c("lat"),
			k = c("lng");
		if (j && k) h.center = new google.maps.LatLng(j, k);
		if (j && k && i) d = window.location.hash
	}
	var a = new google.maps.Map(document.getElementById("atlas-map"), h),
		B = new google.maps.Marker({
			position: new google.maps.LatLng(0, 0),
			map: a,
			icon: C,
			shape: D,
			optimized: false,
			zIndex: 5
		});
	google.maps.event.addListener(a, "bounds_changed", function () {
		B.setPosition(a.getCenter())
	});
	$("#map-type-map").data("mapTypeId", google.maps.MapTypeId.ROADMAP);
	$("#map-type-satellite").data("mapTypeId", google.maps.MapTypeId.SATELLITE);
	$("#map-type-hybrid").data("mapTypeId", google.maps.MapTypeId.HYBRID);
	$("#map-type-terrain").data("mapTypeId", google.maps.MapTypeId.TERRAIN);
	$(".map-type-button").click(function () {
		a.setMapTypeId($(this).data("mapTypeId"));
		$(".map-type-button").removeClass("button-down").addClass("button-up");
		$(this).addClass("button-down")
	});
	google.maps.event.addListener(a, "click", function () {
		o()
	});

	function v(c, f, d) {
		google.maps.event.addListener(c, "click", function () {
			o();
			var g = new InfoBubble({
				content: "<div class='site-detail-loading-name'><img src='/Content/Images/icon-map-marker-dive-site-small.png' />" + d + "</div><div class='site-detail-loading-message'><img src='/Content/Images/anim-load-spinner-16.gif' /> Loading info...</div>",
				shadowStyle: 0,
				padding: "8px",
				backgroundColor: "#EEEEEE",
				borderRadius: 4,
				arrowSize: 10,
				borderWidth: 1,
				disableAutoPan: true,
				disableAnimation: true,
				hideCloseButton: true,
				arrowPosition: 30,
				backgroundClassName: "info-bubble",
				arrowStyle: 2
			});
			g.open(a, c);
			e = g;
			$.post(b.siteDetailsUrl, {
				siteId: f
			}, function (b) {
				if (b) {
					var e = "<div class='site-detail-title'><img src='/Content/Images/icon-map-marker-dive-site-small.png' /><a href='" + b.url + "' class='site-detail-name'>" + b.name + "</a></div>";
					if (b.location) e += "<div class='site-detail-location'>Of " + b.location + "</div>";
					if (b.alternateNames && b.alternateNames.length > 0) {
						e += "<div class='site-detail-alternate-names'>Also known as:<ul>";
						$(b.alternateNames).each(function (b, a) {
							e += "<li>" + a + "</li>"
						});
						e += "</ul></div>"
					}
					g.setContent(e);
					g.open(a, c)
				} else {
					g.setContent("<div>Unable to load information for <em>" + d + "</em></div>");
					g.open(a, c)
				}
			}, "json")
		})
	}
	var l = function () {
			if (a.getZoom() < 10) $("#create-links").fadeOut(400);
			else $("#create-links").fadeIn(400)
		};
	google.maps.event.addListener(a, "zoom_changed", l);
	var g, u;
	google.maps.event.addListener(a, "idle", function () {
		var c = a.getCenter(),
			d = a.getZoom();
		if (d == u && c.lat() == g.lat() && c.lng() == g.lng()) return;
		g = c;
		u = d;
		x();
		$("#create-region-link").attr("href", b.createRegionUrl + "?latitude=" + c.lat() + "&longitude=" + c.lng() + "&zoom=" + d);
		$("#import-photos-link").attr("href", "/photo/import?GeoCircleRadius=32&GeoSpecificationType=WithinRadius&GeoCircleLatitude=" + c.lat() + "&GeoCircleLongitude=" + c.lng() + "&MapCenterLat=" + c.lat() + "&MapCenterLng=" + c.lng() + "&MapZoom=" + d);
		if (!p) {
			p = true;
			I();
			return
		}
		F()
	});
	var f = [],
		q = [],
		m = [],
		x = function () {
			var c = a.getBounds(),
				d = a.getCenter();
			$.post(b.searchBoxUrl, {
				north: c.getNorthEast().lat(),
				east: c.getNorthEast().lng(),
				south: c.getSouthWest().lat(),
				west: c.getSouthWest().lng(),
				lat: d.lat(),
				lng: d.lng(),
				zoom: a.getZoom()
			}, function (c) {
				$.each(f, function (b, a) {
					a.setMap(null)
				});
				$.each(q, function (b, a) {
					a.setMap(null)
				});
				$.each(m, function (b, a) {
					a.setMap(null)
				});
				f.length = 0;
				if (c.tooManySites) $("#sidebar-zoom-help").fadeIn(400);
				else $("#sidebar-zoom-help").fadeOut(400);
				if (c.popularSites && c.popularSites.length != 0) {
					$("#sidebar-popular-sites").fadeIn(400);
					$("#popular-sites-list").empty();
					$.each(c.popularSites, function (g, c) {
						var e = $("<li></li>"),
							f = $("<a></a>", {
								href: c.url,
								text: c.name,
								"class": "entity"
							}).click(function () {
								a.panTo(new google.maps.LatLng(c.y, c.x));
								a.setZoom(13);
								return false
							}),
							d = $("<img></img>", {
								src: c.wrk ? b.wreckImageLegendUrl : b.siteImageLegendUrl
							}).css({
								"margin-bottom": "-2px"
							});
						d.css(!c.wrk ? {
							"margin-right": "6px",
							"margin-left": "2px"
						} : {
							"margin-right": "2px"
						});
						e.append(d).append(f);
						$("#popular-sites-list").append(e)
					})
				} else $("#sidebar-popular-sites").fadeOut(400);
				$.each(c.sites, function (i, b) {
					var d = new google.maps.LatLng(b.y, b.x),
						e = b.v ? y : b.wrk ? G : H,
						c = b.wrk ? z : E,
						h = b.wrk ? new google.maps.Point(-12, 16) : new google.maps.Point(-8, 18),
						g = a.getZoom() > 11 ? new MarkerWithLabel({
							position: d,
							clickable: true,
							draggable: false,
							map: a,
							icon: e,
							shadow: c,
							labelContent: b.name,
							title: b.name,
							labelAnchor: h,
							labelClass: "map-marker-label",
							visible: true
						}) : new google.maps.Marker({
							position: d,
							clickable: true,
							map: a,
							icon: e,
							shadow: c,
							title: b.name,
							zIndex: 1
						});
					f.push(g);
					v(g, b.id, b.name)
				});
				c.airports && $.each(c.airports, function (f, b) {
					var c = new google.maps.LatLng(b.y, b.x),
						d = b.iata ? b.iata : b.icao,
						e = a.getZoom() > 11 ? new MarkerWithLabel({
							position: c,
							clickable: true,
							draggable: false,
							map: a,
							icon: r,
							labelContent: d,
							labelAnchor: new google.maps.Point(-8, 18),
							labelClass: "map-marker-label",
							visible: true
						}) : new google.maps.Marker({
							position: c,
							clickable: true,
							map: a,
							icon: r,
							title: d,
							zIndex: 1
						});
					q.push(e)
				});
				c.weather && $.each(c.weather, function (f, b) {
					var c = new google.maps.LatLng(b.y, b.x),
						d = b.name,
						e = a.getZoom() > 11 ? new MarkerWithLabel({
							position: c,
							clickable: true,
							draggable: false,
							map: a,
							icon: n,
							labelContent: d,
							labelAnchor: new google.maps.Point(-8, 18),
							labelClass: "map-marker-label",
							visible: true
						}) : new google.maps.Marker({
							position: c,
							clickable: true,
							map: a,
							icon: n,
							title: d,
							zIndex: 1
						});
					m.push(e)
				});
				if (c.photos && c.photos.length != 0) {
					$("#bottombar").fadeIn(400);
					$("#sidebar .shadow").css({
						"margin-top": "-141px"
					});
					var d = $("#bottombar").find(".content"),
						h = function () {
							d.empty();
							var b;
							$.each(c.photos, function (e, c) {
								d.append($("<a></a>", {
									href: "/photo/view/" + c.id
								}).append($("<img/>", {
									src: c.url,
									style: "width:75px;height:75px;margin:10px;"
								})).fadeIn(600).mouseenter(function () {
									b && b.setMap(null);
									b = new google.maps.Marker({
										position: new google.maps.LatLng(c.y, c.x),
										clickable: false,
										map: a,
										icon: A,
										shadow: w,
										zIndex: 1
									})
								}).mouseleave(function () {
									b && b.setMap(null);
									b = null
								}))
							})
						},
						e = d.find("a");
					if (e.length == 0) h();
					else e.fadeOut(100, h)
				} else {
					$("#bottombar").fadeOut(400, function () {
						$("#bottombar .content").empty()
					});
					$("#sidebar .shadow").css({
						"margin-top": "0"
					})
				}
				var g = $("#region-info");
				g.empty();
				if (c.regions.length != 0) {
					var i = $("<ul></ul>").addClass("flat").addClass("link-list").appendTo(g);
					$.each(c.regions, function (c, a) {
						var b = $("<li></li>");
						b.append($("<a></a>").attr({
							href: a.url,
							"class": "entity"
						}).text(a.name)).appendTo(i);
						a.flag != null && b.append($("<img></img>").attr({
							src: "/f/48/" + a.flag.toLowerCase() + ".png",
							"class": "small-region-flag"
						}))
					});
					$("#create-site-at-marker").attr("href", b.createSiteUrl + "?lat=" + a.getCenter().lat() + "&lng=" + a.getCenter().lng());
					$("#create-operator-at-marker").attr("href", b.createOperatorUrl + "?lat=" + a.getCenter().lat() + "&lng=" + a.getCenter().lng())
				}
				l()
			}, "json")
		},
		F = function () {
			var b = a.getCenter(),
				e = a.getZoom(),
				c = "#lat=" + b.lat() + "&lng=" + b.lng() + "&zoom=" + e;
			d = c;
			window.location.hash = c
		},
		t = function () {
			var e = c("box");
			if (e) try {
				var b = e.split(",");
				if (b.length == 4) {
					var h = new google.maps.LatLng(parseFloat(b[0]), parseFloat(b[1])),
						g = new google.maps.LatLng(parseFloat(b[2]), parseFloat(b[3])),
						f = new google.maps.LatLngBounds(h, g);
					a.fitBounds(f);
					d = window.location.hash
				}
			} catch (i) {
				console.log(i)
			}
		};
	t();
	var I = function () {
			setInterval(function () {
				if (window.location.hash != d) {
					d = window.location.hash;
					var b = c("lat"),
						e = c("lng"),
						f = parseInt(c("zoom"));
					if (b && e && f) {
						var g = new google.maps.LatLng(b, e);
						a.setZoom(f);
						a.setCenter(g)
					} else t()
				}
			}, 100)
		},
		s = new google.maps.places.Autocomplete(document.getElementById("jump-to"), {
			types: ["geocode"]
		});
	google.maps.event.addListener(s, "place_changed", function () {
		var b = s.getPlace();
		if (b.geometry.viewport) a.fitBounds(b.geometry.viewport);
		else a.setCenter(b.geometry.location)
	})
}

index.html

<script src="atlas.js"></script>

<script>
$(document).ready(function () {
    var setMapHeight = function() { $('#map-container-atlas').height($(window).height()-85-$('#notify-container').height()); };
    $(window).resize(setMapHeight);
    $('#notify-container').resize(setMapHeight);
    setMapHeight();
    initAtlas({
        visitedSiteImageUrl:'/c/fe04b0d199.png',
        siteImageUrl: '/c/6409df85f8.png',
        wreckImageUrl: '/c/f33d4d850d.png',
        siteImageLegendUrl: '/c/93e4bf4d82.png',
        wreckImageLegendUrl: '/c/018fe231c9.png',
        airportImageUrl: '/c/5a1dee36f5.png',
        weatherStationImageUrl: '/c/5bd12a8605.png',
        shadowImageUrl: '/c/32c6219da4.png',
        photoImageLargeUrl: '/c/5610525795.png',
        shadowImageLargeUrl: '/c/f3fafd75af.png',
        infoIconUrl: '/c/b6b058ca1e.png',
        reticuleImageUrl: '/c/ccc4a6d442.gif',
        siteDetailsUrl: '/atlas/get-site-detail',
        getPointRegionsUrl: '/region/get-point-regions',
        createSiteUrl: '/dive-site/create',
        createOperatorUrl: '/operator/create',
        createRegionUrl: '/region/create',
        searchBoxUrl: '/atlas/search-box',
        center: new google.maps.LatLng(53.2,50.15),
        zoom: 6
    });
});
</script>