Simple Map

This example creates a map that’s centered on Sydney, New South Wales, Australia.

TypeScript

JavaScript

CSS

HTML

         index.html

Try Sample

Clone Sample

Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.

git clone -b sample-map-simple https://github.com/googlemaps/js-samples.git cd js-samples npm i npm start

Other samples can be tried by switching to any branch beginning with sample- SAMPLE_NAME .

git checkout sample-SAMPLE_NAME npm i npm start

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2023-07-28 UTC.

Источник

Maps JavaScript API

Build dynamic, interactive, deeply customized maps, location, and geospatial experiences for your web apps.

Get Started

Get started with Google Maps Platform

Follow the Google Maps Platform getting started guide to create an account, generate an API key, and start building.

Build your first map with a marker

Customize the style of your map

Customize just about every aspect of the map, including roads, geographical features, points of interest, and more.

Add info windows to your markers

Features

Map types

Localization

Markers

UI controls

Events

WebGL overlay

Info windows

Shapes

Custom overlays

Ground overlays

Data layer

Custom styling

Tilt & rotation

Marker clustering

Heatmaps

Libraries

Libraries overview

Drawing library

Geometry library

Places library

Local Context library (beta)

Visualization library

Services

Directions service

Distance Matrix service

Elevation service

Geocoding service

Maximum Zoom Imagery service

Street View service

Example apps

Searching for Places

Styling the map for dark mode

Customizing marker icons

Using custom overlays

Displaying a traffic layer

Tilting & rotating the map

Help & support

Stack Overflow

Get help. Give Help. Build Maps karma.

Issue Tracker

Report a bug or open a feature request.

Platform status

Find out about platform incidents and outages.

Support

Get help from the Google Maps Platform team.

Last updated 2023-06-21 UTC.

Источник

Google Maps API

Картографический сервис – зачем это? Ну например, я 10 лет жил в нашей маленькой провинции, а потом взял и понаехал в Москву, и всё для меня так ново. А где магазины, боулинг, кафешки, парки отдыха – надо знать же, где тратить московскую зарплату. Но вот беда, как узнать? Раньше был справочник «Желтые страницы» и там была карта и всё по адресам. Чтобы найти что-то уходило масса времени. Сейчас стало всё в разы проще. Вот прекрасный пример: http://www.pushkino.org/. Но это далеко не всё.
Я могу отслеживать погоду, пожары, пробки (кстати!) в реальном времени.
Мой заказчик может не вводить свой адрес, а попросту отметить его на карте и я буду знать куда доставить ему товар – какое классное решение, не надо всего этого – «Проспект маршала Блюхера, 43, г. Санкт-Петербург, Россия».

Задача для примера

Вывести карту (надо же!)
Задать город
Переместить карту к городу
Маркером указать адрес
Добавить информации
Вывести карту (надо же!)
Сохранить маркер с иноформацией (при клике на него вывести ее)
Избежать нагромождения (т.е. сделать кластеризацию) маркеров.

Как делать?

Ключ API

Ключ API нужен для использования работы с картой, т.е. при запросе всех их скриптов и сервисов в параметры нужно добавлять &key=[тут наш ключ]. Впрочем для http://localhost он не нужен. Получить его надо тут: http://code.google.com/apis/maps/signup.html. Кстати, работает и без него на сайте, но может это временно.
Для v.3 не нужен

Map\Marker\InfoWindow

Для работы нам понадобится 3 основных объекта. Первое – это карта.
Карта создается очень просто. У нас есть какой-то определенный контейнер:

function initialize() < var myLatlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = < zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP >var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); >

center: myLatlng – это координаты центра карты
zoom – это увеличение при инициализации
mapTypeId – тип (политическая, физическая, гибрид)
Карта готова!

Второе — это метки:

var marker = new google.maps.Marker(< position: myLatlng, map: map, title:"Hello World!" >);

position – собственно координаты метки
map – на какую карту метку поместить
title – при наведении мыши будет писать “Hello World!”.

var contentString = 'Тут всё то про что должно быть рассказано
'; var infowindow = new google.maps.InfoWindow(< content: contentString >); var marker = new google.maps.Marker(< position: myLatlng, map: map, title: 'Uluru (Ayers Rock)' >); google.maps.event.addListener(marker, 'click', function() < infowindow.open(map,marker); >);

content – содержимое в метке

google.maps.event.addListener(marker, 'click', function() < infowindow.open(map,marker); >);

— при клике на метку, показать окно с информацией, на карте map с привязкой к marker.

Geocoding

По наименованию чего-то, найти это на карте и сообщить координаты
По координатам, сообщить всё что находится на этих координатах.

< "status": "OK", "results": [ < "types": [ "locality", "political" ], "formatted_address": "город Иваново, Ивановская область, Россия", - полный адрес "address_components": [ < - составляющие адреса "long_name": "город Иваново", "short_name": "город Иваново", "types": [ "locality", "political" ] >, < "long_name": "Ивановский район", "short_name": "Ивановский район", "types": [ "administrative_area_level_2", "political" ] >, < "long_name": "Ивановская область", "short_name": "Ивановская область", "types": [ "administrative_area_level_1", "political" ] >, < "long_name": "Россия", "short_name": "RU", "types": [ "country", "political" ] >], "geometry": < "location": < - местонахождение "lat": 56.9924086, "lng": 40.9677888 >, "location_type": "APPROXIMATE", "viewport": < - размеры "southwest": < "lat": 56.9699256, "lng": 40.9265167 >, "northeast": < "lat": 57.0148916, "lng": 41.0090609 >>, "bounds": < - границы "southwest": < "lat": 56.9699256, "lng": 40.9265167 >, "northeast": < "lat": 57.0148916, "lng": 41.0090609 >> > > ] >

Вся прелесть в том, что можно в address параметре передавать значение на любом языке(Ivanovo, Іваново, ), еще лучше, что для Санкт-Петербурга прокатывает «Спб» и «Питер». Правда есть и недочеты: мой родной город Ивано-Франковск упорно называет Ивано-Франковськ, на украинский манер.
Вторая возможность, это по координатам узнать адрес:

< "status": "OK", "results": [ < "types": [ "street_address" ], "formatted_address": "Красная пл., 3, город Москва, Россия, 109012", "address_components": [ < "long_name": "3", "short_name": "3", "types": [ "street_address" ] >, < "long_name": "Красная пл.", "short_name": "Красная пл.", "types": [ "route" ] >, < "long_name": "Тверской", "short_name": "Тверской", "types": [ "sublocality", "political" ] >, < "long_name": "город Москва", "short_name": "город Москва", "types": [ "locality", "political" ] >, < "long_name": "АО Центральный", "short_name": "АО Центральный", "types": [ "administrative_area_level_2", "political" ] >, < "long_name": "Москва", "short_name": "Москва", "types": [ "administrative_area_level_1", "political" ] >, < "long_name": "Россия", "short_name": "RU", "types": [ "country", "political" ] >, < "long_name": "109012", "short_name": "109012", "types": [ "postal_code" ] >], "geometry": < "location": < "lat": 55.7546971, "lng": 37.6215214 >, "location_type": "ROOFTOP", "viewport": < "southwest": < "lat": 55.7515495, "lng": 37.6183738 >, "northeast": < "lat": 55.7578447, "lng": 37.6246690 >> > >, < .

Супер! Для того чтобы указать свой адрес, можно просто кликнуть на свой дом, добавить квартиру – и всё. Иногда это не срабатывает, например, если дома стоят вплотную друг к другу и считываются как 1 объект, а не 2-3, адрес у них будет один. Особенно плохо, когда они находятся на пересечении улиц, и один дом относится к одной улице, а второй – к перпендикулярной, но думаю по необходимости – можно указать улицу, а дом и квартиру уже вбить. Очень удобное для смартфонов решение.
Кстати, не используйте jquery $.getJSON для получения данных, используйте класс Geocoder (http://code.google.com/apis/maps/documentation/javascript/reference.html#Geocoder), он работает лучше (т.е. это означает что getJSON у меня не работает).

А теперь о не очень хорошем. Geocoder – насколько клевая функция, что пользоваться ею можно только 2500 запросов в день. Google предлагает Google API Key Premier от 10000$ в год, и тогда ограничение будет в 100 тыс. запросов в день, причем куча всяких «клевых» дополнений, но я их не могу себе позволить.

Markercluster

Когда слишком много маркеров — это выглядит конечно ужасно. Поэтому хорошо бы делать кластеризацию всех этих маркеров. Тут на Хабре я видел уже обсуждение по этому поводу: http://habrahabr.ru/blogs/google/28621/
В общем, есть отличный инструмент (а тут их целый набор http://code.google.com/apis/maps/articles/toomanymarkers.html) который помогает сделать так, чтобы толпы маркеров не пугали нас.
До:

После:

Это именно то что нам надо.
Эту библиотеку можно скачать тут: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/
Как использовать.
Добавляем библиотеку

Составляем массив маркеров, не добавляя в карту:

var markers = []; var marker = new google.maps.Marker(< position: latlng >); markers.push(marker); markerClusterer = new MarkerClusterer(_this.map, markers, < maxZoom: 13, gridSize: 50, styles: null >);

maxZoom – максимальный зум при котором мы еще группируем маркеры, дальше – уже нет.
gridSize – размер ячеек сетки, чем меньше значение, тем меньше сетка группировки
styles – дополнительные стили

Код из примера

собственно страница
получить все маркеры (в json)
загрузить файл (через ajaxUploader) и получить ссылку для картинки
сохранить в базу данных маркер (на выходе json result = ok)

this.getZoom = function (bounds) < var width = $(".map").width(); var height = $(".map").height(); var dlat = Math.abs(bounds.getNorthEast().lat() - bounds.getSouthWest().lat()); var dlon = Math.abs(bounds.getNorthEast().lng() - bounds.getSouthWest().lng()); var max = 0; if (dlat >dlon) < max = dlat; >else < max = dlon; >var clat = Math.PI * Math.abs(bounds.getSouthWest().lat() + bounds.getNorthEast().lat()) / 360.; var C = 0.0000107288; var z0 = Math.ceil(Math.log(dlat / (C * height)) / Math.LN2); var z1 = Math.ceil(Math.log(dlon / (C * width * Math.cos(clat))) / Math.LN2); //18 – это максимальный zoom для google.maps return 18 - ((z1 > z0) ? z1 : z0); >

Функция для «прыжка» маркера:

this.toggleBounceMarker = function() < if (_this.setMarker.getAnimation() != null) < _this.setMarker.setAnimation(null); >else < _this.setMarker.setAnimation(google.maps.Animation.BOUNCE); >>

this.SetAddresses = function (results) < $(".address_list").show(); $(".address_list").empty(); var addressText = _this.ComposeAddress(results[0]); . >//Составить строку адреса по первому результату this.ComposeAddress = function (item) < retAddress = ""; $.each(item.address_components, function (i, address_item) < var isOk = false; $.each(address_item.types, function (j, typeName) < //не будем брать значения адреса улицы и локали (города) - город потом будет в administrative_level_2 if (typeName != "street_address" && typeName != "locality") < isOk = true; >>); if (isOk) < if (retAddress == "") < retAddress = address_item.long_name; >else < retAddress = retAddress + ", " + address_item.long_name; >> >); return retAddress; >

Итого

Google Maps API – очень классная и удобная штука, которая легка в использовании и понимании. Единственно, что плохо – так это слабое покрытие регионов в России, так что сервисам, которые предполагается использовать в глубинке google.maps пока мало интересен, а вот для больших городов (особенно Москва и Питер), а также для Украины – всё отлично.
Geocoding – очень полезная вещь и при правильном использовании может стоить тех денег, что за нее просят (ну или Microsoft или Яндекс ~~подоспеет с аналогом~~ уже есть. Хотя насколько я знаю, картографическая информация стоит бешеных вложений.)

Пример\исходники

На живой пример можно глянуть тут: http://cocosanka.ru/map (может перестать работать если будет достигнут лимит в Geocoding). Вводите город, потом перетаскиваете маркер, потом загружаете картинку и сохранить. При клике на маркеры выводятся картинки.

Источник