{"id":90,"date":"2011-08-30T19:29:42","date_gmt":"2011-08-30T18:29:42","guid":{"rendered":"http:\/\/www.vennercorp.com\/blog\/?p=90"},"modified":"2012-01-08T13:45:53","modified_gmt":"2012-01-08T12:45:53","slug":"how-to-add-google-maps-to-your-website","status":"publish","type":"post","link":"http:\/\/www.vennercorp.com\/blog\/2011\/08\/30\/how-to-add-google-maps-to-your-website\/","title":{"rendered":"How to add Google Maps to your Website"},"content":{"rendered":"<p><strong>Why Add Google Maps to your site.<\/strong><\/p>\n<ol start=\"1\">\n<li>Google Maps is an easy and free way to add a map to your website, showing where your business\/shop\/office\/surgery etc is located or the area you cover.<\/li>\n<li>Google maps allow your visitors to zoom in and out and move the map around.<\/li>\n<li>By using Google Maps there is no need anymore to go out and buy a royalty free map or pay someone to draw one.<\/li>\n<\/ol>\n<figure id=\"attachment_91\" aria-describedby=\"caption-attachment-91\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.vennercorp.com\/blog\/wp-content\/uploads\/2011\/08\/google-maps.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-91\" title=\"How to add Google to your website\" src=\"http:\/\/www.vennercorp.com\/blog\/wp-content\/uploads\/2011\/08\/google-maps-300x161.png\" alt=\"How to add Google to your website\" width=\"300\" height=\"161\" srcset=\"http:\/\/www.vennercorp.com\/blog\/wp-content\/uploads\/2011\/08\/google-maps-300x161.png 300w, http:\/\/www.vennercorp.com\/blog\/wp-content\/uploads\/2011\/08\/google-maps.png 449w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-91\" class=\"wp-caption-text\">How to add Google to your website<\/figcaption><\/figure>\n<p><strong>Add Google Maps.<\/strong><\/p>\n<p>Before you make any changes to your website or add any code you need to get your key from Google &amp; get the coordinates to centre the map on, you will need to add them to your code later.<\/p>\n<ul>\n<li>Go to http:\/\/code.google.com\/apis\/maps\/signup.html accept Google\u2019s terms and conditions and enter your domain name e.g. vennercorp.com into the box provided, then click Generate API Key.<\/li>\n<\/ul>\n<p>Copy the provided Key into notepad or your preferred software.<\/p>\n<ul>\n<li>Go to http:\/\/www.getlatlon.com\/, use this site to find your required position.<\/li>\n<\/ul>\n<p>Copy the Latitude, Longitude into notepad or your preferred software.<\/p>\n<p><strong>Code<\/strong><\/p>\n<p>Now add the following code to your website.<\/p>\n<ul>\n<li>Make sure it is placed in the header section of the HTML page above the &lt;body&gt; tag.<\/li>\n<li>Replace the KEY HERE for your key.<\/li>\n<li>Replace the -31.434259, 152.900294 for your saved Latitude, Longitude.<\/li>\n<li>To Zoom in or out on the MAP adjust the zoom level on setCenter, it is currently set to 15.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<pre><em>&lt;script src=\"http:\/\/maps.google.com\/maps?file=api&amp;amp;v=2&amp;amp;key=<strong>KEY HERE<\/strong>&amp;sensor=false\" type=\"text\/javascript\"&gt;&lt;\/script&gt;<\/em><\/pre>\n<p><em>\u00a0<\/em><\/p>\n<pre><em>&lt;script type=\"text\/javascript\"&gt;<\/em><\/pre>\n<pre><em>function initialize() {<\/em><\/pre>\n<pre><em>if (GBrowserIsCompatible()) {<\/em><\/pre>\n<pre><em>var map = new GMap2(document.getElementById(\"map_canvas\"));<\/em><\/pre>\n<pre><em>map.setCenter(new GLatLng(-31.434259, 152.900294), 15);<\/em><\/pre>\n<pre><em>map.setMapType(G_NORMAL_MAP)<\/em><\/pre>\n<pre><em>map.setUIToDefault();<\/em><\/pre>\n<pre><em>}<\/em><\/pre>\n<pre><em>}<\/em><\/pre>\n<pre><\/pre>\n<pre>&lt;\/script&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>Now place the following code at the point in the HTML were you would like the map to be displayed.<\/p>\n<p>To change the size of the map, edit the width and height as desired.<\/p>\n<pre><em>&lt;span id=\"map_canvas\" style=\"display: inline-block; width: 630px; height: 300px\"&gt;&lt;\/span&gt;<\/em><\/pre>\n<p>&nbsp;<\/p>\n<p>That\u2019s it, upload your changed website and test.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Why Add Google Maps to your site. Google Maps is an easy and free way to add a map to your website, showing where your business\/shop\/office\/surgery etc is located or the area you cover. Google maps allow your visitors to zoom in and out and move the map around. By using Google Maps there is&hellip; <a class=\"more-link\" href=\"http:\/\/www.vennercorp.com\/blog\/2011\/08\/30\/how-to-add-google-maps-to-your-website\/\">Continue reading <span class=\"screen-reader-text\">How to add Google Maps to your Website<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[68,61,57,74],"tags":[308,307,67],"class_list":["post-90","post","type-post","status-publish","format-standard","hentry","category-development","category-google","category-internet","category-website-2","tag-development","tag-google","tag-maps","entry"],"_links":{"self":[{"href":"http:\/\/www.vennercorp.com\/blog\/wp-json\/wp\/v2\/posts\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.vennercorp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.vennercorp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.vennercorp.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.vennercorp.com\/blog\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":4,"href":"http:\/\/www.vennercorp.com\/blog\/wp-json\/wp\/v2\/posts\/90\/revisions"}],"predecessor-version":[{"id":187,"href":"http:\/\/www.vennercorp.com\/blog\/wp-json\/wp\/v2\/posts\/90\/revisions\/187"}],"wp:attachment":[{"href":"http:\/\/www.vennercorp.com\/blog\/wp-json\/wp\/v2\/media?parent=90"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.vennercorp.com\/blog\/wp-json\/wp\/v2\/categories?post=90"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.vennercorp.com\/blog\/wp-json\/wp\/v2\/tags?post=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}