Bir adresi Google Haritalar Bağlantısına dönüştürme (HARİTA DEĞİL)


297

Bir süre web'de (Google) inceledikten sonra, aşağıdaki gibi bir adres alan hiçbir şey bulamıyorum:

1200 Pennsylvania Ave SE, Washington, Columbia Bölgesi, 20003

ve tıklanabilir bir bağlantıya dönüştürür:

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 & yani = UTF-8-cd = 1 ve coğrafi kod = FT5MUQIdIDlp-w ve bölme = 0 veya II = 38,882147, -76,99017 ve spn = 0.01064,0.027874 ve z = 16 & iwloc = bir

jQuery veya PHP tercih etti veya sadece bu konuda yararlı bilgiler.

Yanıtlar:


681

Buna ne dersin?

https://maps.google.com/?q=1200 Pennsylvania Ave SE, Washington, Columbia Bölgesi, 20003

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

Uzun süreniz varsa aşağıdaki URL'yi kullanın

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

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

GÜNCELLEME

2017 yılı itibariyle Google'ın artık platformlar arası Google Haritalar URL'leri oluşturmak için resmi bir yolu var:

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

Gibi bağlantıları kullanabilirsiniz

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

7
Enlem ve Boylam ile nasıl oluşturabilirim?
nadeem gc

4
Kullanıcı yeni Google Haritalar'ı kullanıyorsa, bu yöntemin biraz kesintili olduğu anlaşılıyor. Ortaya çıkan sayfayı klasik modda görünmeye zorlayan bir bağlantı oluşturmak için bağlantınıza eklemeniz yeterlidir &output=classic. Yani her şey şöyle görünecekti:http://maps.google.com/?q=1200%20Pennsylvania%20Ave%20SE,%20Washington,%20District%20of%20Columbia,%2020003&output=classic
Matt

4
@Matt Nasıl pul pul? Ayrıca, output = classic sonsuza kadar kalmaz ve kullanıcı yeni haritaları tercih ederse ne olur?
Chris B

2
URL üzerinden harita üzerinde bırakma iğnesini almanın herhangi bir yolu var mı?
Flea

5
(! Teşekkürler @ChrisB) Bu hala iyi çalışıyor ancak Google Maps'in kendi formatı artık gibi görünüyor https://www.google.com/maps/place/1200 Pennsylvania Ave SE, Washington, District of Columbia, 20003 sadece adını kullanarak paçayı bazı yerler için ¶ ... ama maps.google.com/?q=ve www.google.com/maps/place/mutlaka aynı sonuçları döndürmez: https://www.google.com/maps/place/White HouseGenişlediğinde için https://www.google.com/maps/place/The+White+House,+1600+Pennsylvania+Ave+NW,+Washington,+DC+20500ancak https://maps.google.com/?q=White Housebana NC antika bir mağaza verir
henry

67

Oyuna çok geç kaldığımı biliyorum, ama gelecek nesiller adına katkıda bulunacağımı düşündüm.

Herhangi bir <address>etiketi otomatik olarak Google Haritalar bağlantılarına dönüştürecek kısa bir jQuery işlevi yazdım .

Burada bir demo izleyin.

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

Bonus:

Ayrıca bağlantılardan gömülü haritalar oluşturmak için çağrılan bir durumla karşılaştım ve gelecekteki gezginlerle paylaşacak olsam da:

Tüm demosu görüntüle

$(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 ur kodu için thanx ... bana div haritası var ... ama benim sorunum pin bilgi açılır ... hangi dnt istiyorum. bu yüzden u pin bilgi kutusu açmak için nasıl bana rehberlik edebilirim ??????.thnx önceden ...
Shwet

3
HTML5 <address>etiketinin posta adresi sağlamak için değil, içerikle (genellikle yazar) ilgili iletişim bilgilerini sağlamak için tasarlandığını lütfen unutmayın . developer.mozilla.org/tr-TR/docs/Web/HTML/Element/address
Neograph734

Mükemmel cevap! Paylaşım için teşekkürler. Bu konuda sonuçları emin değilim ama olmadan bile çalıştı encodeURIComponent().
moreirapontocom

12

Şubat, 2016:

Bunu istemci girilen veritabanı değerleri dayalı ve bir lat / uzun jeneratör olmadan yapmak gerekiyordu. Google bu günlerde enlem / boylamı gerçekten çok seviyor. İşte öğrendiklerim:

1 Bağlantının başlangıcı şöyle görünür: https://www.google.com/maps/place/

2 Sonra adresinizi koyun:

  • Herhangi bir boşluk yerine + kullanın.
  • Şehrin önüne ve arkasına virgül koyun.
  • Posta / posta kodunu ve il / eyaleti ekleyin.
  • Herhangi bir # yerine hiçbir şey koy.
  • Herhangi bir ++ veya ++++ öğesini single + ile değiştirin

3 Adresi mekanın arkasına koyun /

4 Sonra sonuna eğik çizgi koyun.

NOT: Sondaki eğik çizgi önemliydi. Kullanıcı bağlantıyı tıkladıktan sonra Google devam eder ve URL'ye daha fazlasını ekler ve bu eğik çizgiden sonra bunu yapar.

Bu soru için çalışma örneği:

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

Umarım bu yardımcı olur.


örnek çalışırken, bir Alman adresi için bunu yeniden oluşturamadım. Sonunda Chris B'nin cevabını uyguladım (... /? Q = terim).
gl03

Neyse ki bu şimdi Alman adresleri için de çalışıyor. Bakınız: google.com/maps/place/…
Yannick Schuchmann



2

Michael Jasper ve Jon Hendershot'ın çözümlerinden ödünç alarak şunları sunuyorum:

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

Bu çözüm, daha önce sunulan çözümlere göre aşağıdaki avantajları sunar:

  • <br>İçindeki HTML etiketlerini (ör. Etiketler) kaldırmaz <address>, bu nedenle biçimlendirme korunur
  • URL'yi düzgün şekilde kodlar
  • Oluşturulan URL'nin kodlandıktan sonra daha kısa, daha temiz ve insan tarafından okunabilir olması için fazladan boşlukları ezer
  • Geçerli işaretleme üretir (Mr.Hendershot'ın çözümü <a><address></address></a>geçersizdir, çünkü blok düzeyi öğelere gibi <address>satır içi öğelere izin verilmez <a>.

Uyarı : <address>Etiketiniz <p>veya gibi blok düzeyinde öğeler içeriyorsa <div>, bu JavaScript kodu geçersiz işaretlemede üretilir (çünkü <a>etiket bu blok düzeyindeki öğeleri içerecektir). Ama sadece böyle şeyler yapıyorsanız:

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

O zaman iyi çalışır.


Çözümü projemde sadece kodumu ihtiyaçlarıma göre değiştirerek kullandım. Şimdilik çalışıyor.
Mycodingproject

2

Google Haritalar makalelerinden birinden bulduğum şey bu:

  1. Google Haritalar'ı .
  2. Yerleştirmek istediğiniz haritanın veya Street View resminin haritada gösterildiğinden emin olun.
  3. Sol üst köşedeki ana menüye ☰ tıklayın.
  4. Click paylaş veya yerleştirin harita .
  5. Görüntülenen kutunun üst kısmındaki Yerleştir haritasını seçin sekmesini seçin.
  6. İstediğiniz boyutu seçin, ardından kodu kopyalayın ve web sitenizin veya blogunuzun kaynak koduna yapıştırın.

Not : Haritalar'ı Basit modda kullanıyorsanız , harita yerleştiremezsiniz. Trafik bilgilerinin ve diğer bazı Haritalar bilgilerinin katıştırılmış haritada bulunmayabileceğini unutmayın.

resim açıklamasını buraya girin


Benim için çalışıyor. Bu yerleştirme kodunu kopyalayın ve web sitenize yapıştırın.
Kabir Hossain


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

ur kodlaması dönüştürür ve boşluklar ve tümü gibi tüm ekstra öğeleri ekler. böylece u kolayca db'den uçak metin kodunu alabilir ve eklenecek özel karakterler hakkında endişelenmeden kullanabilirsiniz


1
encodeURIComponent javascript'tir, urlencode ($ address) kullanmalısınız;
ximi

1

En iyi yol bu satırı kullanmaktır:

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"

Gerektiğinde birinci ve ikinci adresleri değiştirmeyi unutmayın.

İş örneğine bakabilirsiniz


1

Sitede her adres için (her bir adres etiketine sarılmış) bunu gerçekleştirmek için gereken benzer bir sorun vardı. Bu jQuery biraz benim için çalıştı. Her <address>etiketi alır ve etiketin içerdiği adresle bir google maps bağlantısına sarar!

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

}); 

Çalışma örneği -> https://jsfiddle.net/f3kx6mzz/1/


2
Dizeden manuel olarak URL'den kaçmaya çalışmak encodeURIComponentyerine kullanabilirsiniz .
Samuel


0

C # Değiştir yöntemi genellikle benim için çalışır:

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

0

Ben sadece buldum ve paylaşmak istiyorum ..

  1. maps.google.com adresinde adresinizi arayın
  2. sağ alt taraftaki dişli çark simgesini tıklayın
  3. "haritayı paylaşma veya yerleştirme" yi tıklayın
  4. kısa url onay kutusunu tıklayın ve sonucu href'e yapıştırın.
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.