Web fonts have been one of the most exciting additions to the web recently. And…
Google Maps makes embedding maps fairly easy. Customizing that map, however, can be a real chore. And making it responsive can be damn near impossible. WP Flexible Map takes care of Google Map customization, plain and simple.
What’s It Do?
WP Flexible Map gives you access to a shortcode with a long list of parameters for controlling the output of Google Maps on your posts and pages. You can add Maps in the shortcode by either providing its longitude and latitude, street address or custom Google Earth KML file. The shortcode also lets you specify exactly what the map will look like.
You also have the option of embedding multiple maps on the same page and the plugin also outputs flexible maps if you are using responsive design. It uses the latest static maps API and keeps everything fairly small.
How’s It Work?
Everything about WP Flexible Map is controlled through its shortcode or template tag. To get started, simply open the post or page you want to include a Google Map on and use the [[flexiblemap]] shortcode. The simplest way to accomplish this is to use an address and just add a parameter for width.
[[flexiblemap address=”4 Pennsylvania Plaza New York, NY 10001″ width=”100%”]]
This will output a very simple map with a marker at Madison Square Garden in NYC. We use a width of 100% so that it will adapt to the size of the page, and fill whatever column it is in. This is especially important if you are using a responsive design (which you really should be).
But we can also add a few more parameters to make the map a bit more functional. We can, for instance, include a title, a description, and an option to get directions right within the page.
[flexiblemap address=”4 Pennsylvania Plaza New York, NY 10001″ title=”Madison Square Garden” description=”4 Pennsylvania Plaza New York, NY 10001″ directions=”true” width=”100%”]
This will give us a little bit more complex of a map. The directions=”true” parameter will add a “Directions” link in the modal box above your marker in the Map. If this link is clicked on, a button underneath the map labeled “Get Directions” will appear. If a user enters their address and hits this button, then directions will be output, all on the same page.
You can also enable directions on your maps
You can also use coordinates with latitude and longitude if you’d like to put a finer tip on it. I use iTouchMap to get my coordinates, but you should be able to find them easily by searching the web. This example will output a map at a specific longitude and latitude, with a title and description, link the map to an external page, and show a satellite view.
[[flexiblemap center=”49.750871,-85.994266″ marker=”40.750871,-73.994266″ width=”100%” title=”Madison Square Garden” description=”Concerts and More” link=”http://www.example.com/” maptype=”satellite”]]
When using the center location, make sure to specify latitude first, longitude second in the center parameter. You can also put the marker somewhere off-center with the marker parameter, and a different latitude and longitude for the center of the map. This is why the marker in this example is located on the left of the map. The link parameters will add a link in the modal box entitled “Click for details” which will link to your specified page. The map type changes to satellite view instead of the default road map. The next example features the same location, but with a specified height and zoomed out quite a bit.
[[flexiblemap center=”40.750871,-73.994266″ width=”100%” height=”500″ title=”Madison Square Garden” description=”Concerts and More” zoom=”4″]]
This example is fairly standard, but with a low zoom number. The higher the integer of the zoom, the more zoomed in the map will look.
The other way to include a more complex map is to link to an external KML file using the src parameter. To learn more about what KML is, you can visit the Google documentation. All of the other parameters stay exactly the same.
[[flexiblemap src=”http://snippets.webaware.com.au/maps/example-toronto.kml” width=”100%” height=”400″]]
And that’s about it. There are lots of parameters that you can use to customize the map, I’ve only gone over the basics here. You can change the look and feel of directions, hide zooming and different views, and even customize the marker image that is displayed. Basically, any part of the map can be controlled. You can see a full list of shortcode parameters at the developer’s website.
If you would like to include a map in a template, rather then on an individual post or page, then you can use the included flex_map_show function in a PHP file. Any parameter that you can use in the shortcode can also be used in the function as well.
</p><p>flexmap_show_map(array(<br /> 'center' => '40.750871,-73.994266',<br /> 'width' => '100%',<br /> 'height' => 500,<br /> 'title' => 'Madison Square Garden'<br />));</p><p>
There are also several hooks that you can use to change the attributes and styles of the map’s output globally. You can change shortcode attributes using the flexmap_shortcode_attrs filter, change a default stylesheet using the flexamp_shortcode_styles, and change the outputted HTML using the flexmap_shortcode_html filter. More information on syntax and examples are available on the plugin developers page.
Costs, Caveats, Etc.
Google Maps can be costly, from a performance standpoint, in any implementation. WP Flexible Map makes sure to import only the styles and scripts that you need, and only on pages that have maps included. That being said it’s best to try and concatenate and minify your files anyway, to at least combine them into a single request.
The plugin is free and is updated routinely to make use of new Google Maps APIs. If you are having a problem with the plugin, the first place I would look is the FAQ, which may have your answer. The plugin developers homepage for WP Flexible Map also has plenty of syntax examples. If you are still having a problem, then the support forums should provide an answer for you.
