Пытаюсь вставить интерактивную карту и на ней поставить метку, которая должна быть, как на макете. Нашёл примеры работы с метками и картами: https://developers.google.com/maps/documentation/javascript/examples/icon-simple?hl=ru
Делаю в песочнице по образцу - всё работает, однако метка, естественно, имеет другой вид:
https://thimbleprojects.org/alessio18911/282742
Пытаюсь присвоить переменной image изображение метки, файл которой загружен туда же, в песочницу и… Метка не появляется. Подскажите, как достичь результата.
И ещё, как сделать, чтобы карта была подвижной, как в песочнице, в локальном сайте, который загружается у меня с компа?
Ссылку на изображение подскажите мне. Для редактирования js-кода придется воспользоваться другой песочницей.
Я вот не знаю, как это сделать - в этом-то и проблема. Там, если Вам песочница показывает, есть файлик pin-ice.png. Если формат свойства вводится правильно, например, в CSS: background-image: url("…"); то там выскакивают варианты, среди которых указываются загруженные файлы - я просто выбирал нужный и оно просто так и и ставило его url(“pin-ice.png”); А здесь, когда я ввожу в js-файл, подсказки не появляются - т.е. я как-то неправильно прописываю свойство… Давайте на email сброшу саму картинку - ссылку я не знаю, как получить с этой песочницы на картинку ((
UPD: сбросил на email
Не получается использовать относительный путь к файлу картинки. Не знаю, почему. Есть вариант перекодировать картинку в base64, тогда работает.
А как она выглядит у вас на локальном?
А что такое base64? На локальном - никак. Карты просто нет в блоке, где она должна быть
Картинка конвертируется в набор символов и добавляется на страницу с помощью data.
Конвертировать можно тут.
id блока совпадает? Нужна разметка ваша.
О! Интересный сервис, не знал о таком! Кстати, сегодня утром ещё раз посмотрел - ошибся в разметке при указании пути к файлу, вчера, когда скопировал с песочницы, написал <script src="script.js">, а надо было src=“js/script.js”! Теперь всё работает нормально, как и хотел ) Единственное, может, подскажете мне, как сократить немного эту огромную запись после перекодировки картинки в base64? А то она очень длинная, а попытка просто разбить её на фрагменты клавишей Enter делает её неактивной. Да, и спасибо Вам большое оперативность и готовность помогать 
На этом приключения не закончились: хотел сделать тень маркеру - попытался слить слои в ФШ самого маркера и тени, потом конвертировать всё это в base64 и вставить новую картинку в код JS, там, где var image. Всё появилось. Но: при масштабировании карты новая картинка (маркер+тень) сильно смещается (( Как можно это исправить?
Вот пример, где всё хорошо (тени нет): https://thimbleprojects.org/alessio18911/283096/
Вот пример, который работает некорректно (небольшое смещение изначально не суть важно, просто нужно подогнать координаты): https://thimbleprojects.org/alessio18911/283097/
Никак. Вы можете только попробовать немного оптимизировать изображение png перед конвертацией в base64.
Могу предположить, что причина в увеличенной ширине картинки. Тень считается ее частью. Но если подумать, маркер (или метка) должны указывать на точку на карте. А у вас ширина картинки с тенью 218px. Поэтому при масштабировании она “плывет”, пытаясь указывать на центр.
Хотела добавить тень с помощью js на картинку. Но судя по примечанию в статье, все тени на картах игнорируются.
Понятно, спасибо! )