Placing maps to your posts and pages adds a graphical flair to your site, breaks up long blocks of text, and makes the experience better for your readers.
In this daily tip, we’re going to focus on two easy ways you can add map functionality in just a few minutes:
- Direct embed from Google Maps
- Google Maps plugin from WPMUDEV
Direct Embed Method
Visit Google Maps and type an address in the search box. Google finds your address. In this example, I’m using: 1000 5th ave, seattle, wa 98101. Here’s what we get:
On the top left of the image window you can click the chain link icon and that will open up the dialogue box for embedding the map.
You have the option of customizing some of the basic embed properties: things like size of the map, border colors, etc. Copy that code and place it in your website using the HTML Editor in your posts and pages.
When you save your post or page and view it in your browser you will see that google map reproduced exactly as it was in Google maps itself. It’s basically the exact same functionality of Google, right on your site. They can zoom, get directions, view info about the address, and more.
Google Maps Plugin
WPMUDEV has created a great Google Maps plugin which brings additional google maps embed functionality to your site. Plus it gives you a host of editing options to change the way your map looks and feels on your site.
Rather than copy embed codes from google maps, you can embed maps directly from your posts and pages using the ‘Add Map’ Icon in the Visual Editor. You can use custom fields to interact with the geolocation plugin, even make your map dynamic with panoramia images.
The plugin even has a widget you can use in sidebars and other areas of your site where you want to place maps outside of posts and pages.
For those with CSS skills, you can even add your own custom styles to make the google map experience on your site truly unique.
