Skip to content
GitLab
Commit 50cb2071 authored by Kachina Natalia's avatar Kachina Natalia
Browse files

убрала точку на карте

parent 6ce80db3
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 10 additions and 406 deletions
+10 -406
map.js
+ 10
- 10
View file @ 50cb2071
......@@ -75,16 +75,16 @@ const markers = [
desc: '<p>Сюда приезжали купцы со всего мира во времена, когда Нижний входил в знаменитый Великий шелковый путь. О прошлом ярмарки сегодня напоминает здание Главного ярмарочного дома и 2 собора. Здесь проходят различные мероприятия, а также вы всегда можете посмотреть мультимедийную выставку «Россия — моя история».</p>',
price: '«Россия — моя история» — 150 рублей.',
time: 'около 1 часа.'
},
{
lat: 56.3295369,
lng: 43.8551764,
title: 'Зоопарк «Лимпопо»',
imageUrl: '/uploads/workshops/projects/weekend_novgorod_2019/img/map/map_photo_0_7.jpg',
desc: '<p>Это один из самых больших частных зоопарков страны. На территории более 7 га обитают животные 270 видов, среди которых жираф, кенгуру и амурский тигр.<br>Многих обитателей зоопарка можно покормить с руки, а в «Русской деревне» животные ходят среди посетителей без всяких ограждений.</p>',
price: '600 рублей.',
time: 'не менее 2 часов.'
}
// {
// lat: 56.3295369,
// lng: 43.8551764,
// title: 'Зоопарк «Лимпопо»',
// imageUrl: '/uploads/workshops/projects/weekend_novgorod_2019/img/map/map_photo_0_7.jpg',
// desc: '<p>Это один из самых больших частных зоопарков страны. На территории более 7 га обитают животные 270 видов, среди которых жираф, кенгуру и амурский тигр.<br>Многих обитателей зоопарка можно покормить с руки, а в «Русской деревне» животные ходят среди посетителей без всяких ограждений.</p>',
// price: '600 рублей.',
// time: 'не менее 2 часов.'
// }
]
}
];
......@@ -522,7 +522,7 @@ function _setSignature(map) {
let marker = new google.maps.Marker({
position: {lat: 56.091765, lng: 45.057139},
map: map,
icon: '/uploads/workshops/projects/weekend_novgorod_2019/img/map/text-map.png',
icon: '/uploads/workshops/projects/weekend_novgorod_2019/img/map/map-name.svg',
});
}
......
map_photo_2_4.jpg deleted 100644 → 0
+ 0
- 0
View file @ 6ce80db3
map_photo_2_4.jpg

18.2 KB

other.html deleted 100644 → 0
+ 0
- 333
View file @ 6ce80db3
<!doctype html>
<html lang="ru">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Directions Service (Complex)</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#warnings-panel {
width: 100%;
height:10%;
text-align: center;
}
</style>
</head>
<body>
<div id="floating-panel">
<b>Start: </b>
<select id="start">
<option value="penn station, new york, ny">Penn Station</option>
<option value="grand central station, new york, ny">Grand Central Station</option>
<option value="625 8th Avenue, New York, NY, 10018">Port Authority Bus Terminal</option>
<option value="staten island ferry terminal, new york, ny">Staten Island Ferry Terminal</option>
<option value="101 E 125th Street, New York, NY">Harlem - 125th St Station</option>
</select>
<b>End: </b>
<select id="end">
<option value="260 Broadway New York NY 10007">City Hall</option>
<option value="W 49th St & 5th Ave, New York, NY 10020">Rockefeller Center</option>
<option value="moma, New York, NY">MOMA</option>
<option value="350 5th Ave, New York, NY, 10118">Empire State Building</option>
<option value="253 West 125th Street, New York, NY">Apollo Theater</option>
<option value="1 Wall St, New York, NY">Wall St</option>
</select>
</div>
<div id="map"></div>
&nbsp;
<div id="warnings-panel"></div>
<script>
function initMap() {
let markerArray = [];
// Instantiate a directions service.
let directionsService = new google.maps.DirectionsService;
// Create a map and center it on Manhattan.
let map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 50.82090346, lng: 4.35220579}
});
// Create a renderer for directions and bind it to the map.
let directionsRenderer = new google.maps.DirectionsRenderer({map: map});
// Instantiate an info window to hold step text.
let stepDisplay = new google.maps.InfoWindow;
// Display the route between the initial start and end selections.
calculateAndDisplayRoute(
directionsRenderer, directionsService, markerArray, stepDisplay, map);
// Listen to change events from the start and end lists.
let onChangeHandler = function() {
calculateAndDisplayRoute(
directionsRenderer, directionsService, markerArray, stepDisplay, map);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
}
function calculateAndDisplayRoute(directionsRenderer, directionsService,
markerArray, stepDisplay, map) {
// First, remove any existing markers from the map.
for (let i = 0; i < markerArray.length; i++) {
markerArray[i].setMap(null);
}
// Retrieve the start and end locations and create a DirectionsRequest using
// WALKING directions.
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
travelMode: 'WALKING'
}, function(response, status) {
// Route the directions and pass the response to a function to create
// markers for each step.
if (status === 'OK') {
document.getElementById('warnings-panel').innerHTML =
'<b>' + response.routes[0].warnings + '</b>';
directionsRenderer.setDirections(response);
showSteps(response, markerArray, stepDisplay, map);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
function showSteps(directionResult, markerArray, stepDisplay, map) {
// For each step, place a marker, and add the text to the marker's infowindow.
// Also attach the marker to an array so we can keep track of it and remove it
// when calculating new routes.
let myRoute = directionResult.routes[0].legs[0];
for (let i = 0; i < myRoute.steps.length; i++) {
let marker = markerArray[i] = markerArray[i] || new google.maps.Marker;
marker.setMap(map);
marker.setPosition(myRoute.steps[i].start_location);
attachInstructionText(
stepDisplay, marker, myRoute.steps[i].instructions, map);
}
}
function attachInstructionText(stepDisplay, marker, text, map) {
google.maps.event.addListener(marker, 'click', function() {
// Open an info window when the marker is clicked on, containing the text
// of the step.
stepDisplay.setContent(text);
stepDisplay.open(map, marker);
});
}
data = [
[
{
"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
}
]
}
]
];
</script>
<!--<script async defer-->
<!-- src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">-->
<!--</script>-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCBGE-84fB5nRRSmwLM1a7Sx6A75vH-g4M&callback=initMap"></script>
</body>
</html>
\ No newline at end of file
text-in-map.html deleted 100644 → 0
+ 0
- 63
View file @ 6ce80db3
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MarkerWithLabel Example</title>
<style type="text/css">
.labels {
color: red;
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 24px;
font-weight: bold;
text-align: left;
width: auto;
border: 2px solid black;
white-space: nowrap;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCiYbT9_EdrOENM8vDSZQq96t2JEfQfCYg&callback=initMap"></script>
<script type="text/javascript" src="../src/markerwithlabel_packed.js"></script>
<script type="text/javascript">
function initMap() {
var latLng = new google.maps.LatLng(56.091765, 45.057139);
var homeLatLng = new google.maps.LatLng(56.091765, 45.057139);
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 12,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker1 = new MarkerWithLabel({
icon: {
url: ""
},
position: homeLatLng,
draggable: true,
raiseOnDrag: true,
map: map,
labelContent: "ДОБРЯНСКАЯ ОБЛАСТЬ",
labelAnchor: new google.maps.Point(500, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75}
});
var iw1 = new google.maps.InfoWindow({
content: "Home For Sale"
});
var iw2 = new google.maps.InfoWindow({
content: "Another Home For Sale"
});
google.maps.event.addListener(marker1, "click", function (e) { iw1.open(map, this); });
}
</script>
</head>
<body onload="initMap()">
<p>A basic example of markers with labels. Note that an information window appears whether you
click the marker portion or the label portion of the MarkerWithLabel. The two markers shown here
are both draggable so you can easily verify that markers and labels overlap as expected.</p>
<div id="map_canvas" style="height: 400px; width: 100%;"></div>
<div id="log"></div>
</body>
</html>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment