PHPMatters Help You Better Hosting Your PHP-based Sites
How to Add Google Map to Website - Easy Steps for Attaching Map Component

How to Add Google Map to Website – Easy Steps for Attaching Map Component

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

Download Source

Comprehensive Google Map PluginThis 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

Download Source

Embed Google MapThis 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

Download Source

Simple Google MapsThis 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.

enter stress information

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.

generate code button

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.

share and embed map

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.

customize map

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.