Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2012-12-18 13:27:34

Kjeld
Member
From: Tokyo, Japan
Registered: 2005-02-05
Posts: 446
Website

Replacement for rss_google_map?

I am using rss_google_map to display Google Maps in my articles.

I like this plugin a lot, but it uses Google Maps Javascript API v2, and that will be faced out in May, 2013.

I have looked at the Google Map plugins at textpattern.org, but there is no replacement for rss_google_map (pro_googlemapv3 is for a single map on a site, I understand).

Do you have any suggestions on what I can do to keep Google Maps on my site working?


Old Photos of Japan – Japan in the 1850s~1960s (100% txp)
MeijiShowa – Stock photos of Japan in the 1850s~1960s (100% txp)
JapaneseStreets.com – Japanese street fashion (mostly txp)

Offline

#2 2012-12-18 16:17:34

MattD
Plugin Author
From: Monterey, California
Registered: 2008-03-21
Posts: 1,254
Website

Re: Replacement for rss_google_map?

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.


My Plugins

Piwik Dashboard, Google Analytics Dashboard, Minibar, Article Image Colorpicker, Admin Datepicker, Admin Google Map, Admin Colorpicker

Offline

#3 2012-12-18 23:14:52

Kjeld
Member
From: Tokyo, Japan
Registered: 2005-02-05
Posts: 446
Website

Re: Replacement for rss_google_map?

MattD wrote:

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.

Thanks, Matt.

I had actually looked at the forum thread for msd_google_map. I thought you wrote that you hadn’t had the time yet to upgrade this plugin to Google Maps Javascript API v3?


Old Photos of Japan – Japan in the 1850s~1960s (100% txp)
MeijiShowa – Stock photos of Japan in the 1850s~1960s (100% txp)
JapaneseStreets.com – Japanese street fashion (mostly txp)

Offline

#4 2012-12-19 00:03:09

MattD
Plugin Author
From: Monterey, California
Registered: 2008-03-21
Posts: 1,254
Website

Re: Replacement for rss_google_map?

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.


My Plugins

Piwik Dashboard, Google Analytics Dashboard, Minibar, Article Image Colorpicker, Admin Datepicker, Admin Google Map, Admin Colorpicker

Offline

#5 2012-12-19 00:36:51

Kjeld
Member
From: Tokyo, Japan
Registered: 2005-02-05
Posts: 446
Website

Re: Replacement for rss_google_map?

MattD wrote:

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.

So it is not necessary to use msd_google_map in order to implement the Google Maps v3 Example as displayed on http://photographdaddy.com/txp/google-maps-v3-example?

By the way, what is the thing with the creation of a fake article in the example?


Old Photos of Japan – Japan in the 1850s~1960s (100% txp)
MeijiShowa – Stock photos of Japan in the 1850s~1960s (100% txp)
JapaneseStreets.com – Japanese street fashion (mostly txp)

Offline

#6 2012-12-19 16:43:31

MattD
Plugin Author
From: Monterey, California
Registered: 2008-03-21
Posts: 1,254
Website

Re: Replacement for rss_google_map?

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)


My Plugins

Piwik Dashboard, Google Analytics Dashboard, Minibar, Article Image Colorpicker, Admin Datepicker, Admin Google Map, Admin Colorpicker

Offline

#7 2012-12-20 19:13:01

MattD
Plugin Author
From: Monterey, California
Registered: 2008-03-21
Posts: 1,254
Website

Re: Replacement for rss_google_map?

Another option, which is simpler, is using Google Static Maps on the public side if you only need one marker. I’m using this on some of my articles

I use adi_variables to set these:

<txp:variable name="google_map_key" value="YOUR-API-KEY" />
<txp:variable name="map_type" value="hybrid" />
<txp:variable name="map_marker" value="green" />

Then in my article form I have


<!--display a static map image from Google.-->
<img class="frameleft2" width="580" height="200"
src="http://maps.google.com/staticmap?center=<txp:custom_field name="lat" />,<txp:custom_field name="long" />&amp;zoom=14&amp;size=580x200&amp;maptype=<txp:variable name="map_type"/>&amp;markers=<txp:custom_field name="lat" />,<txp:custom_field name="long" />,<txp:variable name="map_marker"/>&amp;key=<txp:variable name="google_map_key"/>&amp;sensor=false" alt="map" />

edit: looks like they do support multiple markers.

Last edited by MattD (2012-12-20 19:15:08)


My Plugins

Piwik Dashboard, Google Analytics Dashboard, Minibar, Article Image Colorpicker, Admin Datepicker, Admin Google Map, Admin Colorpicker

Offline

#8 2012-12-20 23:08:57

Kjeld
Member
From: Tokyo, Japan
Registered: 2005-02-05
Posts: 446
Website

Re: Replacement for rss_google_map?

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


Old Photos of Japan – Japan in the 1850s~1960s (100% txp)
MeijiShowa – Stock photos of Japan in the 1850s~1960s (100% txp)
JapaneseStreets.com – Japanese street fashion (mostly txp)

Offline

Board footer

Powered by FluxBB