- URL 하드코딩 → .env APP_URL 기반 동적 URL로 변경 - DB 연결 하드코딩 → .env 기반으로 변경 - MySQL strict mode DATE 오류 수정
374 lines
9.3 KiB
JavaScript
374 lines
9.3 KiB
JavaScript
window.marker = null;
|
|
|
|
function initialize() {
|
|
var map;
|
|
var latitude = $('#map_canvas').attr('data-latitude');
|
|
var longitude = $('#map_canvas').attr('data-longitude');
|
|
var mapMarker = $('#map_canvas').attr('data-marker');
|
|
var nottingham = new google.maps.LatLng(latitude, longitude);
|
|
var style = [
|
|
{
|
|
"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.locality",
|
|
"elementType": "labels",
|
|
"stylers": [
|
|
{
|
|
"visibility": "off"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "administrative.neighborhood",
|
|
"elementType": "labels",
|
|
"stylers": [
|
|
{
|
|
"visibility": "simplified"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "administrative.neighborhood",
|
|
"elementType": "labels.text.fill",
|
|
"stylers": [
|
|
{
|
|
"lightness": "17"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "administrative.land_parcel",
|
|
"elementType": "labels",
|
|
"stylers": [
|
|
{
|
|
"visibility": "off"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "landscape",
|
|
"elementType": "geometry",
|
|
"stylers": [
|
|
{
|
|
"color": "#000000"
|
|
},
|
|
{
|
|
"lightness": 20
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "landscape",
|
|
"elementType": "labels",
|
|
"stylers": [
|
|
{
|
|
"visibility": "on"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "landscape.man_made",
|
|
"elementType": "labels",
|
|
"stylers": [
|
|
{
|
|
"visibility": "off"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "landscape.man_made",
|
|
"elementType": "labels.text",
|
|
"stylers": [
|
|
{
|
|
"visibility": "off"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "landscape.natural",
|
|
"elementType": "labels",
|
|
"stylers": [
|
|
{
|
|
"visibility": "on"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "poi",
|
|
"elementType": "geometry",
|
|
"stylers": [
|
|
{
|
|
"color": "#000000"
|
|
},
|
|
{
|
|
"lightness": 21
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "poi",
|
|
"elementType": "labels",
|
|
"stylers": [
|
|
{
|
|
"visibility": "off"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "road",
|
|
"elementType": "labels",
|
|
"stylers": [
|
|
{
|
|
"visibility": "simplified"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "road.highway",
|
|
"elementType": "geometry",
|
|
"stylers": [
|
|
{
|
|
"visibility": "on"
|
|
},
|
|
{
|
|
"color": "#ff4700"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "road.highway",
|
|
"elementType": "geometry.fill",
|
|
"stylers": [
|
|
{
|
|
"lightness": 17
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "road.highway",
|
|
"elementType": "geometry.stroke",
|
|
"stylers": [
|
|
{
|
|
"color": "#000000"
|
|
},
|
|
{
|
|
"lightness": 29
|
|
},
|
|
{
|
|
"weight": 0.2
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "road.highway",
|
|
"elementType": "labels",
|
|
"stylers": [
|
|
{
|
|
"invert_lightness": true
|
|
},
|
|
{
|
|
"visibility": "off"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "road.highway.controlled_access",
|
|
"elementType": "geometry.fill",
|
|
"stylers": [
|
|
{
|
|
"color": "#3b3b3b"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "road.arterial",
|
|
"elementType": "geometry",
|
|
"stylers": [
|
|
{
|
|
"color": "#000000"
|
|
},
|
|
{
|
|
"lightness": 18
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "road.arterial",
|
|
"elementType": "geometry.fill",
|
|
"stylers": [
|
|
{
|
|
"color": "#ff4700"
|
|
},
|
|
{
|
|
"lightness": "39"
|
|
},
|
|
{
|
|
"gamma": "0.43"
|
|
},
|
|
{
|
|
"saturation": "-47"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "road.arterial",
|
|
"elementType": "labels",
|
|
"stylers": [
|
|
{
|
|
"visibility": "off"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "road.local",
|
|
"elementType": "geometry",
|
|
"stylers": [
|
|
{
|
|
"color": "#000000"
|
|
},
|
|
{
|
|
"lightness": 16
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "road.local",
|
|
"elementType": "geometry.stroke",
|
|
"stylers": [
|
|
{
|
|
"color": "#555555"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "road.local",
|
|
"elementType": "labels",
|
|
"stylers": [
|
|
{
|
|
"visibility": "off"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "transit",
|
|
"elementType": "geometry",
|
|
"stylers": [
|
|
{
|
|
"color": "#000000"
|
|
},
|
|
{
|
|
"lightness": 19
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "water",
|
|
"elementType": "geometry",
|
|
"stylers": [
|
|
{
|
|
"color": "#000000"
|
|
},
|
|
{
|
|
"lightness": 17
|
|
}
|
|
]
|
|
}
|
|
];
|
|
var mapOptions = {
|
|
center: nottingham,
|
|
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
|
backgroundColor: "#000",
|
|
zoom: 15,
|
|
panControl: false,
|
|
zoomControl: true,
|
|
mapTypeControl: false,
|
|
scaleControl: false,
|
|
streetViewControl: false,
|
|
overviewMapControl: false,
|
|
zoomControlOptions: {
|
|
style: google.maps.ZoomControlStyle.LARGE
|
|
}
|
|
}
|
|
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
|
|
var mapType = new google.maps.StyledMapType(style, {
|
|
name: "Grayscale"
|
|
});
|
|
map.mapTypes.set('grey', mapType);
|
|
map.setMapTypeId('grey');
|
|
var marker_image = mapMarker;
|
|
var pinIcon = new google.maps.MarkerImage(marker_image, null, null, null, new google.maps.Size(50, 50));
|
|
marker = new google.maps.Marker({
|
|
position: nottingham,
|
|
map: map,
|
|
icon: pinIcon,
|
|
title: 'GymFit'
|
|
});
|
|
}
|
|
var map = document.getElementById('map_canvas');
|
|
if (map != null) {
|
|
google.maps.event.addDomListener(window, 'load', initialize);
|
|
} |