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 основных объекта. Первое – это карта.
Карта создается очень просто. У нас есть какой-то определенный контейнер:

<span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"map_canvas"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span>

1 2	<span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"map_canvas"</span>></span><span class="tag"></<span class="title">div</span>></span>

Подключаем скрипт:

<span class="tag">&lt;<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"http://maps.google.com/maps/api/js?sensor=false"</span>&gt;</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span>

Инициализируем карту:

<span class="function"><span class="keyword">function</span> <span class="title">initialize</span><span class="params">()</span> {</span>     
    <span class="keyword">var</span> myLatlng = <span class="keyword">new</span> google.maps.LatLng(-<span class="number">34.397</span>, <span class="number">150.644</span>);
    <span class="keyword">var</span> myOptions = {
        zoom: <span class="number">8</span>,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    <span class="keyword">var</span> map = <span class="keyword">new</span> google.maps.Map(document.getElementById(<span class="string">"map_canvas"</span>), myOptions); 
}

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 – тип (политическая, физическая, гибрид)
Карта готова!

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

<span class="keyword">var</span> marker = <span class="keyword">new</span> google.maps.Marker({
    position: myLatlng,
    map: map,
    title:<span class="string">"Hello World!"</span> 
});

var marker = new google.maps.Marker({

position: myLatlng,

map: map,

title:"Hello World!"

});

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

InfoWindow

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

var contentString = '<div id="content">Тут всё то про что должно быть рассказано</div>';

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, <span class="string">'click'</span>, <span class="keyword">function</span>() {   infowindow.open(map,marker); });

1 2	google.maps.event.addListener(marker, <span class="string">'click'</span>, <span class="keyword">function</span>() { infowindow.open(map,marker); });

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

Geocoding

Geocoding – это просто отличная библиотека, которая позволяет делать всего 2 вещи:

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

Запрос выглядит так. Например, мы хотим узнать где находится Иваново. Пишем запрос:
http://maps.googleapis.com/maps/api/geocode/json?address=Иваново&sensor=false&language=ru

И в ответе приходит:

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

{

"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, Іваново, <тут была арабская вязь>), еще лучше, что для Санкт-Петербурга прокатывает «Спб» и «Питер». Правда есть и недочеты: мой родной город Ивано-Франковск упорно называет Ивано-Франковськ, на украинский манер.
Вторая возможность, это по координатам узнать адрес:

http://maps.googleapis.com/maps/api/geocode/json?latlng=55.75320193022759,37.61922086773683&sensor=false&language=ru
получаем:

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

{

"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/
Как использовать.
Добавляем библиотеку

<span class="tag">&lt;<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"/Media/script/map/markerclusterer_packed.js"</span>&gt;</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span>

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

<span class="keyword">var</span> markers = []; 
<span class="keyword">var</span> marker = <span class="keyword">new</span> google.maps.Marker({    
    position: latlng
});
markers.push(marker);
markerClusterer = <span class="keyword">new</span> MarkerClusterer(_<span class="keyword">this</span>.map, markers, 
{ 
    maxZoom: <span class="number">13</span>,
    gridSize: <span class="number">50</span>,
    styles: <span class="literal">null</span> 
});

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 – дополнительные стили

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

Я не буду тут расписывать что как собрать, собственно все инструменты готовы, дам ссылки на исходники, и прокомментирую некоторые вещи.
Cерверного кода (asp.net mvc) там очень мало, всего 4 запроса:

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

Основной код jquery ( тут полностью: cocosanka.ru/media/script/map/map.js ) Там есть комментарии, и всё такое.
Некоторые функции требующие пояснения:

Вычисление значения Zoom по границам
(взято отсюда: http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/43958790eafe037f/66e889029c555bee?fwc=2)

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

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);

}

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

<span class="keyword">this</span>.toggleBounceMarker = <span class="keyword">function</span>()
{
    <span class="keyword">if</span> (_<span class="keyword">this</span>.setMarker.getAnimation() != <span class="literal">null</span>) {
        _<span class="keyword">this</span>.setMarker.setAnimation(<span class="literal">null</span>);
    } <span class="keyword">else</span> {
        _<span class="keyword">this</span>.setMarker.setAnimation(google.maps.Animation.BOUNCE);
    }   
}

this.toggleBounceMarker = function()

{

if (_this.setMarker.getAnimation() != null) {

_this.setMarker.setAnimation(null);

} else {

_this.setMarker.setAnimation(google.maps.Animation.BOUNCE);

}

Получение адреса:

<span class="keyword">this</span>.SetAddresses = <span class="function"><span class="keyword">function</span> <span class="params">(results)</span> 
{</span>
     $(<span class="string">".address_list"</span>).show();
     $(<span class="string">".address_list"</span>).empty();
     <span class="keyword">var</span> addressText = _<span class="keyword">this</span>.ComposeAddress(results[<span class="number">0</span>]); ...  
}   

<span class="comment">//Составить строку адреса по первому результату   </span>
<span class="keyword">this</span>.ComposeAddress = <span class="function"><span class="keyword">function</span> <span class="params">(item)</span> {</span>
     retAddress = <span class="string">""</span>;     
     $.each(item.address_components, <span class="function"><span class="keyword">function</span> <span class="params">(i, address_item)</span> {</span>
        <span class="keyword">var</span> isOk = <span class="literal">false</span>;
        $.each(address_item.types, <span class="function"><span class="keyword">function</span> <span class="params">(j, typeName)</span> {</span> 
            <span class="comment">//не будем брать значения адреса улицы и локали (города) - город потом будет в administrative_level_2</span>
            <span class="keyword">if</span> (typeName != <span class="string">"street_address"</span> &amp;&amp; typeName != <span class="string">"locality"</span>) {
                isOk = <span class="literal">true</span>;
            }
        });
        <span class="keyword">if</span> (isOk) { 
            <span class="keyword">if</span> (retAddress == <span class="string">""</span>) {
                retAddress = address_item.long_name; 
            } <span class="keyword">else</span> { 
                retAddress = retAddress + <span class="string">", "</span> + address_item.long_name;
            }  
        } 
    });
    <span class="keyword">return</span> retAddress;  
}

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). Вводите город, потом перетаскиваете маркер, потом загружаете картинку и сохранить. При клике на маркеры выводятся картинки.

Исходники: https://bitbucket.org/chernikov/citylocator

Источник: http://habrahabr.ru/post/110460/

https://corp2.info/razrabotka-i-sozdanie-sajtov-internet-magazinov-veb-proektov-kiev-1038.html

К2® Cloud ERP Info

K2, Python, PHP, Linux

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

Как делать?

Ключ API

Map\Marker\InfoWindow

Geocoding

Markercluster

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

Итого

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

Be the first to comment

Leave a Reply Скасувати відповідь