Первый из серии проектов для моего сайта. Для начала посмотрите 20сек видео о ситуации на данный момент –
Значит отметка посредине это ресторан; синий круг имеет радиус доставки еды этого ресторана (например 5 миль); все другие отметки это заказы
№1
Сейчас: все отметки (кроме той которая ресторан) не прикреплены к адресу, а размещены на временном html елементе сверху
Нужно: удалить этот верхний слой, прикрепить отметки к карте напрямую, но при этом сохранить дизайн отметок (включая при наведении, выборе, отмене выбора)
№2
Сейчас: Синий круг крепится к адресу ресторана, и имеет радиус 5 миль, но когда окно браузера изменяется, то он либо слишком маленький или слишком большой для этого окна браузера
Нужно: Карта должна адаптироваться, чтобы синий круг был в максимально возможном размере который поместится. Загвоздка в том, что Google Maps API принимает только целые значения масштабирования, но этого недостаточно. Например, если вы подсчитали, что необходимости увеличение в 7.42 чтобы получить синий круг полную ширину, то 7 будет делать это эго маленьким, а 8 слишком большой для этого окна браузера. Решением может быть увеличение самой карты – если 1 единица увеличения в Google Maps API это 1.5x зум, то мы должны послать значение 7, и масштабировать саму карту 0.42 * 1.5x. Мне кажется это именно то что Google Maps делает на мобильных приложениях для плавного масштабирования
№3
Сейчас: третья справа иконка "center map" в настоящее время ничего не делает
Нужно: в случае масштабирования или передвижения карты, иконка должна потерять class="active" и буть доступной для нажатия. При нажатии выполнить условие #2