Конструктор карт гугл для сайта

Конструктор карт Google – это интересный сервис от поискового гиганта, позволяющий создавать свои маршруты и изображения местности для сайтов. Результатом использования становится Java-код, который интегрируется в код сайта. Так можно показать пользователям своего ресурса местоположение определенного объекта, здания или компании. Создание своего маршрута позволит малоизвестным организациям рассказать потребителю, как к ним добраться.

Генератор карт Google

Создать карту Гугл может каждый желающий. Для этого требуется проследовать по ссылке и ознакомиться с правилами и возможностями сервиса.

Генератор Гугл карт

Что дает пользователю конструктор Гугл карты для сайта:


  1. Возможность создать миниатюрный маршрут, который в дальнейшем будет размещен на тематической странице.
  2. Подробная настройка параметров. Возле указанного пользователем места может отображаться местность: от 2.5 метров до 2000 км. К слову, первое и последнее значения практически бесполезны – на малом расстоянии не получится разглядеть, что находится рядом. На большом — наоборот, видно сразу несколько материков. Вероятно, и этому можно найти применение.
  3. Возможность указать точный адрес местности, название, а также определить, как все будет отображаться.
  4. 4 доступных типа отображения местности: спутник, карта, гибридный, местность.
  5. Возможность юзеру задать высоту и ширину.

Вкладка Спутник в конструкторе Гугл карт

После окончательной настройки любой желающий получает код для вставки на свой сайт и гиперссылку. Последняя ведет на сгенерированное изображения, указывающее маршрут к нужному месту.

В чем польза для сайта

Создать карту Google - В чем польза для сайта

Создать карту Google для своего сайта – далеко не глупая и, вероятно, недооцененная затея, и вот почему:


  • Во-первых, местонахождение пользователя в реальном мире (здание – оно может символизировать собой ТЦ, магазин, ресторан или любой другой сервис) отобразится на одном из самых популярных картографических сервисов – Google Maps.
  • Во-вторых, это потенциальное удобство в ориентировании. Людям больше не придется бездумно искать ваше, к примеру, кафе – его можно будет увидеть на карте ближайшей местности.
  • Маршруты, размещенные на сайте, наверняка, вызовут симпатию у посетителя ресурса. Это будет значить, что владелец домена заботится о своем трафике, предоставляя им все условия для нахождения сервиса.
  • Конструктор Гугл для сайта позволит разнообразить дизайн любого интернет-ресурса.

скачать-навигатор.рф

Планы и карты часто размещаются на сайтах компаний с целью помочь клиентам добраться до учреждения. И Карты Google могут стать отличным помощником. Ну разве не чудесно будет добавить к карте еще и логотип компании, указать место стоянки, ж/д вокзалы и т.д. Да так, чтобы найти вас не представляло ни малейшей трудности. На самом деле это очень просто сделать, и в этом уроке я расскажу вам как.

Конструктор карт гугл для сайта

Конструктор карт гугл для сайта Конструктор карт гугл для сайта

Обзор урока

o Google Maps API
o Получаем координаты
o Встраиваем карту в ваш сайт
o Добавляем маркеры
o Настройка маркеров
o Добавляем информационные блоки

Google Maps API

Google Maps API позволяет встраивать карты прямо в страницы вашего сайта. Для чего вам потребуется немного JavaScript, а для создания красивого оформления — немного CSS. Только что выпущена Google Maps API версия 3 и мы именно ее возьмем за основу. Вы можете ознакомиться со всей документацией на Google Labs, и пока будете просматривать информацию обязательно получите ключ к API Карт.

Получаем координаты

Полагаю, что вы, врядли, знаете точные координаты расположения вашей фирмы, поэтому объясню вам очень простой способ для их получения, который предлагает Google. Зная точный адрес вы можете вписать его в URL-адрес следующим образом:

http://maps.google.com/maps/geo?q=1+Infinite Liip,+Cupertino,+CA+95014,+USA&output=csv&oe=utf8&sensor=false&key=your_google_maps_api_key

Вписав его подобным образом в адресную строку, вы получите следующие данные:


Конструктор карт гугл для сайта

Это координаты Центрального управления компании Apple в Купертино

Первое число — это константа, и 200 означает, что операция прошла успешно. Второе число указывает на сколько точно указывается адрес, в данном случае 8 говорит о довольно высокой точности. Два последних значения — это широта и долгота, именно они нам и нужны.

Встраиваем карту в ваш сайт

Теперь давайте, наконец, добавим карту на сайт! Откройте любимый HTML -редактор и создайте стандартный HTML-файл с кодировкой UTF-8. Сперва создадим центр проекции (точку фотографирования) и укажем в нашем HTML-файле путь на JavaScript, находящийся на сайте Google Code. Заключите следующие строчки между тегами <head> и </head>:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

В коде после ссылки идет свойство sensor=false. Так как нам не нужны сенсоры, GPS и нет необходимости определять чье-либо местонахождение.

Под кодом, который мы только что вставили, введите следующее:

 <script type="text/javascript">   function initialize() {   var latlng = new google.maps.LatLng(57.0442, 9.9116);   var settings = {   zoom: 15,   center: latlng,   mapTypeControl: true,   mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},   navigationControl: true,   navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},   mapTypeId: google.maps.MapTypeId.ROADMAP   };    

Давайте немного разберемся с кодом. Во второй строке задаем функцию initialize(). В ней мы и зададим основные настройки нашей карты. В третьей строке вводим переменную latlng. latlng означает географические широту и долготу. Переменная содержит координаты, которые будем использовать как центр нашей карты.
Затем вводится переменная settings, содержащая большой список параметров:

— zoom задает, как вы, наверное, уже догались, на сколько будет увеличена карта.
— center задает центральную точку.

Прописывая latlng, мы ссылаемся на координаты уже прописанные в этой переменной.

Следующие параметры кода несколько минимализируют разметку карты. Кнопки управления в верхнем правом углу (Карта, Спутник, Ландшафт) заменяются на ниспадающее меню, и кнопки задающие масштаб заменяются на маленькие рычажки.

mapTypeId: google.maps.MapTypeId.ROADMAP определяет тип нашей карты, это будет дорожная карта, но вы легко можете сменить тип на SATELLITE (спутниковая карта), HYBRID (карта-гибрид) или TERRAIN (ландшафтная карта).

Далее пишем следующее:

var map = new google.maps.Map(document.getElementById("map_canvas"),   settings);    

В нем вводим переменную map, она определяет, что наша карта будет использовать все заданные выше настройки.

Пишем

}
</script>

и закрываем функцию, перейдем к созданию тела страницы:

<body onload="initialize()"> <div id="map_canvas" style="width:800px; height:500px"></div> </body>

Таким образом мы заставляем наш сайт при загрузке активизировать функцию initialize() и задаем в теге <div> размер для нашей карты.

Добавляем маркеры

Пора добавить некоторую разметку. Давайте начнем с создания стандартного маркера:

Прямо под:

var map = new google.maps.Map(document.getElementById("map_canvas"),   settings);

вводим следующее:

var companyPos = new google.maps.LatLng(57.0442, 9.9116);  var companyMarker = new google.maps.Marker({  position: companyPos,  map: map,  title:"Some title"  });

Итак, разберемся с кодом.

Сначала мы задали переменную companyPos, с помощью которой устанавливают расположение маркера. Далее, мы создали сам маркер посредством переменной companyMarker. Вы можете конечно вписать еще ряд параметров, а с теми, которые мы уже указали, я думаю все ясно.

Настройка маркеров

Хотя того, что мы уже сделали, вполне достаточно и ваш клиент легко вас найдет, мы можем нашу карту слегка приукрасить. Создайте в Photoshop изображение размером 100×50 пикселей подобное этому:

Конструктор карт гугл для сайта

Далее создадим у нашего изображения тень

Конструктор карт гугл для сайта

Теперь заменяем стандартный маркер этими изображениями, соответственно изменяем и код:

   
var companyLogo = new google.maps.MarkerImage('images/logo.png', new google.maps.Size(100,50), new google.maps.Point(0,0), new google.maps.Point(50,50) ); var companyShadow = new google.maps.MarkerImage('images/logo_shadow.png', new google.maps.Size(130,50), new google.maps.Point(0,0), new google.maps.Point(65, 50) ); var companyPos = new google.maps.LatLng(57.0442, 9.9116); var companyMarker = new google.maps.Marker({ position: companyPos, map: map, icon: companyLogo, shadow: companyShadow, title:"Company Title", });

Данный код тоже довольно простой. Переменная companyLogo указывает на название нашего логотипа, задает его размер, путь к нему и координаты расположения кончика логотипа (то есть то место, в котором наш логотип касается карты). Затем те же самые параметры настраиваем и для изображения тени с помощью переменной companyShadow. И наконец посредством переменной companyMarker мы выводим изображение и его тень на карту.

Чтобы добавить еще маркеры, воспользуйтесь тем же способом, только не забудьте сменить названия переменных.

Если вам нужно расположить несколько маркеров очень близко друг к другу, воспользуйтесь z-индексом. Маркер с самым высоким значением z-индекса будут всегда сверху:

Конструктор карт гугл для сайта

Параметр z-index позволяет вам выбрать какой маркер будет поверх всех

   
var companyMarker = new google.maps.Marker({ position: companyPos, map: map, icon: companyImage, shadow: companyShadow, title:"Høgenhaug", zIndex: 4 });

Добавляем информационные блоки

Вы можете ввести описание компании с помощью информационного блока, появляющегося при нажатии на логотип. Благодаря Google Maps API это сделать проще простого.

Конструктор карт гугл для сайта

Щелчок на логотип вашей компании будет активизировать информационный блок.

Вставьте данный код сразу под переменной map:

var contentString = '<div id="content">'+  '<div id="siteNotice">'+  '</div>'+  '<h1 id="firstHeading" class="firstHeading">Høgenhaug</h1>'+  '<div id="bodyContent">'+  '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod   tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo   consequat.</p>'+  '</div>'+  '</div>';
var infowindow = new google.maps.InfoWindow({ content: contentString });

И этот код тоже необыкновенно прост. Вот здесь есть простор для ваших идей, так как в информационном блоке можно расположить не только название и пару тройку параграфов, но и изображения. А чтобы описание появлялось по щелчку на логотип, впишите этот код сразу после закрывающей }функции initialize():

google.maps.event.addListener(companyMarker, 'click', function() {  infowindow.open(map,companyMarker);  });

Приукрасьте немного ваш блок, добавив стилей в ваш stylesheet-файл:

body {  font-family: Helvetica, Arial, sans-serif;  font-size:10pt;  }

Вот и все! Теперь вы сможете встроить Google карту в любой проект.

ruseller.com

1. Вставка карты Google Maps

Для начала давайте создадим html страницу и вставим на нее карту Google Maps. Делать это мы будем с помощью Google Maps API. То есть пойдем продвинутым путем. Надо заметить что у Google есть хорошая документация и инструкция на русском и английском по использованию Google Maps. Так что программисты могут сразу отправиться туда. Если же вы хотите получить понятный пошаговый урок — то оставайтесь.

Теперь я опишу по очереди действия которые необходимо сделать и после приведу код страницы с комментариями. Сперва создаем HTML страницу. Затем:

  1. На странице создаем элемент <div id=»map»></div> внутри которого у нас будет отображаться карта Google Maps.
  2. Необходимо стилизовать этот элемент, задать ему высоту и ширину чтобы он был виден на странице.
  3. Подключаем библиотеку Google Maps Api, чтобы создать карту и управлять ей. Без этой библиотеки карта не заработает.
  4. Пишем скрипт который создаст и отобразит карту Google Maps на странице.

Вот код страницы который у нас получился. Обратите внимание на комментарии внутри, я описал что и где происходит.

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>01 - My Google Map</title>          <!-- 2. Необходимо стилизовать этот элемент, задать ему высоту и ширину чтобы он был виден на странице -->     <style>         #map {             width: 100%;             height: 500px;         }     </style> </head> <body>          <!-- 1. Создаем элемент внутри которого у нас будет отображаться карта Google Maps -->     <div id="map"></div>      <!-- 4. Пишем скрипт который создаст и отобразит карту Google Maps на странице. -->     <script type="text/javascript">          // Определяем переменную map         var map;          // Функция initMap которая отрисует карту на странице         function initMap() {              // В переменной map создаем объект карты GoogleMaps и вешаем эту переменную на <div id="map"></div>             map = new google.maps.Map(document.getElementById('map'), {                 // При создании объекта карты необходимо указать его свойства                 // center - определяем точку на которой карта будет центрироваться                 center: {lat: -34.397, lng: 150.644},                 // zoom - определяет масштаб. 0 - видно всю платнеу. 18 - видно дома и улицы города.                 zoom: 8             });         }     </script>      <!-- 3. Подключаем библиотеку Google Maps Api, чтобы создать карту -->     <!-- Атрибуты async и defer - позволяют загружать этот скрипт асинхронно, вместе с загрузкой всей страницы  -->     <!-- В подключении библиотеки Google Maps Api в конце указан параметр callback, после  подключения и загрузки этого Api сработает функция initMap для отрисовки карты,  которую мы описали выше -->     <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>      </body> </html>

Теперь у нас есть вот такая карта, но не хватает маркера для указания места.
Также вы спросите, а как указать на карте тот адрес который нам нужен.

 

2. Карта Google Maps Api — определяем место и устанавливаем маркер

2.1 Определяем место центрирования карты

Давайте покажем на карте расположение Большого Театра. В параметре center мы определяли координаты центрирования карты:

center: {lat: -34.397, lng: 150.644},

Нам необходимо получить такие координаты для нашего места. Для этого идем в обычную версию Google Maps и правой клавишей кликаем на интересующем нас месте. Нажимаем «Что здесь» и получаем координаты места. (55.760186, 37.618711). Заодно и изменю масштаб, установив его на 18: zoom: 18.

Определение координат места для маркера на карте Google Maps

Конструктор карт гугл для сайта

 

2.2 Устанавливаем маркер

Место определили. Осталось показать маркер на карте. Внутри функции initMap() добавляем переменную для маркера:

// Создаем маркер на карте var marker = new google.maps.Marker({   // Определяем позицию маркера  position: {lat: 55.760186, lng: 37.618711},   // Указываем на какой карте он должен появится. (На странице ведь может быть больше одной карты)  map: map,   // Пишем название маркера - появится если навести на него курсор и немного подождать  title: 'Наш маркер: Большой театр' });

Теперь у нас есть карта с маркером

Установка маркера на карте Google Maps

Как добавить событие по клику на карту или маркер в Google Maps

Также на клик по маркеру можно добавить свое событие. В итоговом коде страницы мы это делать не будем. Но делается это вот так:

google.maps.event.addListener(marker, 'click', function() {  document.location='http://google.com'; });

Первый параметр метода addListener — это объект, для которого добавляется событие, в нашем случае marker. Объектом может выступать не только маркер но и сама карта. Второй параметр click определяет тип события, в данном случае один щелчок. Третий — функция обработчик, которая сработает.

Более подробно про маркер и возможности работы с ним рекомендую посмотреть в документации.

2.3 Установка собственной иконки для маркера в Google Maps

Маркер установили. Но он стандартный, и это совсем не интересно. Давайте заменим его на свою иконку. Я нашел одну подходящую иконку которую мы будем использовать.

В описание переменной с маркером, добавлю иконку.

// Создаем маркер на карте var marker = new google.maps.Marker({                  // Определяем позицию маркера                 position: {lat: 55.760186, lng: 37.618711},                  // Указываем на какой карте он должен появится. (На странице ведь может быть больше одной карты)                 map: map,                  // Пишем название маркера - появится если навести на него курсор и немного подождать                 title: 'Наш маркер: Большой театр',                  // Укажем свою иконку для маркера                 icon: 'theatre_icon.png' });

Про более сложные значки — можно посмотреть в документации.

 

3. Задаем свои стили оформления для карты Google Maps

Пришло время раскрасить нашу карту. Придать ей особый и неповторимый вид. Делать мы это будем с помощью сервиса Snazzy Maps который имеет большое количество скинов для Google карт. И позволяет делать вот такие крутые карты:

Конструктор карт гугл для сайта

Я выбрал стиль карты который называется Blue water. На странице данного стиля можно найти код для оформления и скачать файл с примером — применения такого стилевого оформления к карте Google Maps.

Стили для оформления карты добавляем в свойство styles которое мы указываем для переменной map — когда создаем в ней объект с картой.

Привожу весь фрагмент кода:

// В переменной map создаем объект карты GoogleMaps map = new google.maps.Map(document.getElementById('map'), {                 // При создании объекта карты необходимо указать его свойства                   // center - определяем точку на которой карта будет центрироваться                 center: {lat: 55.760186, lng: 37.618711},                   // zoom - определяет масштаб. 0 - видно всю платнеу. 18 - видно дома и улицы города.                 zoom: 18,                  // Добавляем свои стили для отображения карты                 styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]}] });

Теперь наша карта выглядит вот так:

Вставка стилизованной карты Google Maps. Свое оформление для карт Google Maps.

 

4. Информационные окна

Карту можно еще улучшить, добавив информационное окно по клику на наш маркер. Документация по ним лежит здесь. Если вкратце, то чтобы добавить инфо окно необходимо:

  1. Создать само окно и контент внутри него
  2. Сделать так чтобы оно появлялось по клику на маркер.

Все это происходит внутри функции initMap()

4.1 Опишем контент инфо-окна:

// Создаем наполнение для информационного окна var contentString = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h1 id="firstHeading" class="firstHeading">Большой театр</h1>'+ '<div id="bodyContent">'+ '<p>Госуда́рственный академи́ческий Большо́й теа́тр Росси́и, или просто Большой театр — один из крупнейших' + 'в России и один из самых значительных в мире театров оперы и балета.</p>'+ '<p><b>Веб-сайт:</b> <a href="http://www.bolshoi.ru/" target="_blank">bolshoi.ru</a>'+ '</p>'+ '</div>'+ '</div>';

4.2 Создадим инфо-окно

// Создаем информационное окно var infowindow = new google.maps.InfoWindow({  content: contentString,  maxWidth: 400 });

4.3 Делаем так чтобы по клику на маркер — появлялось инфо-окно

// Создаем прослушивание, по клику на маркер - открыть инфо-окно infowindow marker.addListener('click', function() {  infowindow.open(map, marker); });

Теперь карта с инфо-окном выглядит следующим образом:

Добавляем инфо окно и описание к маркеру на карту Google Maps.

Также можно убирать стандартные элементы управления с карты, включать/выключать нужные и ненужные, и даже создать свои. Описание всего этого вы найдете в документации.

rightblog.ru

Шаг 1. Получить код для установки карты Google на сайте

Итак, чтобы разместить интерактивную карту Google на своем сайте, в первую очередь нужно получить код карты с отметкой Вашей организации. Для этого на GoogleMaps введите адрес или название компании в строку поиска, либо вручную найдите необходимый дом на карте и установите метку кликом мыши.

Найдите вашу организацию на карте

Когда отметка на карте установлена, нажмите на значок меню рядом со строкой поиска.

Нажмите на значок меню рядом со строкой поиска

В открывшемся списке меню выберите пункт «Ссылка/код».

Выберите пункт Ссылка/код в списке меню

В открывшемся окошке перейдите во вкладку «Код», выберите размер карты и скопируйте предложенный html-код.

Скопируйте код карты в буфер обмена

nubex.ru

Google Maps API v3 позволяет легко и просто добавить карту на любую страницу вашего сайта, даже если вы не особо владеете языком JavaScript.

Также встроенную карту можно очень гибко настраивать, менять цветовое решение, добавлять маркеры, всплывающие подсказки и т.д. В общем, возможностей масса и вот как раз о самых основных из них, я хотел бы рассказать и показать на примерах, как реализовать.

Первый урок мы посвятим теме «Как установить Google Maps на сайт?»

Для этого нам нужно сделать 4 простых шага.

Шаг 1 — подключаем Google Maps API

Подключаем к странице JavaScript файл, который загрузит все компоненты карты. Также обратите внимание, что в указанном пути нужно написать ваш ключ API для грамотной работы Google Maps (как получить ключ описано ниже).

При этом хочу отметить, что даже если вы не укажите ключ и вообще опустите данный параметр, то карта у вас все равно будет работать, просто в консоль будет выводится предупреждение, что ключ не указан.

<!DOCTYPE html>
<html lang="ru">
<head>
...
<script src="https://maps.googleapis.com/maps/api/js?key=ВАШ_API_КЛЮЧ"></script>
...
</head>
<body>

Как получить ключ Google Maps API?

1. Вы должны войти в свой аккаунт на Google. Если у вас его нет, то просто зарегистрируйтесь там.

2. Перейдите на страницу Google Developers Console

3. Выберите «Создать новый проект» или если вы уже создавали проекты ранее, то выберите существующий. Затем нажмите «Продолжить».

Конструктор карт гугл для сайта

4. Укажите произвольное название для ключа. По желанию, вы можете еще указать домен сайта на котором и будет использоваться данный ключ, но это необязательно.

Затем нажмите кнопку «Создать».

Конструктор карт гугл для сайта

5. Вот тот самый ключ, который и нужно указывать при подключении Google Maps API

Конструктор карт гугл для сайта

Шаг 2 — размещаем карту на странице сайта

В том месте, где требуется вывести карту, мы вставляем тег (подойдет любой блочный элемент), которому задаем уникальный ID и также желательно указать class.

Название ID и класса могут быть произвольными и не обязательно должны совпадать, как в нашем случае.

<body>
...
<div id="map" class="map"></div>
...
</body>

Шаг 3 — задаем размеры карты

Теперь в таблицу стилей добавим следующее правило, в котором зададим размеры для нашей будущей карты.

Размеры можно задавать в любых единицах доступных в CSS.

.map { width: 100%; height: 400px; } 

Шаг 4 — инициализируем карту

После подключения Google Maps API (шаг 1), нам необходимо вызвать функцию инициализации карты, указанную ниже.

// initMap() - функция инициализации карты function initMap() { // Координаты центра на карте. Широта: 56.2928515, Долгота: 43.7866641 var centerLatLng = new google.maps.LatLng(56.2928515, 43.7866641); // Обязательные опции с которыми будет проинициализированна карта var mapOptions = { center: centerLatLng, // Координаты центра мы берем из переменной centerLatLng zoom: 8 // Зум по умолчанию. Возможные значения от 0 до 21 }; // Создаем карту внутри элемента #map var map = new google.maps.Map(document.getElementById("map"), mapOptions); } // Ждем полной загрузки страницы, после этого запускаем initMap() google.maps.event.addDomListener(window, "load", initMap); 

Ну и напоследок, откуда брать значения широты и долготы?

1. Заходим на сайт Google Map

2. Находим на карте требуемый объект

3. Кликаем по нему правой кнопкой мыши и выбираем «Что здесь?»

4. На карте появится окошко в котором будет прописана широта и долгота. Эти значения нам и нужно использовать при работе с Google Maps API

Конструктор карт гугл для сайта

В следующей статье мы узнаем, как добавить маркер на нашу карту.

webcareer.ru

Давно ушли в прошлое те времена, когда на странице контактов было достаточно указать адрес и номер телефона. Сегодня любая компания, которая ценит своих клиентов, обязательно размещает рядом с адресом карту проезда. Это очень удобно, в том числе и с точки зрения UX. Создать простую карту проезда можно с помощью конструктора Яндекс.Карт или Google Map. Но порой требуется нечто посложнее – например, карта может понадобиться для презентации или для создания инфографики. В таком случае можно воспользоваться специальными онлайн-инструментами для создания пользовательских карт. Некоторые из этих инструментов позволяют создавать интерактивные карты, с помощью которых можно представить информацию в наиболее удобном для пользователя виде. FreelanceToday предлагает вашему вниманию 10 бесплатных инструментов для создания карт.

 

ANIMAPS

Картографический сервис 

Сервис Animaps расширяет функционал Google Maps, позволяя создавать карты с анимированными маркерами. Маркеры передвигаются по карте, показывая, к примеру, маршрут передвижения. Очень полезный сервис для создания интерактивной инфографики. С помощью Animaps можно создать целый рассказ о каком-либо событии, сопроводив его текстовыми блоками и иллюстрациями.

 

SCRIBBLE MAPS

Сервис для создания карт 

Простой в использовании сервис Scribble Maps имеет множество инструментов для создания практически любого вида карт. Можно сделать обычную маршрутную карту, но одновременно с этим сервис может быть полезен дизайнерам, которые хотели бы создать красочную инфографику. В Scribble Maps имеется возможность добавлять текст, изображения, рисовать и закрашивать различные геометрические фигуры, расставлять маркеры и многое другое. Если нужна инфографика на основе карты – лучшего инструмента не придумать. Готовую карту можно разместить на сайте, в блоге или отправить ее клиенту, сохранив ее в формате PDF.

 

MAPTILER

Инструменты для создания карт 

Создатели сервиса MapTiler позаботились о том, чтобы созданные пользователем карты отображались на любых устройствах. MapTiler – одно из самых удобных приложений для подготовки тайлов с использованием API Google Maps. К сожалению, бесплатная версия программы обладает очень ограниченным функционалом, с помощью которого можно создавать лишь самые простые карты.

 

HEATMAPTOOL

Создание пользовательских карт 

HeatmapTool является лучшим онлайн-сервисом для создания очень точных тепловых карт. С помощью такой карты можно быстро визуализировать данные, используя различные цвета. Сервис позволяет управлять радиусом, масштабированием и непрозрачностью тепловых пятен. Информацию можно обновлять в режиме реального времени.  Для чего создан данный сервис? В первую очередь для визуального отображения любых статистических данных в заранее выбранном регионе.  Можно делать достаточно сложные карты, к примеру с помощью сервиса можно показать покрытие сотовой сети, плотность населения в стране и многое другое. Сервис очень мощный, с его помощью можно быстро обрабатывать даже очень большие объемы статистических данных.

 

BING MAPS

Создание интерактивных карт 

После покупки Nokia корпорация Microsoft значительно улучшила свой картографический сервис Bing Maps. Карты Nokia всегда отличались высокой детализацией и хорошим покрытием, так что можно не переживать за точность. Функционал сервиса не может похвастаться разнообразием, но треков, маркеров и геометрических фигур вполне достаточно, чтобы создать достаточно информативную карту. Также имеется возможность добавления изображений и текстовых комментариев. После окончания работы результат нужно сохранить, после чего Bing Maps сгенерирует ссылку и код для встраивания карты на сайт.

 

CLICK2MAP

Инструменты картографии 

Дружественный пользовательский интерфейс сервиса Click2Map поможет быстро и легко создавать интерактивные карты любого уровня сложности. Мощный функционал сервиса позволит создать профессиональные карты в кратчайшие сроки. С помощью большого набора иконок можно персонализировать карту, если требуется рассказать о какой-то конкретной сфере деятельности. Тематические маркеры позволят пользователям легко ориентироваться по карте. Также маркеры можно использовать  для определения местоположения конкретной точке. Маркер поддерживает различные виды контента – текст, изображения, HTML-код. Чтобы получить доступ ко всем возможностям сервиса, придется оформить платную подписку, однако если зарегистрировать бесплатный аккаунт, то можно создавать карты с ограниченным количеством маркеров, максимум 10.

 

ZEEMAPS

Онлайн инструменты для создания карт 

Картографический сервис ZeeMaps позволяет легко создавать, публиковать и делиться интерактивными картами. Сервис работает на основе Google Map и с его помощью можно создать даже очень сложную карту с большим количеством данных. Статистику можно импортировать из Excel, Access, MS Outlook и других программ. Ограничений на количество маркеров нет, информацию можно в любой момент изменять по желанию пользователя. К маркерам можно добавлять картинки, текст, аудио-файлы, а также видео из YouTube.

 

UMAPPER

Приложение Umapper 

Приложение UMapper позволяет создавать встраиваемые флэш-карты. Визуальный редактор UMapper интуитивно понятен, с его помощью можно добавлять маркеры, рисовать фигуры и добавлять интерактивные элементы на карту. Сервис берет картографические данные из Microsoft Virtual Earth, Google, Yahoo, OpenStreet, что делает его действительно универсальным. С помощью приложения даже можно заработать – если созданная карта за месяц получит 50 тысяч просмотров, сервис перечислит на счет пользователя $12,50. К недостаткам UMapper можно отнести водяной знак, который появляется на карте при использовании бесплатной версии и показ на карте встроенных рекламных объявлений.

 

TARGETMAP

Сервис Target Map 

Если нужно создать впечатляющую инфографику, то для этого идеально подойдет веб-приложение TargetMap. Сервис абсолютно бесплатен и обладает широким функционалом. Создатели сервиса основали его с образовательной целью – создавая свои карты, пользователи могут поделиться информацией с сообществом TargetMap. В галерее сервиса представлены очень интересные карты, которые разбиты на несколько категорий. Данные в сервис загружаются из файла Excel, после чего информация тут же появляется на карте. Потребуется всего несколько минут, чтобы поработать над цветовым оформлением, и карта готова.

 

GMAPGIS

Сервис для создания карт 

GmapGis – простенькое-онлайн приложение для рисования на картах Google. Можно расставить маркеры, измерить расстояние между двумя точками на карте, рисовать линии и геометрические фигуры. Весь функционал представлен в верхней части страницы, так что проблем с использованием сервиса не будет – все очень понятно. Полученный результат можно сохранить как файл или в виде ссылки. Во время использования GmapGIS может появиться проблема – пользователь не может провести линию или нарисовать фигуру. В этом случае разработчики рекомендуют закрыть и снова открыть браузер. После этого появится полный доступ ко всему функционалу.

freelance.today

Вставить Яндекс карты на сайт

Вставить Яндекс карту на свой сайт можно несколькими способами:

  • Использование возможностей конструктора;
  • При помощи плагинов и модулей;
  • API от Яндекс;

Использование возможностей конструктора.

Если ваш сайт создан при помощи какого-то конструктора, вроде uCoz или WIX. Проверьте, поддерживает ли конструктор эту возможность. На многих конструкторах эта идея продумана и порой достаточно вставить виджет в необходимое место, и можно любоваться картой от Яндекс на сайте.

Карта при помощи плагинов и модулей.

Для большинства CMS разработаны различные плагины и модули. Если у вас сайт на WordPress и вы не умеете или не любите возиться с кодами, вставить Яндекс карту на сайт можно при помощи плагина Oi Yandex.Maps for WordPress.

Установка и настройка плагина стандартная. После того, как вы активируете плагин, в визуальном редакторе появится кнопка «Яндекс карта», нажав на которую вы сможете вписать населенный путь, и плагин при помощи шорткода выведет карту. Эта карта ничем не будет отличаться от той, к которой вы привыкли, просматривая пробки в Яндекс. Карту можно передвигать, менять масштаб, переключаться на вид со спутника и прочие фишки, которые есть в стандартных Яндекс картах.

Выглядит такая карта вот так:

карта яндекс плагин

Благодаря плагину, на карте можно сделать отметку любого адреса, вставить всплывающий текст (описание местоположения – «кабак у дяди Васи»).

Плагин Oi Yandex.Maps for WordPress очень легок и прост, но не без минусов. Если вам необходимо указать какой-то мелкий, никому не известный населенный пункт, придется сначала узнать его координаты, иначе Он может быть просто не найден, или найден «тезка» вашего городишки. Но в целом оценка 5 баллов!

Нашел еще несколько аналогичных плагинов, принцип работы схож, поэтому смысла не вижу их описывать.

API от Яндекс.

Третий способ вставить Яндекс карту на сайт, это использование API (Интерфейс Программирования приложений) от Яндекс. Не пугайтесь умных словечек, вам не нужно быть программистом, чтобы добавить Яндекс карту на сайт при помощи API. Делается это в два счета.

Просто переходим по ссылке — https://tech.yandex.ru/maps/tools/constructor . На этой странице можно сконструировать карту Яндекса любого размера, при этом проложив маршрут и сделав пометку об объекте. Затем нужно скопировать предоставленный код и вставить на свой сайт.

Процесс конструирования Яндекс карты опишу чуть ниже. Да и на странице конструктора карт тоже имеются все необходимые подсказки.

Результат будет примерно такой:

конструктор карт Яндекс

Как вставить карту гугл на сайт

Не знаю, пользуетесь ли вы картами от гугл. Лично я ими перестал пользоваться после одного не совсем приятного случая, который произошел со мной около полугода назад.

Поехали мы с ребятами в Москву по делам на своей машине, и чтобы не заблудиться, скачали навигатор (уже не помню какой) на планшет. Навигатор использовал технологии Google Maps, предупреждал о камерах на дороге и прочие навороты. Как оказалось, Москва строится семимильными шагами, и в гугл картах это не учитывалось. Карты просто устарели, в одном месте построили новую развязку, в другом идет стройка новой высотки и переулок перекрыли, отправляя машины в объезд.

Результат работы навигатора нас не порадовал. Дали мы километров 12 круга по утренней Москве, а могли просто свернуть в небольшой переулок, который появился недавно. Бывало едешь в каком-нибудь тоннеле, навигатор говорит: «Поверните направо», а поворачивать некуда, справа стена 🙂

Но у гугл карт есть и большие плюсы. В отличие от Яндекса, который ориентирован в основном на Россию и ближнее зарубежье, Google Maps может показать самые отдаленные уголки нашей планеты.

Вставить карту от гугл (Google Maps) на сайт можно так же как в предыдущем способе.

  • С использованием виджета конструктора, если таковой поддерживает ваш конструктор сайта;
  • При помощи плагина;
  • С использованием API;

Использование виджета конструктора для вставки гугл карты (Google Maps) на сайт.

Я не любитель конструкторов. Поддерживает ли ваш конструктор эту технологию, можно узнать у тех поддержки. На uCoz такой виджет присутствует, это знаю точно.

Вставка карты Гугл на сайт WordPress при помощи плагина.

Вывести карту от гугл (Google Maps) на сайт WordPress можно при помощи плагина MapPress Easy Google Maps. После установки и активации плагина, на экране добавления новой статьи, появиться раздел «MapPress».

Для создания новой карты, нужно кликнуть по кнопке «New Map».

new map

И в появившемся окне заполнить информацию – название карты, размер и маркер. К тому же есть возможность вставки своей картинки, которая будет появляться при клике по маркеру.

Вот пример, как будет выглядеть карта от гугл, выводимая плагином MapPress Easy Google Maps:

карта гугл плагин

Добавление карты Гугл на сайт при помощи Google Maps.

Это еще один способ добавить карту Гугл на сайт. Для этого находим в Гугл картах необходимый населенный пункт, затем нажимаем на значок шестеренки в правом нижнем углу, и во всплывшем окне выберете раздел «Поделитесь с друзьями или получите код карты».
Затем необходимо скопировать код и вставить на сайт.

Выглядеть такая карта будет вот так:

Google Maps

Как установить карту проезда на сайт?

Для реализации этой цели, больше всего мне понравился конструктор Яндекс Карты. Как я уже упомянул выше, на странице конструктора есть инструкция по созданию и добавлению карты проезда на сайт. Но все же давайте вкратце опишу сам процесс.

Страница конструктора карт от Яндекс доступна по ссылке — https://tech.yandex.ru/maps/tools/constructor.

Для создания карты проезда, введите в поисковую строку название населенного пункта. Конструктор сам найдет нужное место. Наша задача только немного отредактировать карту и задать схему проезда.

При необходимости сразу измените масштаб карты.

новая карта

Теперь воспользуемся панелью инструментов. Можно отметить несколько точек (маркеров), изменить их цвет и задать описание.

расстановка маркеров

При помощи инструмента «рисование линий», нужно нарисовать маршрут проезда к объекту.

маршрут на карте

Инструмент «Рисование многоугольников» позволит отметить какую-то область на карте.

отметка отдельной площади

При помощи инструмента «Изменение размеров карты» можно подогнать ее под размер вашей web страницы.

И в заключение нужно ввести название карты проезда, сохранить ее и получить код, который можно вставить на сайт.

код карты Яндекс

Как видите все очень просто.

Карта метро на сайт

Вставить карту метро на сайт можно двумя способами.

Первый способ вставить статичную карту метро на сайт — просто сделать скриншот, затем в фотошопе сделать необходимые пометки, если таковые имеются и вставить картинку на сайт.

Второй способ вставить интерактивную карту метро на сайт – вывести ее во фрейме с сервиса Яндекс Метро.

Буду признателен, если кто-то подскажет другой способ!

nazyrov.ru

Код для вставки Google Map, чтобы повысить ценность вашего сайта

Если вы добавите расположение на ваш веб-сайт, то посетителям будет легче запомнить место и найти к нему дорогу. Если вы добавите карту на свой сайт, то посетители определенно лучше запомнят ваше местоположение и смогут легче до вас доберутся. Многие владельцы сайтов интересуются, как вставить Google Maps в Joomla, вот краткое руководство, которое поможет вам добавить карту Google на сайт.

Ниже перечислены шаги, которые помогут вам сделать это очень просто, и успешно добавить карты Google на сайт с нашим генератором Google Maps:

  • Выберите адрес, по которому вы хотите, чтобы посетители вас нашли, и добавьте карту расположения на сайт.
  • Выберите тип карты: спутниковый, гибрид или местность. Посмотрите внимательно, какой тип лучше подходит именно вам.
  • Укажите ширину и высоту, чтобы сделать ее подходящей для вашего сайта.
  • После того, как вы закончили с этими настройками, нажмите на кнопку “Сгенерировать мой код” под нашим инструментом. Кроме того, вы можете выбрать полный код, нажав “>> Нажмите здесь – Нажмите Ctrl + C <<“
  • И, наконец, вставьте HTML-код в исходный код вашего веб-сайта. Пожалуйста, обратите внимание, что вы можете вставлять карты Google в разных частях вашего сайта, таких как статьи, информация/страницы контактов или виджеты.

Преимущества внедрения карты Google на веб-сайт

Если вы вставите карты Google на веб-сайт, то клиентам будет удобно вас найти. Если им понравится ваш продукт, услуга или идея, и они захотят связаться с вами лично, то они смогут легко вас посетить. Не каждый посетитель вашего сайта будет достаточно терпелив, чтобы искать ваш адрес на карте. Тем не менее, если вы добавите карту Google на сайт, тогда им не потребуется прилагать дополнительные усилия, чтобы определить ваше местоположение и направление.

Благодаря размещению карты, вам удастся создать интерфейс, который будет визуально насющен и больше понравится пользователям. Такой интерфейс будет стимулировать ваших пользователей на взаимодействие с вами и, таким образом, создавать более прочные связи. С новым API Google, добавление карты Google на ваш сайт стало очень простым, и даже новичок сможет легко это сделать. Карты полностью настраиваемые, и поэтому вы сможете изменять различные свойства в соответствии со своими предпочтениями.

embedgooglemaps.com


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector