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

Question

После просмотра (поиска в Google) в Интернете некоторое время, я не могу найти ничего, что принимает адрес, такой как:

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

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

http://maps.google.com/maps?f=q&source=s_q&hl=en&q=1200+Pennsylvania+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 или просто любая полезная информация об этом.

Answer 1

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

https://maps.google.com/?q=1200 Pennsylvania Ave SE, Вашингтон, округ Колумбия, 20003

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

Если у вас лат-лонг, используйте ниже URL

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

Пример: maps.google.com /? Ll = 38,882147, -76,99017

UPDATE

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

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 

Answer 2

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

Я написал короткую функцию 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);             
    });
});

Answer 3

Фев, 2016:

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

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

2 Затем вы вводите свой адрес:

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

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

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

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

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

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

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

Answer 4

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

Answer 5

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

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

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

Answer 6

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

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

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

Answer 7

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

$('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 был короче, чище и удобочитаемее после кодирования
• Создает допустимую разметку (решение Mr.Hendershot создает <a><address></address></a>, что недопустимо, поскольку элементы уровня блока, такие как <address>, не допускаются внутри встроенных элементов, таких как <a>.

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

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

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

Answer 8

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

$("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/

Answer 9

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

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

Answer 10

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

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

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

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