Cómo convertir una dirección en un enlace de Google Maps (NO MAPA)


297

Después de buscar (buscar en Google) en la web por un tiempo, no puedo encontrar nada que tenga una dirección como:

1200 Pennsylvania Ave SE, Washington, Distrito de Columbia, 20003

y lo convierte en un enlace en el que se puede hacer clic:

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

Se prefiere jQuery o PHP o simplemente cualquier información útil sobre esto.

Respuestas:


681

¿Qué tal esto?

https://maps.google.com/?q=1200 Pennsylvania Ave SE, Washington, Distrito de Columbia, 20003

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

Si tiene lat-long, use la URL a continuación

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

Ejemplo: maps.google.com/?ll=38.882147,-76.99017

ACTUALIZAR

A partir del año 2017, Google ahora tiene una forma oficial de crear URL de Google Maps multiplataforma:

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

Puedes usar enlaces como

https://www.google.com/maps/search/?api=1&query=1200%20Pennsylvania%20Ave%20SE%2C%20Washington%2C%20District%20of%20Columbia%2C%2020003 

77
¿Cómo puedo crear con Latitud y Longitud?
nadeem gc

44
Parece que este método es un poco inestable si el usuario está usando el nuevo Google Maps. Para crear un enlace que obligue a la página resultante a aparecer en modo clásico, solo agregue &output=classicsu enlace. Así que todo se vería así:http://maps.google.com/?q=1200%20Pennsylvania%20Ave%20SE,%20Washington,%20District%20of%20Columbia,%2020003&output=classic
Matt

44
@ Matt ¿Qué tal flakey? Además, output = classic no se quedará para siempre, ¿y si el usuario prefiere los nuevos mapas?
Chris B

2
¿Alguna forma de obtener el pin de caída en el mapa a través de la URL?
Flea

55
Esto todavía funciona muy bien (@ChrisB gracias!) Pero parece propio formato de Google Maps es ahora https://www.google.com/maps/place/1200 Pennsylvania Ave SE, Washington, District of Columbia, 20003 ¶ En algunos lugares se puede salir con el uso de sólo el nombre ... pero maps.google.com/?q=y www.google.com/maps/place/no necesariamente los mismos resultados: https://www.google.com/maps/place/White Housese expande a https://www.google.com/maps/place/The+White+House,+1600+Pennsylvania+Ave+NW,+Washington,+DC+20500pero https://maps.google.com/?q=White Houseme da una tienda de antigüedades en Carolina del Norte
Henry

67

Sé que llego muy tarde al juego, pero pensé que contribuiría por el bien de la posteridad.

Escribí una breve función jQuery que convertirá automáticamente cualquier <address>etiqueta en enlaces de mapas de Google.

Vea una demostración aquí.

$(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);
   });
});

Prima:

También me encontré con una situación que requería generar mapas incrustados a partir de los enlaces, y aunque compartiría con futuros viajeros:

Ver una demostración completa

$(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);             
    });
});

@Michael Jasper gracias por tu código ... me consiguió el mapa en div ... pero mi problema es que la información del pin es emergente ... que no quiero. Entonces, ¿pueden guiarme sobre cómo no abrir el cuadro de información del pin ??????.thnx por adelantado ...
Shwet

3
Tenga en cuenta que la <address>etiqueta HTML5 no está destinada a proporcionar una dirección postal, sino a proporcionar información de contacto relacionada con el contenido (generalmente el autor). developer.mozilla.org/en-US/docs/Web/HTML/Element/address
Neograph734

¡Gran respuesta! Gracias por compartir. No estoy seguro de las consecuencias, pero funcionó incluso sin el encodeURIComponent().
moreirapontocom

12

Febrero de 2016:

Necesitaba hacer esto en función de los valores de base de datos ingresados ​​por el cliente y sin un generador de lat / long. Google realmente le gusta lat / long en estos días. Esto es lo que aprendí:

1 El comienzo del enlace se ve así: https://www.google.com/maps/place/

2 Luego pones tu dirección:

  • Use un + en lugar de cualquier espacio.
  • Pon una coma delante y detrás de la ciudad.
  • Incluya el postal / zip y la provincia / estado.
  • Reemplace cualquier # con nada.
  • Reemplace cualquier ++ o ++++ con single +

3 Ponga la dirección después del lugar /

4 Luego coloque una barra al final.

NOTA: La barra al final fue importante. Después de que el usuario hace clic en el enlace, Google continúa y agrega más a la URL y lo hacen después de esta barra.

Ejemplo de trabajo para esta pregunta:

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

Espero que eso ayude.


Si bien el ejemplo funciona, no pude recrear esto para una dirección alemana. Terminé implementando la respuesta de Chris B (... /? Q = term).
gl03

Afortunadamente, esto ahora también funciona para direcciones alemanas. Ver: google.com/maps/place/…
Yannick Schuchmann el



2

Tomando prestado de las soluciones de Michael Jasper y Jon Hendershot, ofrezco lo siguiente:

$('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);
});

Esta solución ofrece los siguientes beneficios sobre las soluciones ofrecidas anteriormente:

  • No eliminará las etiquetas HTML (por ejemplo, <br>etiquetas) dentro <address>, por lo que se conserva el formato
  • Codifica correctamente la URL
  • Aplasta los espacios adicionales para que la URL generada sea más corta, limpia y legible después de la codificación.
  • Produce un marcado válido (la solución de Mr.Hendershot crea <a><address></address></a>que no es válida porque los elementos de nivel de bloque, como por ejemplo <address>, no están permitidos dentro de elementos en línea como <a>.

Advertencia : si su <address>etiqueta contiene elementos de nivel de bloque como <p>o <div>, entonces este código JavaScript producirá un marcado no válido (porque la <a>etiqueta contendrá esos elementos de nivel de bloque). Pero si solo estás haciendo cosas como esta:

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

Entonces funcionará bien.


Usé su solución en mi proyecto simplemente ajustando su código a mis necesidades. Funciona por ahora.
Mycodingproject

2

Esto es lo que encontré en uno de los artículos de Google Maps:

  1. Abre Google Maps .
  2. Asegúrate de que el mapa o la imagen de Street View que deseas insertar aparezca en el mapa.
  3. En la esquina superior izquierda, haz clic en el menú principal ☰.
  4. Haz clic en Compartir o insertar mapa .
  5. En la parte superior del cuadro que aparece, elige la pestaña Insertar mapa .
  6. Elija el tamaño que desee, luego copie el código y péguelo en el código fuente de su sitio web o blog.

Nota : Si usa Mapas en modo Lite , no podrá incrustar un mapa. Tenga en cuenta que la información de tráfico y alguna otra información de Maps podrían no estar disponibles en el mapa incrustado.

ingrese la descripción de la imagen aquí


Esto funciona para mi. Copie este código de inserción y péguelo en su sitio web.
Kabir Hossain

1

En http://www.labnol.org/internet/tools/short-urls-for-google-maps/6604/ muestran una URL corta que funciona bastante bien

Las URL de Google Maps son bastante difíciles de manejar, especialmente cuando se envían mensajes instantáneos, tweets o correos electrónicos. MapOf.it le proporciona una forma rápida de vincular a Google Maps simplemente especificando la dirección de la ubicación como parámetro de búsqueda.

http://mapof.it/

Lo utilicé para algunas aplicaciones que he diseñado y funcionó de maravilla.


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

la codificación ur conver y agrega todos los elementos adicionales como espacios y todo. para que pueda obtener fácilmente el código de texto plano de db y usarlo sin preocuparse por los caracteres especiales que se agregarán


1
encodeURIComponent es javascript, deberías estar usando urlencode ($ dirección);
ximi

1

La mejor manera es usar esta línea:

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"

Recuerde reemplazar la primera y la segunda dirección cuando sea necesario.

Puedes mirar la muestra de trabajo


1

Tuve un problema similar en el que necesitaba lograr esto para cada dirección en el sitio (cada una envuelta en una etiqueta de dirección). Este bit de jQuery funcionó para mí. ¡Tomará cada <address>etiqueta y la envolverá en un enlace de Google Maps con la dirección que contiene la etiqueta!

$("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>');

}); 

Ejemplo de trabajo -> https://jsfiddle.net/f3kx6mzz/1/


2
En lugar de intentar manualmente que la URL escape de la cadena, puede usarla encodeURIComponenten su lugar.
Samuel

0

Además, cualquiera que desee URLENCODE manualmente la dirección: http://code.google.com/apis/maps/documentation/webservices/index.html#BuildingURLs

Puede usar eso para crear reglas específicas que cumplan con los estándares de GM.


Esto ahora lleva a un 404, desafortunadamente.
Darren Monahan

1
Lo siento. Este comentario es muy antiguo ... Dudo que la versión de la API que se estaba utilizando en esta pregunta todavía esté disponible, pero esto es lo que el enlace usó para hacer referencia: web.archive.org/web/20110420023220/https:// code.google.com/apis/…
Ed Meacham

0

El método C # Reemplazar generalmente funciona para mí:

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

0

Acabo de encontrar esto y me gusta compartir ...

  1. busca tu dirección en maps.google.com
  2. haz clic en el ícono de ajustes en la esquina inferior derecha
  3. haga clic en "compartir o insertar mapa"
  4. haga clic en la casilla de verificación url corta y pegue el resultado en href ..
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.