Используйте поисковую форму на Гугл карте Уфы чтобы найти местные магазины, рестораны, банки, АЗС, парки отдыха и другие коммерческие и культурно-рекреационные объекты.
Типы Гугл карты
Для отображения в Гугл картах доступно 4 типа карт: Схематическая Гугл карта с названиями улиц и домов, карта рельефа, спутниковая Гугл карта Уфы и спутниковая карта с названиями объектов.
Панорамы улиц от Гугла
Зафиксируйте левым кликом мыши иконку с оранжевым человечком и переместите ее на карту Уфы, участки карты с доступными панорамами окрасятся в фиолетовый цвет.
Изменение масштаба карт
Для увеличения или уменьшения масштаба Гугл карты Уфы используйте соответствующие кнопки в правом нижнем углу карты: «+» увеличение масштаба, «-» уменьшение масштаба карты.
Источник: kartafx.ru
Создать Яндекс КАРТУ для сайта через конструктор и вставить карту со СХЕМОЙ ПРОЕЗДА на сайт и кодом
Google Maps API: схема проезда, анимация и стилизация
Многие из нас часто вставляют на свои сайты карты. Обычно, это карта на странице контактов с единственным маркером, которым отмечено место офиса. Но иногда у заказчика включается фантазия и начинается «творчество». В свое время я потратил много времени, чтобы разобраться в постоянно меняющемся Google Maps API и хочу поделиться с вами своими наработками для решения обычных проблем с картами, которые выходят за рамки одного маркера.
Все, что описано ниже, можно узнать внимательно читая документацию GMaps API. Предполагается, что читатель уже умеет внедрять карту, подключать API и ставить маркер. Статья не претендует на полноту изложения, но может быть полезна начинающим пользователям Google Maps API.
Маршрут проезда
Довольно часто на карте нужно отметить не только какое-либо место, а еще и способ добраться до него. Сделать это можно несколькими способами. Для всех из них используются полилинии.
Вариант 1: Едем на автомобиле
Этот вариант подразумевает под собой прокладку маршрута самим гуглом. Для этого нужно указать откуда ехать, куда и на чем.
directionsDisplay = new google.maps.DirectionsRenderer(); var request = < origin: new google.maps.LatLng(60.023539414725356,30.283663272857666), //точка старта destination: new google.maps.LatLng(59.79530896374892,30.410317182540894), //точка финиша travelMode: google.maps.DirectionsTravelMode.DRIVING //режим прокладки маршрута >; directionsService.route(request, function(response, status) < if (status == google.maps.DirectionsStatus.OK) < directionsDisplay.setDirections(response); >>); directionsDisplay.setMap(map);
Гугл прокладывает маршрут самым удобным, по его мнению, способом. Важный момент: в крупных (да и не очень) городах есть большая разница между направлениями движения. Как по удобству, так и в связи с ограничениями ПДД.
ГУГЛ КАРТЫ ХОТЕЛИ ЭТО СКРЫТЬ ПОДПИШИСЬ
У Гугла доступны четыре режима прокладки маршрута:
• google.maps.TravelMode.DRIVING — Автомобиль
• google.maps.TravelMode.BICYCLING — Велосипед
• google.maps.TravelMode.TRANSIT – Общественный транспорт (работает не везде)
• google.maps.TravelMode.WALKING — Пешеход
Вариант 2: Летим самолетом
У API нет возможности рассчитывать морские и авиамаршруты. Видимо из-за не востребованности. Но иногда все же нужно отобразить какой-либо авиамаршрут на карте. Например, для карты поставок скоропортящегося товара. Исходные данные те же, точка вылета и точка прилета. Для создания этого маршрута нужно просто нарисовать полилинию на карте:
route[route.length] = new google.maps.Polyline(< path: [new google.maps.LatLng(16.003575733881323, 101.689453125), new google.maps.LatLng(59.934288, 30.3350336)], //указываем точки старта и финиша geodesic: true, //устанавливаем флаг геодезической кривой. Так и выглядит лучше и точнее передает кратчайший путь между двумя точками map: map //устанавливаем на карту >);
Анимация перемещения на карте
Если у нас на карте есть линия, например, маршрут авиапоставок, то было бы неплохо прикрутить туда анимацию, которая показывает откуда куда летит этот самый самолет.
function animate(route) < //функция анимирует каждый первый символ каждой полилинии var count = 0; icons = null; var lnght=route.length; offsetId = window.setInterval(function() < count = (count + 1) % 200; for(var i= 0; i < lnght; i++)< icons = route[i].get(‘icons’); icons[0].offset = (count / 2) + ‘%’; route[i].set(‘icons’, icons); >>, 40); > function initialize() < . //настройка карты route[route.length] = new google.maps.Polyline(< path: [new google.maps.LatLng(16.003575733881323, 101.689453125), new google.maps.LatLng(59.934288, 30.3350336)], geodesic: true, icons: [< icon: , offset: ‘100%’>], map: map >); animateCircle(route); >
Как закрасить страну?
Предположим, что вам для каких либо целей нужно закрасить какую-либо страну на карте. Например, чтобы показать страны, в которых вы были. Для этих целей удобно использовать файлы формата KML. Сами файлы с контурами стран можно взять здесь или здесь. Редактировать (цвет и т.д. можно в программе Google Earth).
var KmlLayer = new google.maps.KmlLayer(< url: ‘http://yoursite.com/kml/Kazakhstan.kmz’, map: map >);
Здесь код очень простой, описывать его смысла нет. Единственное, что стоит отметить, это то, что путь к файлу должен быть полным, так как его обработкой занимаются сервера гугла.
Раскрашиваем карту
Иногда бывает нужно стилизовать карту под внешний вид сайта. Хоть специалисты Гугла и сделали карту, которая устраивает большинство, но есть способ все поменять. Например, для того, чтобы выделенную страну было лучше видно. Для этих целей удобнее всего использовать мастер стилизации карт, который предоставляет Гугл для этих целей. Мастер выдает код в JSON, который можно сразу ставить в скрипт.
var styles = [ < «featureType»: «landscape», «stylers»: [ < «color»: «#ffffff» >] >, < «featureType»: «road», «stylers»: [ < «lightness»: 80 >] >, < «featureType»: «administrative.locality», «stylers»: [ < «visibility»: «off» >] >,< «elementType»: «geometry.stroke», «stylers»: [ < «color»: «#000000» >, < «weight»: 0.5 >, < «lightness»: 11 >] >, < «featureType»: «poi», «stylers»: [ < «visibility»: «off» >] > ]; map.setOptions();
Полезные ссылки
Сервис для создания KML. Также позволяет легко получить массив точек для создания полилинии или просто определить координаты.
Еще один генератор полилиний, с возможностью отмены.
- советы начинающим
- google maps api
- kml
Источник: habr.com
Карты google схема проезда
На сайтах компаний можно часто встретить схемы проезда. Само-собой создание подобных схем работа не интересная и по сути нудная и на создание действительно хорошей схемы проезда может уйти куча времени, которое можно потратить с легкость на что-нибудь более стоящее по временным затратам.
С помощью Google Maps создать схему проезда можно очень быстро, а главное что такая схема будет удобна и понятна целевой аудитории.
Google Maps позволяет создать интерактивные и понятные схемы проезда, при помощи такой схемы просмотреть можно не только кусочек карты но и перемещаться в окошке по карте. Думаю пример подобных схем проезда(карт) уже видели практически все.
Ниже простой пример как можно сделать схему проезда при помощи сервиса Google Maps
CSS
JavaScript
«text/javascript» src=»http://maps.google.com/maps?file=apikey=тут ввести ключ»> «text/javascript»> function initialize() < var map = new GMap2(document.getElementById(«map»)); map.setCenter(new GLatLng(55.655298, 37.594872), 15); // Координаты центра карты map.addMapType(G_SATELLITE_3D_MAP); map.addControl(new GHierarchicalMapTypeControl()); map.addControl(new GLargeMapControl()); map.enableDoubleClickZoom(); map.enableScrollWheelZoom(); map.enableContinuousZoom(); map.getContainer().style.overflow=»hidden»; var marker = new GMarker(new GLatLng(55.655298, 37.592172)); // Координаты маркера GEvent.addListener(marker, «click», function() < var html = ‘»font-size: 11px; width: 210px; padding-right: 10px»>Текст маркера’; marker.openInfoWindowHtml(html); >); map.addOverlay(marker); GEvent.trigger(marker, «click»); var polyline = new GPolyline([ // Координаты пути new GLatLng(55.655292, 37.592146), new GLatLng(55.655328, 37.592061), new GLatLng(55.654844, 37.591760), new GLatLng(55.653658, 37.595580), new GLatLng(55.653028, 37.595623), new GLatLng(55.653125, 37.596374) ], «#ff0000», 5); GEvent.addListener(polyline, «click», function(latlng) < var html = ‘»width: 210px; padding-right: 10px»>A polyline.’; map.openInfoWindowHtml(latlng, html); >); map.addOverlay(polyline); >
HTML
«initialize()» onunlaod=»GUnload»>
Google API получаем тут: http://code.google.com/apis/maps/signup.html
И бонус — пример Google Maps посложнее.
Скачиваем тут: http://rapidshare.com/files/289184235/map.rar.html
- Как при помощи Feeburner создать банер вашей RSS ленты
- Google для подгрузки jquery и mootools
- Google стал еще шустрее — механизм Google Instant
- Пользовательский поиск google
- Как перераспределить Google PR за счет внутренних факторов — часть1
Спасибо Вам за добавление статьи «Google API как создать схему проезда при помощи Google Maps» в:
Если данная публикация вам понравилась, предлагаю вам подписаться на получение материалов centavrus-opti.ru через RSS ленту, и при желании присоединиться ко мне в Twitter
Источник: centavrus-opti.ru