{"id":28913,"date":"2015-06-03T16:13:00","date_gmt":"2015-06-03T14:13:00","guid":{"rendered":"https:\/\/urbanflavour.pl\/google-map-on-website\/"},"modified":"2026-08-02T15:44:16","modified_gmt":"2026-08-02T13:44:16","slug":"google-map-on-website","status":"publish","type":"post","link":"https:\/\/urbanflavour.pl\/en\/google-map-on-website\/","title":{"rendered":"How to add a Google map to a website?"},"content":{"rendered":"
\n\n

Dzi\u015b poka\u017ce jak szybko doda\u0107 mapk\u0119 Google na stronie www tak by wy\u015bwietla\u0142a nazw\u0119 firmy i dok\u0142adny punkt z informacjami zawartymi w wizyt\u00f3wce Map Google zamiast pustego adresu. Pos\u0142u\u017c\u0119 si\u0119 przyk\u0142adem Szpitalu Praskiego<\/a>. Za\u0142\u00f3\u017cmy, \u017ce chcemy pokaza\u0107 informacje o jego dok\u0142adnej lokalizacji.<\/p>\n\n<\/div><\/div>\n\n\n

\u0179le dodana mapa Google na stronie internetowej<\/h2>\n\n\n\n

Mo\u017cemy wpisa\u0107 adres: aleja Solidarno\u015bci 67, Praga, Warszawa<\/strong> i oczywi\u015bcie otrzymamy mapk\u0119 z puntem jak poni\u017cej. Jednak nie jest najlepsze rozwi\u0105zanie dla miejsca kt\u00f3re chcemy wskaza\u0107 czy np. naszego biznesu kt\u00f3rego adres chcemy wskaza\u0107 na naszej stronie, poniewa\u017c takie zaznaczenie nie podaje szczeg\u00f3\u0142owych informacji<\/strong> o nazwie naszego miejsca, stronie internetowej i ocenie. Je\u015bli kto\u015b zapisze wskazan\u0105 lokalizacj\u0119 do ulubionych (za pomoc\u0105 gwiazdki), to zapisuje tylko adres, a nie to co si\u0119 tam znajduje. Jest to szczeg\u00f3lnie wa\u017cne w przypadku kilku firm pod jednym adresem. Metoda polegaj\u0105ca na wpisaniu samego adresu nie pokazuje plac\u00f3wki\/firmy kt\u00f3r\u0105 chcemy wskaza\u0107. Mapka kt\u00f3r\u0105 umie\u015bcimy na stronie wygl\u0105da\u0107 b\u0119dzie tak \u2013 brak informacji o miejscu.<\/p>\n\n\n\n

\"Mapa<\/figure>\n\n\n\n

Jak doda\u0107 mapk\u0119 Google poprawnie?<\/h2>\n\n\n\n

Nic trudnego. Wystarczy, \u017ce wpiszemy nazw\u0119 miejsca kt\u00f3rego szukamy. W przyk\u0142adzie Szpitalu Praskiego wystarczy tylko \u201eSzpital Praski\u201d. I ju\u017c dostajemy informacj\u0119 o nazwie plac\u00f3wki, jej stronie www, czy ocenach. O tak! Zwr\u00f3\u0107 uwag\u0119 na szczeg\u00f3\u0142owe informacje w lewym g\u00f3rnym rogu pod wyszukiwark\u0105 i czerwony wska\u017anik na mapie \u2013 jest dok\u0142adnie w tym punkcie gdzie szukana plac\u00f3wka i widzimy pe\u0142n\u0105 nazw\u0119 Szpitala.<\/p>\n\n\n\n

1. Zaznaczamy nasz lokal na Mapie<\/h3>\n\n\n\n
\"Mapa<\/figure>\n\n\n\n

2. Klikamy “Udost\u0119pnij”.<\/h3>\n\n\n\n

W prawej kolumnie pod nazw\u0105 miejsca mamy okr\u0105g\u0142e przyciski tam znajdziemy przycisk. Zobaczymy takie okno. Je\u015bli chcemy wys\u0142a\u0107 link do Map Google w tym samym miejscu kt\u00f3re widzimy, to mo\u017cemy skorzysta\u0107 ze skr\u00f3conego linku lub udost\u0119pni\u0107 go na Facebooku lub Twiterze. Nam zale\u017cy na drugiej opcji kt\u00f3r\u0105 wida\u0107 w tym oknie, a mianowicie “Udost\u0119pnij mapy”<\/p>\n\n\n\n

\"link<\/figure>\n\n\n\n

3. Generujemy kod HTML<\/h3>\n\n\n\n

W tym momencie, mo\u017cemy wygenerowa\u0107 specjalny kod HTML kt\u00f3ry mo\u017cemy osadzi\u0107 na naszej stronie www.<\/p>\n\n\n\n

\"Mapa<\/figure>\n\n\n\n

3. Wybieramy rozmiar<\/h3>\n\n\n\n

Mo\u017cemy wybra\u0107 jeden z 3 gotowych rozmiar\u00f3w, lub wpisa\u0107 w\u0142asny.<\/p>\n\n\n\n

\"Mapa<\/figure>\n\n\n\n

Je\u015bli chcemy wprowadzi\u0107 w\u0142asne wymiary to wystarczy zmieni\u0107 parametry<\/p>\n\n\n\n

width=\u201d800<\/strong>\u201e<\/em> \u2013 800 to nasza szeroko\u015b\u0107<\/p>\n\n\n\n

height=\u201d600<\/strong>\u201e<\/em> \u2013 600 to nasza wysoko\u015b\u0107<\/p>\n\n\n\n

Domy\u015blnie warto\u015bci podane s\u0105 w pixelach, ja stosuj\u0119 cz\u0119sto zapis procentowy.
Przyk\u0142adowo width=\u201d100%\u201d height=\u201d600\u2033 <\/em>pozwala mi zachowa\u0107 wysoko\u015b\u0107 600 pixeli, oraz 100% szeroko\u015bci strony, dzi\u0119ki takim parametrom mapk\u0119 mam zawsze dopasowan\u0105 do szeroko\u015bci przegl\u0105darki i nie rozpycha si\u0119 ona np przy ma\u0142ych ekranach telefon\u00f3w czy tablet\u00f3w, oraz nie jest za w\u0105ska na du\u017cych monitorach. <\/p>\n\n\n\n

Je\u015bli chcecie poda\u0107 procenty, musicie najpierw skopiowa\u0107 kod, a potem zmieni\u0107 warto\u015b\u0107 z pixeli na procenty. Poniewa\u017c w oknie Google nie mo\u017cna tego zrobi\u0107, ale na stronie dzia\u0142a bez problemu – sprawdzi\u0142em to sam.<\/p>\n\n\n\n

\"Mapa<\/figure><\/div>\n\n\n\n

4. Kopiujemy kod na stron\u0119 www<\/h3>\n\n\n\n

Tutaj opcji jest wiele. Je\u015bli korzystanie z WordPressa<\/a>, to wystarczy doda\u0107 nowy blok “Custom HTML” i tam wklei\u0107 kod. Je\u015bli korzystacie z innych rozwi\u0105za\u0144 musicie wklei\u0107 go w odpowiednim miejscu lub edytuj\u0105c konkretn\u0105 stron\u0119 html.<\/p>\n\n\n\n

\"dodawania<\/figure><\/div>\n\n\n\n

Je\u015bli wszystko posz\u0142o tak jak trzeba to mo\u017cecie cieszy\u0107 si\u0119 map\u0105 Google na swojej stronie. Jest to te\u017c najprostszy spos\u00f3b dodawania mapy na stronie. W odr\u00f3\u017cnieniu od wtyczek i narz\u0119dzi kt\u00f3re co prawd\u0105 pozwalaj\u0105 edytowa\u0107 wygl\u0105d map, to wymagaj\u0105 dodatkowych autoryzacji API. Je\u015bli macie du\u017cy ruch na stronie, to mo\u017ce si\u0119 to nawet wi\u0105za\u0107 z dodatkowymi op\u0142atami. Korzystaj\u0105c z przedstawionego tutaj sposobu na dodanie mapy Google na stronie internetowej, nie musicie si\u0119 o to martwi\u0107.<\/p>\n\n\n\n

Je\u015bli chcecie na swojej stronie doda\u0107 co\u015b wi\u0119cej ni\u017c tylko Map\u0119 Google, to zobaczcie czym s\u0105 wirtualne spacery Google Street View.<\/a><\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Learn how to quickly add a Google map on a website so that it displays the company name and the exact point with the information contained in the Google Maps business card.<\/p>\n","protected":false},"author":1,"featured_media":23925,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,36],"tags":[],"class_list":["post-28913","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-en","category-google-my-busines","infinite-scroll-item","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33"],"featured_image_urls_v2":{"full":["https:\/\/urbanflavour.pl\/wp-content\/uploads\/2020\/12\/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2.jpg",1920,1277,false],"thumbnail":["https:\/\/urbanflavour.pl\/wp-content\/uploads\/2020\/12\/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2-500x333.jpg",500,333,true],"medium":["https:\/\/urbanflavour.pl\/wp-content\/uploads\/2020\/12\/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2-830x552.jpg",830,552,true],"medium_large":["https:\/\/urbanflavour.pl\/wp-content\/uploads\/2020\/12\/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2.jpg",768,511,false],"large":["https:\/\/urbanflavour.pl\/wp-content\/uploads\/2020\/12\/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2-1024x681.jpg",1024,681,true],"1536x1536":["https:\/\/urbanflavour.pl\/wp-content\/uploads\/2020\/12\/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2.jpg",1536,1022,false],"2048x2048":["https:\/\/urbanflavour.pl\/wp-content\/uploads\/2020\/12\/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2.jpg",1920,1277,false],"gform-image-choice-sm":["https:\/\/urbanflavour.pl\/wp-content\/uploads\/2020\/12\/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2.jpg",300,200,false],"gform-image-choice-md":["https:\/\/urbanflavour.pl\/wp-content\/uploads\/2020\/12\/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2.jpg",400,266,false],"gform-image-choice-lg":["https:\/\/urbanflavour.pl\/wp-content\/uploads\/2020\/12\/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-2.jpg",600,399,false]},"post_excerpt_stackable_v2":"

Learn how to quickly add a Google map on a website so that it displays the company name and the exact point with the information contained in the Google Maps business card.<\/p>\n","category_list_v2":"Blog<\/a>, Google My Busines<\/a>","author_info_v2":{"name":"Marcin Krokowski","url":"https:\/\/urbanflavour.pl\/en\/author\/marcin_d3rfw32\/"},"comments_num_v2":"2 comments","_links":{"self":[{"href":"https:\/\/urbanflavour.pl\/en\/wp-json\/wp\/v2\/posts\/28913","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/urbanflavour.pl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/urbanflavour.pl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/urbanflavour.pl\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/urbanflavour.pl\/en\/wp-json\/wp\/v2\/comments?post=28913"}],"version-history":[{"count":2,"href":"https:\/\/urbanflavour.pl\/en\/wp-json\/wp\/v2\/posts\/28913\/revisions"}],"predecessor-version":[{"id":34908,"href":"https:\/\/urbanflavour.pl\/en\/wp-json\/wp\/v2\/posts\/28913\/revisions\/34908"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/urbanflavour.pl\/en\/wp-json\/wp\/v2\/media\/23925"}],"wp:attachment":[{"href":"https:\/\/urbanflavour.pl\/en\/wp-json\/wp\/v2\/media?parent=28913"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/urbanflavour.pl\/en\/wp-json\/wp\/v2\/categories?post=28913"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/urbanflavour.pl\/en\/wp-json\/wp\/v2\/tags?post=28913"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}