{"id":14145,"date":"2012-01-20T07:19:04","date_gmt":"2012-01-20T12:19:04","guid":{"rendered":"http:\/\/info.template-help.com\/?p=14145"},"modified":"2020-02-03T03:24:10","modified_gmt":"2020-02-03T08:24:10","slug":"drupal-how-to-add-google-map","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/drupal-how-to-add-google-map.html","title":{"rendered":"Drupal. How to add Google Map"},"content":{"rendered":"<p>\r\n<p>This tutorial shows how to add Google Map to Drupal based website. Google Map can be added to Drupal using the GMap module. <\/p>\r\n<p><!--more--><\/p>\r\n<h3>Install GMap module<\/h3>\r\n<p>1. Visit the official website at <em><strong>http:\/\/drupal.org\/project\/gmap<\/strong><\/em> and download the<strong> tar.gz<\/strong> package for your version of Drupal. <\/p>\r\n<p>It contains:<\/p>\r\n<ul>\r\n<li><strong>GMap:<\/strong> provides the GMap API, integration with Views and Location, and GMap macros.<\/li>\r\n<li><strong>GMap Location:<\/strong> Provides a map of all a site&#8217;s nodes and a map of all of the site users.<\/li>\r\n<li><strong>GMap Taxonomy:<\/strong> Allows you to display different map markers based on taxonomy of a specific node.<\/li>\r\n<li><strong>GMap Macro Builder:<\/strong> Provides a GUI for building &#8220;macros&#8221; (a text-based way of describing arbitrary GMaps).<\/li>\r\n<\/ul>\r\n<p><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2012\/01\/drupal-add-gmap-1.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2012\/01\/drupal-add-gmap-1-300x129.jpg\" alt=\"\" title=\"drupal-add-gmap-1\" width=\"300\" height=\"129\" class=\"aligncenter size-medium wp-image-14146\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/01\/drupal-add-gmap-1-300x129.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/01\/drupal-add-gmap-1.jpg 632w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>2. Login to Drupal as administrator and go to <strong>Modules<\/strong> section. <\/p>\r\n<p>3. Above the modules table click <strong>Install New Module<\/strong> button. <\/p>\r\n<p><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2012\/01\/drupal-add-gmap-2.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2012\/01\/drupal-add-gmap-2-300x204.jpg\" alt=\"\" title=\"drupal-add-gmap-2\" width=\"300\" height=\"204\" class=\"aligncenter size-medium wp-image-14147\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/01\/drupal-add-gmap-2-300x204.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/01\/drupal-add-gmap-2.jpg 985w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>4. Using the <strong>Upload a module or theme archive to install<\/strong> option Upload and Install the downloaded <strong>tar.gz<\/strong> package<\/p>\r\n<p>5. When the installation is complete you&#8217;ll be able to add and configure the google map block. <\/p>\r\n<p class=\"attention\">Please don&#8217;t forget to input the <strong>Google Map API <\/strong>into the module configuration. Get Google Maps API<\/p>\r\n<ul>\r\n<li>Open Modules page<\/li>\r\n<li>Locate GMap module in the modules table (Location section)<\/li>\r\n<li>Click <strong>Configure<\/strong> button and input the <strong>API Key<\/strong><\/li>\r\n<li>Click <strong>Save<\/strong> button at the bottom of the page<\/li>\r\n<\/ul>\r\n<p>&nbsp;<\/p>\r\n<h3>Add Google Map Block<\/h3>\r\n<p>1. Log in to Drupal as administrator<\/p>\r\n<p>2. Go to <strong>Structure &gt; Blocks<\/strong><\/p>\r\n<p>3. Above the blocks table click <strong>Add block<\/strong> button<\/p>\r\n<p><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2012\/01\/drupal-add-gmap-3.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2012\/01\/drupal-add-gmap-3-300x142.jpg\" alt=\"\" title=\"drupal-add-gmap-3\" width=\"300\" height=\"142\" class=\"aligncenter size-medium wp-image-14148\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/01\/drupal-add-gmap-3-300x142.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/01\/drupal-add-gmap-3.jpg 987w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>4. Input block Title. <\/p>\r\n<p>5. In the <strong>Text Format<\/strong> field select <strong>GMap<\/strong> and click <strong>Create a macro <\/strong>link<\/p>\r\n<p><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2012\/01\/drupal-add-gmap-4.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2012\/01\/drupal-add-gmap-4.jpg\" alt=\"\" title=\"drupal-add-gmap-4\" width=\"282\" height=\"74\" class=\"aligncenter size-full wp-image-14149\" \/><\/a><\/p>\r\n<p>6. At the appeared screen Configure the map. <a href=\"\/help\/drupal-google-map-configuration.html\" target=\"_blank\">Learn More<\/a><\/p>\r\n<p>7. Copy the Macro code and paste it into the <strong>Block body<\/strong> field. <\/p>\r\n<p>8. Define what pages the block will be available at. <\/p>\r\n<p>8. Save block. <\/p>\r\n<p>Now at the blocks listing page you can put the block to the required position. <\/p>\r\n<p>&nbsp;<\/p>\r\n<\/p>\r\n<p><!--more--> <\/p>\r\n<p><!--more--> <\/p>\r\n<p><!--more--><\/p>\r\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>This tutorial shows how to add Google Map to Drupal based website. Google Map can be added to Drupal using the GMap module.<\/p>\n","protected":false},"author":2,"featured_media":14151,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[723],"tags":[2564,618,593,1135,800,557],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/14145"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=14145"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/14145\/revisions"}],"predecessor-version":[{"id":86190,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/14145\/revisions\/86190"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/14151"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=14145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=14145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=14145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}