Jump to content

Search the Community

Showing results for tags 'map'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Development
    • HTML Coding
    • JavaScript
    • PHP
    • CMS
    • Database
    • Web Server
    • Web-site Development
    • Internet Marketing, SEO
  • Library
    • Tricks and solutions
    • Books
  • Commercial services
    • Freelance
    • Job
    • Goods and Services
  • Our Forum
    • Flame
    • Contests
    • Feedback and Ideas

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Web site


Telegram


Signal


Viber


Skype


From


Interests

Found 7 results

  1. Помогите, пожалуйста, понять как разместить 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>
  2. Всем привет, при приближение или когда двигаешь мышкой по карте, маркеры передвигаются с тобой! Не могу найти ошибку, если поможете, буду благодарен)
  3. Здравствуйте! Подскажите, пожалуйста, что не так делаю?.. Почему-то пишет что функция 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;} Только не ругайтесь за мой корявый код.. Только начинаю..
  4. Столкнулся с довольно простой задачей. Есть картинка с планом здания, там есть комнаты, они не все квадратные, некоторые неправильной формы. Соответственно нужно при наведение на некоторую комнату затенить область. На выбор были Canvas, SVG и Map, я решил использовать SVG. Все оказалось весьма просто, нарисовать через path комнаты, добавить на :hover затенение и отлично, однако возникла проблема. Стало необходимо ресайзить SVG не только с нарисованными областями, но и с картинкой на background. Вот пример http://codepen.io/anon/pen/WvXqOd
  5. Добрый день, форумчане! У меня к вам есть вопрос/просьба. Нужен ваш совет. Каким образом можно обрезать изображение так, чтобы они могли быть редактируемы. Т.е. сейчас это 1 картинка. Хотелось бы иметь возможность заливать 2 картинки так, чтобы браузер их сам обрезал. В каком направлении нужно работать ? Существует ли jQuery плагин? Или можно это как-то реализовать на html 5 canvas ?
  6. Привет! Вопрос спецам. Существует ли способ создания блока не прямоугольной, произвольной области с последующим навешиванием на него box-shadow при :hover? Конкретно нужно для того, чтобы при наведении на картинку произвольной формы, например, треугольника, появлялось свечение выстраивающееся по траектории треугольника. (но не обязательно треугольника, фигура может быть разная). Map area и подгрузку двух картинок (одну без свечения, другую с..) не предлагать.
  7. Есть такая вещь, на странице снизу есть google-карта, выше нее - селект с названиями горов, как сделать так чтобы выборе города из селекта на карте переходило на его координаты? как можно к option привязать координаты?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy