{"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":"2021-04-28T15:52:40","modified_gmt":"2021-04-28T13:52:40","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

Today I will show you 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 instead of an empty address. Let me give you an example Of the Prague Hospital<\/a> . Suppose we want to show information about its exact location.<\/p>\n\n<\/div><\/div>\n\n\n

Badly added Google map on website<\/h2>\n\n\n\n

We can enter the address: aleja Solidarno\u015bci 67, Praga, Warsaw<\/strong> and of course we will get a map with a punt as below. However, it is not the best solution for the place we want to indicate or, for example, our business whose address we want to indicate on our website, because such a selection does not provide detailed information<\/strong> our place name, website and rating. If someone saves the indicated location to their favorites (with an asterisk), they only save the address, not what is there. This is especially important in the case of several companies under one address. The method of entering the address itself does not show the facility \/ company that we want to indicate. The map we will place on the website will look like this – no information about the place.<\/p>\n\n\n\n

\"Google<\/figure>\n\n\n\n

How to add a Google map correctly?<\/h2>\n\n\n\n

Nothing hard. All we have to do is enter the name of the place we are looking for. In the example of the Prague Hospital, all you need is the “Prague Hospital”. And we already get information about the name of the facility, its website and ratings. Oh yes! Pay attention to the detailed information in the upper left corner under the search engine and the red indicator on the map – it is exactly at the point where the facility you are looking for and we can see the full name of the hospital.<\/p>\n\n\n\n

1. We mark our place on the Map<\/h3>\n\n\n\n
\"Google<\/figure>\n\n\n\n

2. Click “Share”.<\/h3>\n\n\n\n

In the right column under the name of the place we have round buttons, there we will find a button. We will see such a window. If we want to send a link to Google Maps in the same place as we see, we can use the shortened link or share it on Facebook or Twitter. We care about the second option that can be seen in this window, namely “Share maps”<\/p>\n\n\n\n

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

3. We generate the HTML code<\/h3>\n\n\n\n

At this point, we can generate a special HTML code that we can embed on our website.<\/p>\n\n\n\n

\"Google<\/figure>\n\n\n\n

3. We choose the size<\/h3>\n\n\n\n

We can choose one of the 3 ready sizes, or enter our own.<\/p>\n\n\n\n

\"Google<\/figure>\n\n\n\n

If we want to enter our own dimensions, just change the parameters<\/p>\n\n\n\n

width = “ 800<\/strong> “<\/em> – 800 is our width<\/p>\n\n\n\n

height = “ 600<\/strong> “<\/em> – 600 is our majesty<\/p>\n\n\n\n

By default, the values are given in pixels, I often use percentage notation.
For example width = “100%” height = “600 \u2033<\/em> allows me to keep the height of 600 pixels, and 100% of the width of the page, thanks to these parameters, the map is always adjusted to the width of the browser and it does not bulge, for example with small screens of phones or tablets, and it is not too narrow on large monitors. <\/p>\n\n\n\n

If you want to enter percentages, you have to copy the code first and then change the value from pixels to percentages. Since it cannot be done in the Google window, but it works fine on the website – I checked it myself.<\/p>\n\n\n\n

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

4. Copy the code to the website<\/h3>\n\n\n\n

There are many options here. If using WordPress<\/a> then just add a new “Custom HTML” block and paste the code there. If you use other solutions, you have to paste it in the right place or by editing a specific html page.<\/p>\n\n\n\n

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

If everything went as it should be, you can enjoy the Google map on your website. It is also the easiest way to add a map to the website. Unlike plugins and tools that actually allow you to edit the appearance of maps, they require additional API authorizations. If you have a lot of traffic, it may even be associated with additional fees. By using the way to add Google Map on website presented here, you don’t need to worry about it.<\/p>\n\n\n\n

If you want to add something more than just a Google Map to your website, see what they are Google Street View virtual walks.<\/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":"open","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":0,"href":"https:\/\/urbanflavour.pl\/en\/wp-json\/wp\/v2\/posts\/28913\/revisions"}],"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}]}}