Multi-Item, Multi-Marker Maps (eg GPS location for photos in jrGallery)

A map can display a set of items on a single map showing a marker for each item. This is often used in conjunction with custom marker templates.

Showing a map of all blog posts. This is really quite simple. Rather than passing in a single point such as map=$item you are able to pass in an array of items, using something like map=$_items. A marker will be shown on the map for each of the items in the items array. You might place the map function in item_list.tpl, of jrBlog for example, outside of the items foreach loop. Or use a custom list template for greater control.

Setting marker="infowindow" will display the title, image and rating of the blog post in a popup when the marker is clicked.

To show all items on a single map (like the blog list page here on the demo) see the example under Multi-item Maps you might add the function to item_list.tpl outside the foreach loop.

{if isset($_items)}

{ujGoogleMaps_map name="multimap" map=$_items module="jrBlog" height="300"}

    {foreach from=$_items item="item"}
    <div class="block blogpost">

To make the small static thumbnail maps for each blog post in the list add a function like this inside the foreach loop.

{ujGoogleMaps_map name="itemmap" map=$item module="jrBlog" height="150" width="150" static="true" map_type="hybrid"}

You can set ujGoogleMaps to automatically grab the location of where an uploaded photo was taken and use it to show those images on a map. A nice feature for galleries of photos taken in a particular country or city for example.

ujExif needs to be installed and enabled in order to extract GPS photo data. ujExif is a free module which can be forked on github. https://github.com/Ultrajam/exif-jamroom

Go to the module config in the admin control panel, find the Image Mapping Modules field and enter the name of each module you want to enable this feature for (a comma separated list). You will only want to enable jrGallery or modules with similar functionality for photos. Once enabled, all item images for these modules will have their Exif GPS data saved to the database as photo location coordinates.

Note: You will also need to add the module (jrGallery) to the ujExif config module config in the admin control panel.

Add the ujGoogleMaps smarty function to /modules/jrGallery/templates/item_gallery.tpl at around line 19, which will then look like this:

</div>
{ujGoogleMaps_map name="map" module="jrGallery" map=$_items height="600" image_mode="true" marker="infowindow"}
<section>
<ul class="sortable grid">

This will display a large map below the gallery. The map will show markers where each photo was taken (assuming it was taken with a GPS-enabled camera/phone). The viewport (framing) of the map will be calculated to show all of the markers at the largest possible zoom, so if the photos were taken all over the world a globe map would be shown, if they were all in one city then a map of that city would be shown. The viewport sizing is a responsive feature that allows you to display maps at many different sizes and still be sure that all markers are shown at the best size across devices. Try setting marker="infowindow" and use a custom template to best display the image in the popup.

Note that a different marker_template (marker_template_image_mode.tpl) is automatically used in image mode, it shows just the image. You can still override this by passing in a custom template: marker_template="my_custom_marker_template.tpl"