Как преобразовать адрес в ссылку на Google Maps (НЕ MAP)

Посмотрев (погуглил) какое-то время в сети, я не нашел ничего, что могло бы содержать адрес вроде:

1200 Pennsylvania Ave SE, Вашингтон, округ Колумбия, 20003

и преобразует его в интерактивную ссылку:

http://maps.google.com/maps?f=q&source=s_q&hl=en&q=1200+Пенсильвания+Ave+SE,+Washington,+District+of+Columbia,+20003&sll=37.0625,-95.677068&sspn=44.118686,114.169922&ie=UTF8&cd=1&geocode=FT5MUQIdIDlp-w&split=0&ll=38.882147,-76.99017&spn=0.01064,0.027874&z=16&iwloc=A

jQuery или PHP предпочтительнее или просто любая полезная информация по этому поводу.


person Phill Pafford    schedule 19.08.2009    source источник


Ответы (14)


Как насчет этого?

https://maps.google.com/?q=1200%20Пенсильвания%20Ave%20SE,%20Washington,%20District%20of%20Columbia,%2020003

https://maps.google.com/?q=term

Если у вас широта и долгота, используйте приведенный ниже URL

https://maps.google.com/?ll=latitude,longitude

Пример: maps.google.com/?ll=38.882147,-76.99017.

ОБНОВЛЕНИЕ

С 2017 года у Google появился официальный способ создания кросс-платформенных URL-адресов Google Maps:

https://developers.google.com/maps/documentation/urls/guide.

Вы можете использовать такие ссылки, как

https://www.google.com/maps/search/?api=1&query=1200%20Pennsylvania%20Ave%20SE%2C%20Washington%2C%20District%20of%20Columbia%2C%2020003 
person Chris B    schedule 19.08.2009
comment
Просто хотел стрелку ВВЕРХ. - person Si8; 22.05.2013
comment
Как я могу творить с помощью широты и долготы? - person nadeem gc; 06.07.2013
comment
Кажется, что этот метод немного ненадежен, если пользователь использует новые Карты Google. Чтобы создать ссылку, по которой результирующая страница будет отображаться в классическом режиме, просто добавьте &output=classic к своей ссылке. Таким образом, все это будет выглядеть так: http://maps.google.com/?q=1200%20Pennsylvania%20Ave%20SE,%20Washington,%20District%20of%20Columbia,%2020003&output=classic - person Matt; 31.01.2014
comment
@ Мэтт Как это круто? Кроме того, output = classic не останется навсегда, а что, если пользователь предпочитает новые карты? - person Chris B; 07.02.2014
comment
@ChrisB Может быть, это что-то локальное для меня? Приносим извинения, если это так. В Chrome я иногда вижу, что Google Maps перенаправляет и теряет параметр q, не показывая правильное место на карте. В Safari я также видел, как он показывает правильное место на карте, но не опускает булавку правильно. Настройка вывода на классический, похоже, не выявила этих проблем, но я определенно согласен, что это бандаж, а не правильное решение. - person Matt; 07.02.2014
comment
Есть ли способ добавить значок на карту через URL-адрес? - person Flea; 05.07.2014
comment
Это по-прежнему отлично работает (спасибо @ChrisB!), Но похоже, что собственный формат Google Maps теперь https://www.google.com/maps/place/1200 Pennsylvania Ave SE, Washington, District of Columbia, 20003 ¶ Для некоторых мест вы можете использовать только имя ... но maps.google.com/?q= и www.google.com/maps/place/ не обязательно будут возвращать те же результаты: https://www.google.com/maps/place/White House расширяется до https://www.google.com/maps/place/The+White+House,+1600+Pennsylvania+Ave+NW,+Washington,+DC+20500, но https://maps.google.com/?q=White House дает мне антикварный магазин в Северной Каролине. - person henry; 04.11.2014
comment
@nadeemgc то же самое, просто добавьте их через запятую, например, maps.google.com/?q = широта, долгота, например, maps.google.com/?q=26.503295, -80.068543 Только попробовал и работает хорошо - person Jesus Rodriguez; 01.06.2016
comment
@nadeemgc это новый формат https://www.google.com/maps/preview/@<latitude>,<longitude>,<zoom level>z - person BoCyrill; 22.07.2016
comment
Работает очень хорошо, ребята, и новый API довольно гибкий. Я рекомендую прочитать документы API для Google Places, это даст вам большой контроль над гиперссылками, которые вы создаете (в качестве примера), чтобы вы могли отправлять по месту, текстовому поиску, радиусу для ограничения поиска и т. Д., Проверьте документы: developers.google.com/maps/documentation/javascript/places - person Trevor; 13.11.2016
comment
@ChrisB: Будет ли это работать как для Android, так и для iPhone во всех браузерах? - person VBMali; 21.12.2016
comment
Большое спасибо - person bhavesh vala; 26.06.2017
comment
Есть ли способ указать время отправления при запросе маршрута? - person user2952819; 01.12.2017

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

Я написал короткую функцию jQuery, которая автоматически превращает любые теги <address> в ссылки на карты Google.

См. демонстрацию здесь.

$(document).ready(function () {
   //Convert address tags to google map links - Michael Jasper 2012
   $('address').each(function () {
      var link = "<a href='http://maps.google.com/maps?q=" + encodeURIComponent( $(this).text() ) + "' target='_blank'>" + $(this).text() + "</a>";
      $(this).html(link);
   });
});

Бонус:

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

Просмотреть полную демонстрацию

$(document).ready(function(){
    $("address").each(function(){                         
        var embed ="<iframe width='425' height='350' frameborder='0' scrolling='no'  marginheight='0' marginwidth='0' src='https://maps.google.com/maps?&amp;q="+ encodeURIComponent( $(this).text() ) +"&amp;output=embed'></iframe>";
        $(this).html(embed);             
    });
});
person Michael Jasper    schedule 26.10.2011
comment
@Michael Jasper, спасибо за ваш код ... он получил карту в div ... но моя проблема в том, что информация о контакте появляется во всплывающем окне ... чего я не хочу. так что вы можете рассказать мне, как заранее не открывать окно с информацией о контактах .?????.thnx ... - person Shwet; 17.04.2013
comment
Имейте в виду, что тег HTML5 <address> не предназначен для указания почтового адреса, а для предоставления контактной информации, связанной с содержанием (обычно автора). developer.mozilla.org/en-US/docs/Web/ HTML / элемент / адрес - person Neograph734; 20.07.2015
comment
Отличный ответ! Спасибо, что поделился. Я не уверен в последствиях этого, но он работал даже без encodeURIComponent(). - person moreirapontocom; 19.08.2017

Февраль 2016 г .:

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

1 Начало ссылки выглядит так: https://www.google.com/maps/place/

2 Затем вы указываете свой адрес:

  • Используйте + вместо любого пробела.
  • Поставьте запятую перед и за городом.
  • Включите почтовый индекс / почтовый индекс и провинцию / штат.
  • Замени любой # ничем.
  • Замените любые ++ или ++++ на одиночный +

3 Поместите адрес после места /

4 Затем поставьте косую черту в конце.

ПРИМЕЧАНИЕ: косая черта в конце была важна. После того, как пользователь щелкает ссылку, Google продолжает добавлять к URL-адресу дополнительные данные, и они делают это после этой косой черты.

Рабочий пример для этого вопроса:

https://www.google.ca/maps/place/1200+Penylvania+Ave+SE,+Washington,+DC+20003/

Надеюсь, это поможет.

person Colin P    schedule 23.02.2016
comment
пока пример работает, мне не удалось воссоздать это для немецкого адреса. В итоге я реализовал ответ Криса Б. (... /? Q = term). - person gl03; 02.05.2016
comment
К счастью, теперь это работает и для немецких адресов. См .: google.com/maps/place/ - person Yannick Schuchmann; 29.11.2016

А как насчет этого: http://support.google.com/maps/bin/answer.py?hl=en&answer=72644

person Nolmë Informatique    schedule 15.06.2012
comment
Спасибо за этот красивый и простой способ встроить собственную карту. - person Ralph Willgoss; 06.08.2013

Лучше всего использовать эту строку:

var mapUrl = "http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=16900+North+Bay+Road,+Sunny+Isles+Beach,+FL+33160&amp;aq=0&amp;sll=37.0625,-95.677068&amp;sspn=61.282355,146.513672&amp;ie=UTF8&amp;hq=&amp;hnear=16900+North+Bay+Road,+Sunny+Isles+Beach,+FL+33160&amp;spn=0.01628,0.025663&amp;z=14&amp;iwloc=A&amp;output=embed"

Не забудьте при необходимости заменить первый и второй адреса.

Вы можете посмотреть образец работы

person Eugene Bosikov    schedule 07.01.2013

У меня была аналогичная проблема, когда мне нужно было выполнить это для каждого адреса на сайте (каждый заключен в адресный тег). Этот кусочек jQuery у меня сработал. Он захватит каждый тег <address> и обернет его ссылкой на карты Google с адресом, который содержит тег!

$("address").each(function(){

    var address = $(this).text().replace(/\,/g, '');
    var url = address.replace(/\ /g, '%20');

    $(this).wrap('<a href="http://maps.google.com/maps?q=' + url +'"></a>');

}); 

Рабочий пример -> https://jsfiddle.net/f3kx6mzz/1/

person Jon Hendershot    schedule 17.03.2015
comment
Вместо того, чтобы вручную пытаться экранировать URL-адрес строки, вы можете использовать encodeURIComponent. - person Samuel; 04.06.2015

Заимствуя решения Майкла Джаспера и Джона Хендершота, я предлагаю следующее:

$('address').each(function() {
    var text = $(this).text();

    var q    = $.trim(text).replace(/\r?\n/, ',').replace(/\s+/g, ' ');
    var link = '<a href="http://maps.google.com/maps?q=' + encodeURIComponent(q) + '" target="_blank"></a>';

    return $(this).wrapInner(link);
});

Это решение предлагает следующие преимущества по сравнению с ранее предложенными решениями:

  • Он не удаляет HTML-теги (например, <br> теги) в <address>, поэтому форматирование сохраняется.
  • Он правильно кодирует URL
  • Он сжимает лишние пробелы, чтобы сгенерированный URL был короче, чище и удобочитаем после кодирования.
  • Он создает допустимую разметку (решение мистера Хендершота создает <a><address></address></a>, что недопустимо, потому что элементы уровня блока, такие как <address>, не разрешены внутри встроенных элементов, таких как <a>.

Предостережение: если ваш тег <address> содержит элементы уровня блока, такие как <p> или <div>, этот код JavaScript будет создавать недопустимую разметку (поскольку тег <a> будет содержать эти элементы уровня блока). Но если вы просто делаете что-то вроде этого:

<address>
  The White House
  <br>
  1600 Pennsylvania Ave NW
  <br>
  Washington, D.C.  20500
</address>

Тогда все будет нормально.

person 7over21    schedule 10.09.2015
comment
Я использовал ваше решение в своем проекте, просто настроив ваш код под свои нужды. Пока работает. - person Mycodingproject; 15.12.2019

Вот что я нашел в одной из статей о Google Maps:

  1. Откройте Карты Google.
  2. Убедитесь, что карта или изображение просмотра улиц, которое вы хотите встроить, отображаются на карте.
  3. В верхнем левом углу щелкните главное меню ☰.
  4. Нажмите Поделиться или встроить карту.
  5. В верхней части появившегося окна выберите вкладку Встроить карту.
  6. Выберите нужный размер, затем скопируйте код и вставьте его в исходный код своего веб-сайта или блога.

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

введите здесь описание изображения

person PCM    schedule 15.09.2015
comment
Меня устраивает. Скопируйте этот встроенный код и вставьте на свой сайт. - person Kabir Hossain; 22.10.2016

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

https://www.google.com/maps/@LATITUDE,LONGITUDE,ZOOMNUMBERz?hl=LANGUAGE

Например: https://www.google.com/maps/@31.839472,54.361167,18z?hl=en

person Mohammad Fathi MiMFa    schedule 09.08.2018

На http://www.labnol.org/internet/tools/short-urls-for-google-maps/6604/ они показывают короткий URL-адрес, который работает довольно хорошо

URL-адреса Google Maps довольно громоздки, особенно при отправке через мгновенное сообщение, твит или электронную почту. MapOf.it предоставляет вам быстрый способ связи с Google Maps, просто указав адрес местоположения в качестве параметра поиска.

http://mapof.it/

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

person Custom Web    schedule 12.05.2011

http://maps.google.com/maps?q=<?php echo urlencode($address); ?> 

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

person dhpratik    schedule 08.01.2013
comment
encodeURIComponent - это javascript, вы должны использовать urlencode ($ address); - person ximi; 05.02.2013

Кроме того, любой, кто хочет вручную ввести URLENCODE адрес: http://code.google.com/apis/maps/documentation/webservices/index.html#BuildingURLs.

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

person Ed Meacham    schedule 20.05.2011
comment
К сожалению, теперь это приводит к ошибке 404. - person Darren Monahan; 26.02.2017
comment
Извините. Этот комментарий очень старый ... Я сомневаюсь, что версия API, которая использовалась в этом вопросе, все еще существует, но вот на что ссылалась ссылка: http://web.archive.org/web/20110420023220/https://code.google.com/apis/maps/documentation/webservices/index.html - person Ed Meacham; 01.03.2017

У меня обычно работает метод C # Replace:

foo = "http://maps.google.com/?q=" + address.Text.Replace(" ","+");
person springerkc    schedule 12.01.2014

Я только что нашел это и хочу поделиться ..

  1. найдите свой адрес на maps.google.com
  2. щелкните значок шестеренки в правом нижнем углу
  3. нажмите "поделиться или встроить карту"
  4. установите флажок короткого URL и вставьте результат в href ..
person Unknown-Me    schedule 18.02.2015