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


297

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

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 & т.е. = UTF-8 & кд = 1 & геокод = FT5MUQIdIDlp-W & сплит = 0 & LL = 38,882147, -76,99017 & шп = 0.01064,0.027874 & г = 16 & iwloc = А

JQuery или PHP предпочтены или просто любая полезная информация об этом.

Ответы:


681

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

https://maps.google.com/?q=1200 Пенсильвания Авеню С.Е., Вашингтон, округ Колумбия, 20003

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:

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 

7
Как я могу создать с широтой и долготой?
Надеем gc

4
Кажется, что этот метод немного ненормальный, если пользователь использует новые Google Карты. Чтобы создать ссылку, которая заставляет полученную страницу появляться в классическом режиме, просто добавьте ее &output=classicк своей ссылке. Так что все это будет выглядеть так:http://maps.google.com/?q=1200%20Pennsylvania%20Ave%20SE,%20Washington,%20District%20of%20Columbia,%2020003&output=classic
Мэтт

4
@Matt Как дела, дрянь? Кроме того, output = classic не будет существовать вечно, а что, если пользователь предпочитает новые карты?
Крис Б

2
Есть ли какой-нибудь способ получить метку на карте через URL?
Блоха

5
Это до сих пор отлично работает (спасибо @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дает мне антикварный магазин в NC
Генри

67

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

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

@ Майкл Джаспер, спасибо за ваш код ... он дал мне карту в div ... но моя проблема в том, что информация о булавках становится всплывающей ... что я не хочу. так что вы можете научить меня, как не открывать окно информации о пин-коде .?????.thnx заранее ...
Shwet

3
Обратите внимание, что <address>тег HTML5 предназначен не для предоставления почтового адреса, а для предоставления контактной информации, связанной с контентом (обычно автором). developer.mozilla.org/en-US/docs/Web/HTML/Element/address
Neograph734

Отличный ответ! Спасибо, что поделился. Я не уверен последствия этого, но это работало даже без encodeURIComponent().
moreirapontocom

12

Фев 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/

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


хотя пример работает, я не смог воссоздать это для немецкого адреса. Я закончил тем, что реализовал ответ Криса Б. (... /? Q = термин).
gl03

К счастью, теперь это работает и для немецких адресов. См: google.com/maps/place/...
Янник Schuchmann



2

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

$('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>.

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

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

Тогда это будет работать просто отлично.


Я использовал ваше решение в своем проекте, просто настроив ваш код под свои нужды. Это работает на данный момент.
Mycodingproject

2

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

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

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

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


Меня устраивает. Скопируйте этот код для вставки и вставьте на свой сайт.
Кабир Хоссейн

1

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

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

http://mapof.it/

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


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

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


1
encodeURIComponent - это JavaScript, вы должны использовать urlencode ($ address);
ximi

1

Лучший способ - использовать эту строку:

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"

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

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


1

У меня была похожая проблема, когда мне нужно было выполнить это для каждого адреса на сайте (каждый из них обернут в адресную метку). Этот бит 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/


2
Вместо того, чтобы вручную пытаться URL-адрес экранировать строку, вы можете использовать encodeURIComponentвместо.
Самуил

0

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

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


Это сейчас приводит к 404, к сожалению.
Даррен Монахан

1
Сожалею. Этот комментарий очень старый ... Я сомневаюсь, что версия API, которая использовалась в этом вопросе, все еще существует, но вот то, на что ссылалась ссылка: web.archive.org/web/20110420023220/https:// code.google.com/apis/…
Эд Мичам

0

Метод замены C # обычно работает для меня:

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

0

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

  1. найдите свой адрес на maps.google.com
  2. нажмите на значок шестеренки в правом нижнем углу
  3. нажмите "поделиться или вставить карту"
  4. установите флажок короткого URL и вставьте результат в href.
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.