Search the Community

Помогите, пожалуйста, понять как разместить footer поверх map. Я начинающий верстальщик и не могу понять как решить данную задачу. Я пробовала с отрицательным margin-top для footer, тогда он залазит на div и в Chrome и Safari все отлично, но Firefox все съезжает. <main> /*много других тегов*/ <section class="modal-map"> /*форма*/ <div> <iframe src="https://www.google.com></iframe> </div> </section> </main> <footer> </footer>

Всем привет, при приближение или когда двигаешь мышкой по карте, маркеры передвигаются с тобой! Не могу найти ошибку, если поможете, буду благодарен)

Здравствуйте! Подскажите, пожалуйста, что не так делаю?.. Почему-то пишет что функция setMap не определена (здесь 37 строка в js коде)! var o = document.getElementById("map-canvas");if (o) { //карта mapCenter = new google.maps.LatLng(56.528960, 84.967544); var mapOptions = { zoom: 15, center: mapCenter, scrollwheel: false, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); //элементы var li_points = $('#map-points').find('li'), options = [], pLatLng = []; if (li_points.length > 0) { li_points.each(function(i){ var $pt = $(this); if ($pt.data('x') && $pt.data('y') && $pt.data('type')) { pLatLng[i] = new google.maps.LatLng($pt.data('x'), $pt.data('y')); options[i] = { id: i, map: map, latLng: pLatLng[i], className: 'map-marker ' + $pt.data('type') } } }); } for (var i in options) { function MapMarker(options) { this.latLng = options.latLng; this.map = options.map; this.className = options.className; this.id = options.id; this.content = ''; this.setMap(options.map); } var marker = new MapMarker(options[i]); //действие при клике var markers = []; markers[marker.id] = marker; $(document).on('click', '.map-marker', function() { console.log(marker.id); }); MapMarker.prototype = new google.maps.OverlayView(); MapMarker.prototype.draw = function() { var me = this; var div = this.div_; if (!div) { div = this.div_ = document.createElement('div'); div.id = this.id; div.className = this.className; var panes = this.getPanes(); panes.overlayImage.appendChild(div); } var point = this.getProjection().fromLatLngToDivPixel(this.latLng); if (point) { div.style.left = point.x - 20 + 'px'; div.style.top = point.y - 55 + 'px'; } }; }}<div id="map-canvas"></div><ul id="map-points"> <li data-x="56.528960" data-y="84.967544" data-type="running">Point 1</li> <li data-x="57.528960" data-y="83.967544" data-type="running">Point 2</li></ul>body {margin: 0;}#map-canvas { width: 100%; height: 100vh; margin: auto;}#map-points {display: none;}.map-marker.running {background-image: url(http://d30y9cdsu7xlg0.cloudfront.net/png/27587-84.png);}.map-marker { width: 45px; height: 45px; background: #485F6E center no-repeat; background-size: 80%; position: relative; z-index: 30; cursor: pointer;}.map-marker:after { position: absolute; left: 50%; bottom: -8px; ; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #485F6E; content: " ";}.map-marker:hover { background-color: #39c360; transition: 0.3s background-color;}.map-marker:hover:after { border-top-color: #39c360; transition: 0.3s border-top-color;} Только не ругайтесь за мой корявый код.. Только начинаю..

Столкнулся с довольно простой задачей. Есть картинка с планом здания, там есть комнаты, они не все квадратные, некоторые неправильной формы. Соответственно нужно при наведение на некоторую комнату затенить область. На выбор были Canvas, SVG и Map, я решил использовать SVG. Все оказалось весьма просто, нарисовать через path комнаты, добавить на :hover затенение и отлично, однако возникла проблема. Стало необходимо ресайзить SVG не только с нарисованными областями, но и с картинкой на background. Вот пример http://codepen.io/anon/pen/WvXqOd

Добрый день, форумчане! У меня к вам есть вопрос/просьба. Нужен ваш совет. Каким образом можно обрезать изображение так, чтобы они могли быть редактируемы. Т.е. сейчас это 1 картинка. Хотелось бы иметь возможность заливать 2 картинки так, чтобы браузер их сам обрезал. В каком направлении нужно работать ? Существует ли jQuery плагин? Или можно это как-то реализовать на html 5 canvas ?

Привет! Вопрос спецам. Существует ли способ создания блока не прямоугольной, произвольной области с последующим навешиванием на него box-shadow при :hover? Конкретно нужно для того, чтобы при наведении на картинку произвольной формы, например, треугольника, появлялось свечение выстраивающееся по траектории треугольника. (но не обязательно треугольника, фигура может быть разная). Map area и подгрузку двух картинок (одну без свечения, другую с..) не предлагать.

Есть такая вещь, на странице снизу есть google-карта, выше нее - селект с названиями горов, как сделать так чтобы выборе города из селекта на карте переходило на его координаты? как можно к option привязать координаты?