Very often in the blogs there is a need to insert a piece of map to demonstrate better what kind of venue it is. This is very important, both in terms of promotion of the resource, and for informing customers about where your company is and how you can be reached. You can take a screenshot of the map and insert it into your post or page. But there is a more graceful way to use Google Maps with zoom buttons and scrolling options as well as the rest advanced points. In addition if you pick up some plugin with easy usage, then creating a cool map becomes a pleasure. Playing with some options, it’s possible for a beginner to become an expert in it. I think you’ve seen the functional maps with scrolling and zooming on other sites. Very often you can see the map in the contact section on the corporate sites with travel routes to a specified location (office, event). Google Maps can be easily integrated with the sites. On the site which are built on WordPress platform they can be easily inserted, customized and used in the posts, pages, or as a simple widget.
In this topic we will see how to add Google Maps plugin into a website, which is built on WordPress
To start I have picked up some user-friendly Google Maps plugin from Huge-IT; the plugin is really easy to configure and it provides very user-friendly admin page, so my explanation with the help of this plugin will help you understand the topic well.
The first things you need to do is: find the plugin. This method of installing plugins is simple, fast and reliable. To add a plugin you need to:
Log in to WordPress as an administrator, go to the Plugins menu and click Add.
In the search bar, enter the name of the plugin, and click Search plugins (let it be in free edition).
Once you’ve found our plugin that you want to install, click on Install Now and Activate it
Any plugin, installed in WordPress should appear on the left toolbar, from there you will have options to create a Map.
After the map is ready, plugin usually provides shortcodes, this code is an embed version of a very long code that you need to write in order to display the plugin in your page/post. The shortcode you need to copy and paste into the Page or Post.
- Log in to the admin panel and create a new page or post.
- In Visual mode paste this shortcode [huge_it_maps id=”N”] Where N is the ID number of the map
- Update the page and watch the results
Add the same shortcode using a special button inside the post/page
The advantage of this plugin is also the fact that you can easily embed Google Map into your widgets and display in the sidebar of the site and in any other place.
Go to Appearance – Widgets, where you can find ready-made unit for transfer, called Huge IT google maps, drag it into the widget area and SAVE
If you decide to add a map into a template, whether it is the header or footer area, you need to go in your theme’s header.php or footer.php file and insert the php shortcode of the plugin there. The shortcode appears to be the second one, shown in the admin page<?php echo do_shortcode(“ Save it
! Be careful when you add the shortcode. Because it contains php query. In no case insert it in another php code because you may get an error. If all is made correct then enjoy the results. You can also specify the width and height of the map using arguments width and height, respectively, which take the values in percents.
In order to explain to visitors how to find your location and, you just need to showcase it by providing the coordinates, so it’s time to find out how to create Markers. With the markers on the map you can easily assign and share your favorite places and routes through your website. It’s also pretty easy.
After the installation when you start creating the Map, enter in Markers Section.
While you press on “+Add New Marker” it gives a number of options such as:
- Marker exact address
- Lat and Long.
- Animation, it may bounce or drop
- Title, which can be seen on hover
- Description which can be seen on click
Or add a marker with RIGHT click on the map, it will automatically fill the address and latitude & longitude values.
You can also use custom fields latitude and longitude. By this way you can add unlimited markers on the map. You can specify the location and addresses of any places and put a map with a tag on any page of the site. You can add in the page as many maps and as many markers on each map as you want.
Markers are interactive elements. By default, they receive, for example, a click ech and serve to display information windows in the event receiver. Besides creating a Marker you can add title and description to it. The description accept HTML coding, so you may easily add an image or your company logotype inside the description box.
The marker styles are available in Pro version as well as uploading a new custom marker, but free version gives only one default style.
We have talked about basic steps of the Google Map usage. If we dig deeply into this plugin options then you can be surprised of it’s plenty possibilities. Let me talk a little of other options that the Map includes
Huge-IT Google Maps allows to create polygons, polylines and circles
Polyline – Connected line segments that can form any desired shape, and be used to indicate paths and routes on the map.
Polygon – a closed figure which can be used to indicate areas on the map.
Circle – a geographically accurate projection of a circle on the earth’s surface drawn on a map
Using them you can highlight some specific areas on the map.
The basic controllers on the map can be turned off and on, giving the center address, default zoom, which displays the “+” and “-“, and map width parameters, this way you can make the map look perfect on your page. There are many options for designing a map such as Map Styling section from where it is possible to add a custom hue to indicate the basic color of the map using RGB hexadecimal color values, lightness for the percentage change in brightness of the map, saturation which changes the intensity of the base color of the map and gamma, which corrects contrast of the whole map.
Choose the type of the map and from Layers section add Transit Layer, Traffic Layer and Bicycle Layer. The public transport and cycling layers of a road are added to the base layer of the map displaying of the current traffic conditions, or local information on cycle routes and the routes by public transport. Transit Layer allows you to display the network of urban public transport on a map. When a layer is activate, and in the center of the map is the city for which information is available, the main public transport routes are displayed on the map as thick colored lines.
The following example shows a layer of public transport:
Traffic Layer allows you to add traffic information in real-time. Information on road conditions is available at the time of sending the request.
The following example shows a traffic layer condition:
Bicycle Layer allows you to add information to the map for cyclists. Bicycle Layer displays layer of bike paths over the map, the recommended cycling routes and other elements related to the bicycle traffic. In addition, this layer changes the style of the base map, highlighting the street, where you can move around on the bike, with respect to streets that are not suitable for such a traffic.
Dark blue lines indicate bike trails. Light blue lines indicate streets with bike lanes. Dotted lines indicate other routes or streets recommended for cyclists.
As you can see, nothing is complicated. I hope that my post will help you to clearly show the right house or the street on your website using Google map plugins from WordPress.
Plugin Huge-IT Google Maps is available for free in the official WordPress.org directory. You can install it through the ‘Plugins → Add New “section in your WordPress administration panel.
About the author:
My name is Nelly, a beginner blogger. Work with Huge-IT. The subject of my blogs are mostly dedicated to the new features of our company products, and some useful tips for beginner website makers. I have also experienced on building shop website, that’s why I remember how hard it was for me not being a developer to pick up the right plugin. Besides my main work, sometimes I translate and make demonstration videos. Understanding all beginners I try to explain everything in most simple way. Hopping that my topics are going to be liked by my readers, I am willing to answer any questions as I love helping people, just email me in LinkedIn.
