Creating custom Google maps in ExpressionEngine entries
Creating a Google map is easy: just go maps.google.com, enter your address, and click link or embed, and copy the code. This works fine if you just need a map or two. However, if you need to generate maps dynamically based on address information, you have to put in a bit more work.
First method: quick and easy map link
- Create a Global variable called google-map-url, with this value: http://maps.google.com/maps?q=
- Create the following fields for your weblog (this may vary if you’re outside the United States):
- address
- city
- state
- zip
- In your template, you can generate a Google map link like this:
{google-map-url}{address}+{city}+{state}+{zip}.
In many cases, this will work fine. However, there are two drawbacks to this method:
- You cannot embed a Google map on your site with this method.
- Sometimes, Google will return an inaccurate map, i.e., putting the map’s pin several blocks from the correct location.
Second method: use the SL Google Map extension
This method will take a bit longer than the first, but will provide you with more options. Not only can you use it to generate Google maps links, but you can also generate the maps themselves, either embedding them on a page, or perhaps within a modal or pop-up window.
System requirements
- It is highly recommended that you upgrade ExpressionEngine to the newest version. At the very least, you need to bring it up to 1.6.0 for this method to work.
- You will also need PHP5 running on your web server. If you’re not sure which version of PHP you are running, within your ExpressionEngine control panel go to ADMIN—> UTILITIES—> PHP INFO.
Things to install
- FieldFrame, an ExpressionEngine extension that adds a number of new field types, and allows other developers to create more of them.
- jQuery for the Control Panel, another ExpressionEngine extension. It comes pre-installed in ExpressionEngine 1.6.5 and above, but is not activated.
- SL Google Map extension.
Now rather than copy the instructions from Experience Internet’s SL Google Map page, I will refer you there: http://experienceinternet.co.uk/resources/details/sl-google-map/ Once you’ve gone through these instructions, you should be able to generate Google Maps and embed them on your pages. If you only need to embed maps, you can stop here and than Stephen at Experience Internet for making such an awesome extension.
Generating map links
However, you may need to generate links to Google maps instead of or in addition to embedding the maps in pages. The SL Google Map extension allows you to move the location of the map’s pin, letting you correct Google Maps that are wrong. According to this Google Maps Wiki, you can use the @ symbol to generate a map with an abitrary pin location. I’ve also put parentheses around the ExpressionEngine {title} tag, so that the name of the location shows up along with the map. Google Maps take a lot of parameters—you could spend all day on configuration if you wanted. To generate a link to your edited map:
{exp:weblog:entries weblog=“my-weblog” other params…}
{google-map}
http://maps.google.com/maps?q=({title})+{address-1}+{city}+{state}+{zip}@{pin_lat},{pin_lng}&zoom={map_zoom}
{/google-map}
{/exp:weblog:entries}
