At present, webmasters are allowed to insert different kinds of contents into the website apart from the standard blog posts and images, such as the video, music, form, forum, and game. Besides these options, many webmasters prefer to add a Google map into the site to indicate the geographical locations of some places clearly. Honestly speaking, the Google map is pretty useful for some touring websites or hotel websites as visitors can know the detailed locations easily. Besides, if you are going to set up an online presence for your restaurant, coffee shop, or physical store, the integration of Google map can help readers find you with little effort.
In the following, we’d like to introduce the simple steps telling you how to add Google map to website within five minutes.
Method One: Make Use of Related Plugin
When you decide to add some extra features or sections into your website, the utilization of plugins or modules is the most effective method. You only need to choose a reliable and easy-to-use option, download and install the tool, and configure the settings based on your needs. Thus, the tool can integrate the Google map with your automatically. In the following, we have listed the top three options for the most popular and widely-used CMSs of WordPress, Drupal, and Joomla.
For WordPress – Comprehensive Google Map Plugin
This is a WordPress plugin allowing you to showcase the custom Google maps with ease. It helps you set the markers clearly using words, images and links as you wish. Also, the map generated is totally customizable, and you can decide the style using the simple interface without the need of programming and coding.
For Joomla – Embed Google Map
This is a popular Joomla extension for embedding a Google map to your website. It makes the whole process an easy task. Upon successful installation, you only need to enter the address that you want to display on the map inside the plugin tag, then the marker can indicate your targeted location clearly. Also, you are allowed to decide the language, map size, layout, zoom level, and the types of the Google map freely.
For Drupal – Simple Google Maps
This Drupal module simply offers a quick and simple way for you to attach the Google map with your site. One of the highlights of this module is that is has a special formatter, with which Google can recognize the place via your plain text. Note that the map can be either dynamic or static.
Make Use of Map-Embed
In addition to making use of some special tools, you can also add a Google map manually by pasting the needed coding stuff into your targeted webpage. Here, we highly recommend Map-Embed.Com that can generate the code safely and effectively.
This platform allows you to present the information of your targeted place comprehensively including the place name, street, city, and zip code. Also, you can decide the map type among roadmap, satellite, satellite with street name, and terrain, choose the zoom level, and set the map height and width directly. By default, the location information is showcased automatically with a popup box. If you do not want this way, you can also choose to show the information when people click the marker.
After finishing the information entering, now you can click the Generate Code button. The code can be generated instantly. Note that you do not need to copy the code later, for the HTML code is already saved into your clipboard. Thus, you can go for website, open the editing page of the specific page, and click Ctrl+V in your keyboard. After saving the change, the map can be displayed immediately.
Make Use of Google Maps
In fact, you can also go to the official site of Google Maps. You simply need to enter the place you want to mark in the search box. Google can find the place for you in seconds, and displays the detailed information and location clearly.
After clicking the target, now you need to go for the right-bottom section of the whole page to find the settings button. In the dropdown menu, you can find the option of “share and embed button”. Click it.
Now, you can get the INFRAME code needed to paste into your website. Note that you can choose to display the map of a large size, medium size, or a small size. If you want to customize the width and height on your own, simply click the Customize button before the coding stuff and change settings based on your needs. Note that you can preview the final effect by clicking the preview button.