315 lines
11 KiB
JavaScript
315 lines
11 KiB
JavaScript
import GMaps from 'gmaps';
|
|
|
|
class GoogleMap {
|
|
initBasicGoogleMap() {
|
|
new GMaps({ div: "#gmaps-basic", lat: -12.043333, lng: -77.028333 });
|
|
}
|
|
initMarkerGoogleMap() {
|
|
new GMaps({ div: "#gmaps-markers", lat: -12.043333, lng: -77.028333 });
|
|
}
|
|
initStreetViewGoogleMap() {
|
|
GMaps.createPanorama({ el: "#panorama", lat: 42.3455, lng: -71.0983 });
|
|
}
|
|
initMapTypes() {
|
|
var e = new GMaps({
|
|
el: "#gmaps-types",
|
|
lat: 42.3455,
|
|
lng: -71.0983,
|
|
mapTypeControlOptions: {
|
|
mapTypeIds: [
|
|
"hybrid",
|
|
"roadmap",
|
|
"satellite",
|
|
"terrain",
|
|
"osm",
|
|
"cloudmade",
|
|
],
|
|
},
|
|
});
|
|
return (
|
|
e.addMapType("osm", {
|
|
getTileUrl: function (e, t) {
|
|
return (
|
|
"http://tile.openstreetmap.org/" +
|
|
t +
|
|
"/" +
|
|
e.x +
|
|
"/" +
|
|
e.y +
|
|
".png"
|
|
);
|
|
},
|
|
tileSize: new google.maps.Size(256, 256),
|
|
name: "OpenStreetMap",
|
|
maxZoom: 18,
|
|
}),
|
|
e.addMapType("cloudmade", {
|
|
getTileUrl: function (e, t) {
|
|
return (
|
|
"http://b.tile.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/1/256/" +
|
|
t +
|
|
"/" +
|
|
e.x +
|
|
"/" +
|
|
e.y +
|
|
".png"
|
|
);
|
|
},
|
|
tileSize: new google.maps.Size(256, 256),
|
|
name: "CloudMade",
|
|
maxZoom: 18,
|
|
}),
|
|
e.setMapTypeId("osm"),
|
|
e
|
|
);
|
|
}
|
|
initUltraLightMap() {
|
|
new GMaps({
|
|
div: "#ultra-light",
|
|
lat: 42.3455,
|
|
lng: -71.0983,
|
|
styles: [
|
|
{
|
|
featureType: "water",
|
|
elementType: "geometry",
|
|
stylers: [{ color: "#e9e9e9" }, { lightness: 17 }],
|
|
},
|
|
{
|
|
featureType: "landscape",
|
|
elementType: "geometry",
|
|
stylers: [{ color: "#f5f5f5" }, { lightness: 20 }],
|
|
},
|
|
{
|
|
featureType: "road.highway",
|
|
elementType: "geometry.fill",
|
|
stylers: [{ color: "#ffffff" }, { lightness: 17 }],
|
|
},
|
|
{
|
|
featureType: "road.highway",
|
|
elementType: "geometry.stroke",
|
|
stylers: [
|
|
{ color: "#ffffff" },
|
|
{ lightness: 29 },
|
|
{ weight: 0.2 },
|
|
],
|
|
},
|
|
{
|
|
featureType: "road.arterial",
|
|
elementType: "geometry",
|
|
stylers: [{ color: "#ffffff" }, { lightness: 18 }],
|
|
},
|
|
{
|
|
featureType: "road.local",
|
|
elementType: "geometry",
|
|
stylers: [{ color: "#ffffff" }, { lightness: 16 }],
|
|
},
|
|
{
|
|
featureType: "poi",
|
|
elementType: "geometry",
|
|
stylers: [{ color: "#f5f5f5" }, { lightness: 21 }],
|
|
},
|
|
{
|
|
featureType: "poi.park",
|
|
elementType: "geometry",
|
|
stylers: [{ color: "#dedede" }, { lightness: 21 }],
|
|
},
|
|
{
|
|
elementType: "labels.text.stroke",
|
|
stylers: [
|
|
{ visibility: "on" },
|
|
{ color: "#ffffff" },
|
|
{ lightness: 16 },
|
|
],
|
|
},
|
|
{
|
|
elementType: "labels.text.fill",
|
|
stylers: [
|
|
{ saturation: 36 },
|
|
{ color: "#333333" },
|
|
{ lightness: 40 },
|
|
],
|
|
},
|
|
{
|
|
elementType: "labels.icon",
|
|
stylers: [{ visibility: "off" }],
|
|
},
|
|
{
|
|
featureType: "transit",
|
|
elementType: "geometry",
|
|
stylers: [{ color: "#f2f2f2" }, { lightness: 19 }],
|
|
},
|
|
{
|
|
featureType: "administrative",
|
|
elementType: "geometry.fill",
|
|
stylers: [{ color: "#fefefe" }, { lightness: 20 }],
|
|
},
|
|
{
|
|
featureType: "administrative",
|
|
elementType: "geometry.stroke",
|
|
stylers: [
|
|
{ color: "#fefefe" },
|
|
{ lightness: 17 },
|
|
{ weight: 1.2 },
|
|
],
|
|
},
|
|
],
|
|
});
|
|
}
|
|
initDarkMap() {
|
|
new GMaps({
|
|
div: "#dark",
|
|
lat: 42.3455,
|
|
lng: -71.0983,
|
|
styles: [
|
|
{
|
|
featureType: "all",
|
|
elementType: "labels",
|
|
stylers: [{ visibility: "on" }],
|
|
},
|
|
{
|
|
featureType: "all",
|
|
elementType: "labels.text.fill",
|
|
stylers: [
|
|
{ saturation: 36 },
|
|
{ color: "#000000" },
|
|
{ lightness: 40 },
|
|
],
|
|
},
|
|
{
|
|
featureType: "all",
|
|
elementType: "labels.text.stroke",
|
|
stylers: [
|
|
{ visibility: "on" },
|
|
{ color: "#000000" },
|
|
{ lightness: 16 },
|
|
],
|
|
},
|
|
{
|
|
featureType: "all",
|
|
elementType: "labels.icon",
|
|
stylers: [{ visibility: "off" }],
|
|
},
|
|
{
|
|
featureType: "administrative",
|
|
elementType: "geometry.fill",
|
|
stylers: [{ color: "#000000" }, { lightness: 20 }],
|
|
},
|
|
{
|
|
featureType: "administrative",
|
|
elementType: "geometry.stroke",
|
|
stylers: [
|
|
{ color: "#000000" },
|
|
{ lightness: 17 },
|
|
{ weight: 1.2 },
|
|
],
|
|
},
|
|
{
|
|
featureType: "administrative.country",
|
|
elementType: "labels.text.fill",
|
|
stylers: [{ color: "#e5c163" }],
|
|
},
|
|
{
|
|
featureType: "administrative.locality",
|
|
elementType: "labels.text.fill",
|
|
stylers: [{ color: "#c4c4c4" }],
|
|
},
|
|
{
|
|
featureType: "administrative.neighborhood",
|
|
elementType: "labels.text.fill",
|
|
stylers: [{ color: "#e5c163" }],
|
|
},
|
|
{
|
|
featureType: "landscape",
|
|
elementType: "geometry",
|
|
stylers: [{ color: "#000000" }, { lightness: 20 }],
|
|
},
|
|
{
|
|
featureType: "poi",
|
|
elementType: "geometry",
|
|
stylers: [
|
|
{ color: "#000000" },
|
|
{ lightness: 21 },
|
|
{ visibility: "on" },
|
|
],
|
|
},
|
|
{
|
|
featureType: "poi.business",
|
|
elementType: "geometry",
|
|
stylers: [{ visibility: "on" }],
|
|
},
|
|
{
|
|
featureType: "road.highway",
|
|
elementType: "geometry.fill",
|
|
stylers: [{ color: "#e5c163" }, { lightness: "0" }],
|
|
},
|
|
{
|
|
featureType: "road.highway",
|
|
elementType: "geometry.stroke",
|
|
stylers: [{ visibility: "off" }],
|
|
},
|
|
{
|
|
featureType: "road.highway",
|
|
elementType: "labels.text.fill",
|
|
stylers: [{ color: "#ffffff" }],
|
|
},
|
|
{
|
|
featureType: "road.highway",
|
|
elementType: "labels.text.stroke",
|
|
stylers: [{ color: "#e5c163" }],
|
|
},
|
|
{
|
|
featureType: "road.arterial",
|
|
elementType: "geometry",
|
|
stylers: [{ color: "#000000" }, { lightness: 18 }],
|
|
},
|
|
{
|
|
featureType: "road.arterial",
|
|
elementType: "geometry.fill",
|
|
stylers: [{ color: "#575757" }],
|
|
},
|
|
{
|
|
featureType: "road.arterial",
|
|
elementType: "labels.text.fill",
|
|
stylers: [{ color: "#ffffff" }],
|
|
},
|
|
{
|
|
featureType: "road.arterial",
|
|
elementType: "labels.text.stroke",
|
|
stylers: [{ color: "#2c2c2c" }],
|
|
},
|
|
{
|
|
featureType: "road.local",
|
|
elementType: "geometry",
|
|
stylers: [{ color: "#000000" }, { lightness: 16 }],
|
|
},
|
|
{
|
|
featureType: "road.local",
|
|
elementType: "labels.text.fill",
|
|
stylers: [{ color: "#999999" }],
|
|
},
|
|
{
|
|
featureType: "transit",
|
|
elementType: "geometry",
|
|
stylers: [{ color: "#000000" }, { lightness: 19 }],
|
|
},
|
|
{
|
|
featureType: "water",
|
|
elementType: "geometry",
|
|
stylers: [{ color: "#000000" }, { lightness: 17 }],
|
|
},
|
|
],
|
|
});
|
|
}
|
|
init() {
|
|
this.initBasicGoogleMap(),
|
|
this.initMarkerGoogleMap(),
|
|
this.initStreetViewGoogleMap(),
|
|
this.initMapTypes(),
|
|
this.initUltraLightMap(),
|
|
this.initDarkMap();
|
|
}
|
|
}
|
|
document.addEventListener("DOMContentLoaded", function (e) {
|
|
new GoogleMap().init();
|
|
});
|