В предыдущих двух заметках об использовании APIGoogle Maps мы рассмотрели как создать простейшую карту и добавить на нее элементы управления.
В этой части мы научимся добавлять маркеры на карту для обозначения точек.
Возьмем код из предыдущей заметки «Добавляем элементы управления на карту Google Maps».
Повторяю его здесь.
Пример API Карт Google на языке JavaScript
var map = new GMap2(document.getElementById(”map_canvas”));map.setCenter(new GLatLng(56.32811,44.0), 10);
map.addControl(new GLargeMapControl());map.addControl(new GMapTypeControl());
В начале, мы заменим элемент управления GLargeMapControl на GSmallMapControl, чтобы увеличить видимую область карты, а также мы закрепим прошлый материал.
Для этого необходимо заменить строку map.addControl(new GLargeMapControl()); на map.addControl(new GSmallMapControl ());
Теперь добавим обозначение маркера на нашу карту.
В начале нам нужно узнать координаты точки, в которую мы собираемся размещать маркер.
Как создать свою карту на Картах Google
Это можно сделать зайдя на сайт Google Maps по адресу http://maps.google.ru
В строке поиска ввести нужны нам адрес, а затем получить ссылку на карту из которой необходимо взять два числа после параметра sll= значения широты (Latitude) и долготаы (Longitude)соответственно. И значение уровня масштаба z=.
После этого нужно добавить строку кода var point = new GLatLng(56.293557,43.99898);, где вместо чисел 56.293557 и 43.99898 нужно подставить ваши значения.
Для добавления маркера на карту служит строка map.addOverlay(new GMarker(point));
По умолчанию для обозначения маркера используется значок G_DEFAULT_ICON, но можно задать и пользовательский значок.
В качестве аргументов конструктора GMarker используются GLatLng и необязательный объект GMarkerOptions.
Маркеры являются интерактивными элементами. По умолчанию они получают, например, события click и служат для вывода информационных окон в приемниках событий.
И так в наш код после задания элементов управления мы добавили две строки
point = new GLatLng(56.293557,43.99898);map.addOverlay (new GMarker(point));
Загрузим страницу с примером в браузере и мы увидим следующее
Привожу полный код примера:
Пример API Карт Google на языке JavaScript
var map = new GMap2(document.getElementById(«map_canvas»));map.setCenter(new GLatLng(56.32811,44.0), 10);
map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl());
point = new GLatLng(56.293557,43.99898);map.addOverlay (new GMarker(point));
Теперь давайте попробуем добавить собственный значок в качестве маркера на карту.
Для создания значка нам потребуется два изображения – самого значка и его тень (значек для тени в нашем примере мы не используем).
Теневое изображение необходимо создавать под углом 45 градусов (вверх и вправо) от основного изображения, а левый нижний угол теневого изображения должен располагаться на одной прямой с левым нижним углом основного. Теневые изображения должны быть 24-разрядными PNG-изображениями с альфа-прозрачностью, чтобы передача границ изображения на карте была корректной.
Делаем интерактивную карту с помощью Google Maps
Сначала мы должны определить сам новый значок .
Это делается следующим кодом.
var myexIcon = new GIcon();myexIcon.image = » files/cek_logo.png «; — задаем файл с изображением значка
myexIcon.iconSize = new GSize(38, 29); — размер значка
myexIcon.iconAnchor = new GPoint(19, 14); — смещение значка от точки
myexIcon.infoWindowAnchor = new GPoint(5, 5); — смещение информационного окна
После этого мы определяем объект GMarkerOptions
И в строку map.addOverlay (new GMarker(point)); после point через запятую дописываем , markerOptions.
В результате у нас получается следующий код:
Пример API Карт Google на языке JavaScript
map.setCenter(new GLatLng(56.32811,44.0), 10);
map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl());
var myexIcon = new GIcon();myexIcon.image = «files/cek_logo.png»;
myexIcon.iconSize = new GSize(38, 29);
myexIcon.iconAnchor = new GPoint(19, 14);
myexIcon.infoWindowAnchor = new GPoint(5, 5);
point = new GLatLng(56.293557,43.99898);map.addOverlay (new GMarker(point, markerOptions));
Загружаем страницу в браузере и наблюдаем
Раздел: Google Maps Метки: API Google Maps, маркеры, метки
Добавляем маркер на карту используюя API Google Maps : 10 комментариев
- Владимир24.12.2010 Спасибо большое за пример, все очень понятно написано, хорошо, что встречаются в сети такие добрые люди как вы!
- admin Автор записи 10.01.2011 Ссылку в балун? Или ссылку на метку с другой страницы или из меню на карте?
Источник: webmap-blog.ru
Как добавить несколько точек в 2ГИС
Если вы часто путешествуете или пользуетесь интерактивными картами, то знание, как добавить несколько точек в 2ГИС или Google Карты, может быть очень полезным. Это позволит создавать маршруты с промежуточными точками и следить за ними на карте. Тем более, что наши инструкции также объясняют, как поставить метку в 2ГИС и добавить событие на карте.
- Как добавить несколько точек в 2ГИС
- Как добавить несколько пунктов назначения в Google Картах
- Как поставить метку на карте в 2ГИС
- Полезные советы и выводы
Как добавить несколько точек в 2ГИС
- Откройте карту 2ГИС и нажмите на кнопку «Добавить точку».
- Укажите адрес, название организации или места, куда вам нужно добраться.
- При необходимости откорректируйте построенный маршрут. Для этого нужно выбрать нужную точку маршрута на карте, зажать левую кнопку мыши и, не отпуская, перетащить ее в нужную область.
- Чтобы изменить порядок промежуточных точек, перетащите их на нужные позиции.
Также можно добавить новую компанию в 2ГИС через боковое меню. Для этого нужно открыть его, кликнув на три черты в правом верхнем углу карты, и выбрать «Добавить организацию».
Как добавить несколько пунктов назначения в Google Картах
- Откройте Google Карты на компьютере.
- Нажмите «Как добраться».
- Укажите пункты отправления и назначения.
- Нажмите «Добавить» ниже. Выберите путевую точку. Можно добавить до девяти остановок.
- Чтобы посмотреть пошаговые инструкции, выберите маршрут в левой части экрана.
В приложении Google Карты на Android добавление нескольких точек выглядит еще проще. Найдите или выберите нужное место на карте, нажмите на кнопку «Маршрут» в левом нижнем углу, затем на «Ещё» в правом верхнем углу и добавьте остановки.
Как поставить метку на карте в 2ГИС
Если вы хотите добавить на карту какой-то интересный объект или событие, деловую встречу в кафе или аварию на дороге, в 2ГИС можно поставить метку:
- Через карту: зажмите экран в нужном месте на карте и в открывшемся меню выберите «Дорожное событие».
- Через боковое меню: выберите пункт «Дорожное событие».
- Через навигатор: кликните на иконку дорожного события в правой боковой панели.
Полезные советы и выводы
- Если вы едете вдоль длинного маршрута, то обязательно добавьте промежуточные точки на карте. Это позволит не только найти кратчайший путь, но и сэкономит время и деньги на топливе или общественном транспорте.
- Если вы хотите помочь другим пользователям, добавляйте интересные объекты на карту, такие как достопримечательности, кафе или парки.
- Всегда проверяйте маршруты и точки на картах заранее, чтобы избежать проблем в дороге или потери времени на поиск пути.
Итак, теперь вы знаете, как добавить несколько точек в 2ГИС и Google Карты, создать маршрут, добавить метку на карте и помочь другим пользователям. Нажимайте на кнопки и исследуйте мир!
Как в 2ГИС сделать 3 точки
Если вы хотите указать 3 точки на карте в 2ГИС, то это можно сделать разными способами. Один из самых простых путей — через боковое меню. Для этого необходимо открыть боковое меню, кликнув на три черты в правом верхнем углу карты, и выбрать пункт «Добавить организацию». Далее нужно заполнить необходимые данные о компании: название, контактные данные, адрес.
После этого организация будет добавлена на карту и получит свою точку. Если добавлять несколько точек, просто повторите этот процесс еще раз. Кроме бокового меню, можно также найти на карте кнопку «Добавить организацию», расположенную внизу, слева от значка глобуса. Но в любом случае, добавление новых точек на карте в 2ГИС является достаточно простой процедурой и не должно вызвать особых затруднений.
Как поставить метку в 2ГИС
Для того чтобы поставить метку на карте в приложении 2ГИС, можно воспользоваться боковым меню. Для этого нужно кликнуть на три черты в правом верхнем углу карты и выбрать пункт «Добавить организацию». Далее необходимо заполнить анкету, указав всю известную информацию о компании и хотя бы один контакт, по которому ее можно будет найти.
После этого нужно нажать на кнопку «Отправить». Если все данные заполнены верно, то через некоторое время метка организации появится на карте 2ГИС. Это очень удобно для тех, кто хочет найти нужную организацию или помочь ей найти новых клиентов.
Для чего нужен 2ГИС
2ГИС — это навигатор, который помогает людям быстро и легко добраться к месту назначения. Он учитывает пробки, перекрытия и качество дорог, что позволяет выбрать оптимальный маршрут. Это означает, что вы можете избежать ненужных задержек и потерь времени, которые могут возникнуть из-за дорожной ситуации.
Кроме того, 2ГИС помогает найти нужные организации и учреждения, такие как магазины, рестораны, кинотеатры, музеи и т.д. Навигатор обладает исчерпывающей базой данных с адресами и контактными данными, что существенно облегчает поиск и ориентацию на незнакомой территории. 2ГИС — это незаменимый инструмент для тех, кто хочет сэкономить время, избежать проблем с ориентацией и быстро найти нужную организацию.
Чтобы добавить новые точки на карте 2ГИС, нужно нажать на кнопку «Добавить точку» и ввести адрес, название организации или места. После этого построится маршрут, который можно изменить при необходимости. Для этого нужно выбрать нужную точку маршрута на карте и, зажав левую кнопку мыши, перетащить ее в нужную область. Также можно изменить порядок промежуточных точек.
Это может быть особенно полезно в случае, когда требуется выбрать более короткий и удобный маршрут, с учетом различных препятствий на пути. Добавление нескольких точек поможет вам планировать маршрут для поездки, выбирать места для посещения или находить более эффективные пути доставки товаров или услуг.
Источник: karta-shema.ru
Google maps : вывод точек на карту и режим панорамы
В отличие от яндекс карт в GMaps можно использовать панорамы — за что им большой плюс! Надеюсь в яндексе прочитают этот пост и тоже когда-нибудь это сделают!
Для клиента нужно было сделать вывод объектов на карту
С возможностью просмотра панорамы:
Основной HTML код карты хранится в макете:
html < height: 100% >
body < height: 100%; margin: 0px; padding: 0px >
#map < height: 100% >
var latlng;
var markers = [];
var myMap;
var index = 1;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var infoWindow = new google.maps.InfoWindow;
var clusterer, mcOptions;
var trafficLayer = new google.maps.TrafficLayer();
var trafficOn = false;
var noclick = false;
var PointArray = [];
var polygons = [];
function initialize() directionsDisplay = new google.maps.DirectionsRenderer();
latlng = new google.maps.LatLng(55.75, 37.62);
var myOptions = zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDoubleClickZoom: true,
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true
>;
myMap = new google.maps.Map(document.getElementById(«map»),
myOptions);
google.maps.event.addListener(myMap, ‘dragend’, function() noclick = true;
document.getElementById(‘CoordX’).value = «0»;
document.getElementById(‘CoordY’).value = «0»;
>);
google.maps.event.addListener(myMap, ‘click’, function(event) infoWindow.close();
if (!noclick) addMarker(event.latLng);
>else noclick = false;
>
>);
mcOptions = ;
clusterer = new MarkerClusterer(myMap, markers, mcOptions);
//отображение кнопки управления трафиком — все спер с примера, только подцепил свою функцию
var trafficControlDiv = document.createElement(‘div’);
trafficControlDiv.style.padding = ‘5px’;
// Set CSS for the control border
var controlUI = document.createElement(‘div’);
controlUI.style.backgroundColor = ‘white’;
controlUI.style.borderStyle = ‘solid’;
controlUI.style.borderWidth = ‘2px’;
controlUI.style.cursor = ‘pointer’;
controlUI.style.textAlign = ‘center’;
controlUI.title = ‘нажмите для вкл/выкл трафика’;
trafficControlDiv.appendChild(controlUI);
// Set CSS for the control interior
var controlText = document.createElement(‘div’);
controlText.style.fontFamily = ‘Arial,sans-serif’;
controlText.style.fontSize = ’12px’;
controlText.style.paddingLeft = ‘4px’;
controlText.style.paddingRight = ‘4px’;
controlText.innerHTML = ‘Трафик’;
controlUI.appendChild(controlText);
google.maps.event.addDomListener(controlUI, ‘click’, function () if (!trafficOn) trafficOn = true;
trafficLayer.setMap(myMap);
>else trafficOn = false;
trafficLayer.setMap(null);
>
>);
trafficControlDiv.index = 1;
myMap.controls[google.maps.ControlPosition.TOP_RIGHT].push(trafficControlDiv);
>;
//добавляем маркер и отправляем в массив
function addMarker(location) marker = new google.maps.Marker( position: location,
map: myMap,
title: ‘Точка’+index
>);
infoWindow.setContent(marker.title);
infoWindow.open(myMap, marker);
google.maps.event.addListener(marker, ‘click’, function() var mark = this;
var latLng = mark.getPosition();
infoWindow.setContent(mark.title);
infoWindow.open(myMap, mark);>);
markers.push(marker);
index++;
document.getElementById(‘CoordX’).value = location.lat();
document.getElementById(‘CoordY’).value = location.lng();
>
function calcRoute(options) //вытягиваем из массива переданных параметров значения
//и преобразуем их в формат LatLng
var option1 = options[0];//начальная точка
var option2 = options[1];//промежуточные точки
var option3 = options[2];//конечная точка
var start = new google.maps.LatLng(option1[0], option1[1]); //первый
var end = new google.maps.LatLng(option3[0], option3[1]); //последний
//получаем транзитные точки
var waypts = [];
if(option2.length > 0) for(var i = 0, l = option2.length; i < l; i++) temp = option2[i];
Qcoord = new google.maps.LatLng(temp[0], temp[1])
waypts.push( location:Qcoord,
stopover:true
>);
>
>
//return;
var request = origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
>;
directionsService.route(request, function(response, status) if (status == google.maps.DirectionsStatus.OK) directionsDisplay.setMap(myMap);
directionsDisplay.setDirections(response);
var total = 0;
var myroute = response.routes[0];
for (i = 0; i < myroute.legs.length; i++) <
total += myroute.legs[i].distance.value;
>
total = total / 1000;
document.getElementById(‘RouteInfo’).value = «Длина маршрута — » + total + «км.»;
//генерация события для перехвата в 1С
var evt = document.createEventObject();
document.body.fireEvent(‘ondatasetcomplete’, evt);
>else alert(status);
>
>);
>
function Reset() directionsDisplay.setMap(null);
for (var i = 0; i < markers.length; i++) markers[i].setMap(null);
>
markers = [];
index = 1;
//обнуляем кластер маркеров
clusterer.clearMarkers();
for (var i = 0; i < polygons.length; i++) polygons[i].setMap(null);
>
polygons = [];
PointArray = [];
>
function FindAdres(Adres) Reset();
var geocoder = new google.maps.Geocoder();
geocoder.geocode( < ‘address’: Adres>, function(results, status) if (status == google.maps.GeocoderStatus.OK) latlng = results[0].geometry.location;
myMap.panTo(latlng);
marker = new google.maps.Marker( map: myMap,
position: latlng,
animation: google.maps.Animation.BOUNCE,
title:Adres
>);
markers.push(marker);
infoWindow.setContent(marker.title);
infoWindow.open(myMap, marker);
> else alert(«Ничего не найдено: » + status);
>
>);
>
function ReverseSearchAdres(CoordX, CoordY, Adres) Reset();
latlng = new google.maps.LatLng(CoordX, CoordY);
myMap.panTo(latlng);
var marker = new google.maps.Marker( map: myMap,
position: latlng,
animation: google.maps.Animation.BOUNCE,
title:Adres
>);
markers.push(marker);
infoWindow.setContent(marker.title);
infoWindow.open(myMap, marker);
>
function addToPointArray(CoordX, CoordY, ID, IconT, Text) var latLng = new google.maps.LatLng(CoordX, CoordY);
var point = new google.maps.Marker();
PointArray.push(point);
>
function drawCluster() clusterer.addMarkers(PointArray);
//myMap.geoObjects.add(clusterer);
>
function createPolygon(ArrayPoint, Name, color) //создаем массив координат вершин многоугольника
var paths = [];
for(var i = 0, l = ArrayPoint.length; i < l; i++) var temp = ArrayPoint[i];
Qcoord = new google.maps.LatLng(temp[0], temp[1])
paths.push(Qcoord);
>;
// Создаем многоугольник
myPolygon = new google.maps.Polygon( paths: paths,
strokeColor: color,
strokeOpacity: 0.6,
strokeWeight: 5,
fillColor: «#0000FF»
>);
myPolygon.setMap(myMap);
polygons.push(myPolygon);
>
function WebClientClick() //очистка перед кликом координат, иначе после клика в упр. формах идет считывание координат
document.getElementById(‘CoordX’).value = «0»;
document.getElementById(‘CoordY’).value = «0»;
var WebClientOperation = document.getElementById(«WebClientOperation»).value;
//alert(WebClientOperation);
switch (WebClientOperation) case «0»: // ничего не делаем
var a = 1;
default: // запускаем функцию
eval(WebClientOperation);
>
document.getElementById(‘WebClientOperation’).value = «0»;
>
Код вывода карты:
Вырванная из конфигурации обработка GMaps.rar
Можно ее использовать как макет для создания обработки под свои требования.
Источник: helpf.pro