Textpattern Support Forum

Best bet for public side is to build your map from scratch using the google api or a jquery google maps plugin.

Here is an example using coordinates stored in your articles custom fields.

msd_google_map is an admin side plugin that helps add coordinates to articles. It does not provide public side maps.

I have not had the time to convert it to v3. I’ve gotten close to producing a new version with out the custom marker options but it’s not working completly yet.

It’s not neccessary to use msd_google_maps. If your articles have location data then this will work. Just change the custom field names to your lat/lng field names.

 * A fake article comes last to avoid the need to determine if we're on the last 
 * article in the result. We'll skip this one later.

I was just being lazy. You could use txp:if_last_article instead like this:

<script type="text/javascript" src="<txp:site_url/>textpattern/jquery.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&sensor=false"></script>
<script type="text/JavaScript">
<!--  to hide script contents from old browsers
$(document).ready(function() {
initialize();
});
function initialize() {
  var myOptions = {
    zoom: 5,
    center: new google.maps.LatLng(36.6, -121.9),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);
  setMarkers(map, articles);
}
/**
 * Data for the markers consisting of a name, a LatLng an image and a description
 * for the article.
 */
var articles= [<txp:article_custom limit="99"  lat="_%" long="_%">
  ['<txp:title no_widow="0" />', <txp:custom_field name="lat" />, <txp:custom_field name="long" />, '<txp:images limit="1"><txp:image_url thumnail="1"/></txp:images>','Read more about this picture and <txp:permlink><txp:title /></txp:permlink>']<txp:if_last_article><txp:else/>,</txp:if_last_article></txp:article_custom>
];
function setMarkers(map, locations) {
  for (var i = 0; i < locations.length; i++) {
    var article= locations[i];
    var myLatLng = new google.maps.LatLng(article[1], article[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: article[0],
        desc: article[4],
        img: article[3]
    });
var infowindow = new google.maps.InfoWindow({
                        content: " "
                      });
  // Add infoWindows for each Marker
  google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent('<div id="mapCont"><img class="mapImg" src="'+this.img+'" width="100px"/>' +
                       '<div class="mapTitle">'+this.title+'</div>' + 
                       '<p>'+this.desc+'</p></div>');
                        infowindow.open(map, this);
                      });
  }
}
// end hiding contents from old browsers  -->
    </script>

Last edited by MattD (2012-12-19 16:46:14)

Thanks a lot, Matt! This week-end I will try your suggestion from yesterday.