An rss_google_map Hack

duchamp · 2009-01-15 21:32:58

I was working on a Real Estate website where I needed to give my client the possibility to place each property in a city map. My first intention was to use the rss_google_map plugin, and I did it! but its a little bit outdated, actually it doesn’t work with addresses just works fine with latitude and longitude data.
So, how could my client to know the exactly latitude and longitude of each property?
Not an easy task!
Well, I found this page:
Google Maps Latitude, Longitude Grabber
that use a very ‘simple’ javascript to parse the coordinates into two input boxes … EUREKA!
My cliente could go to that page, search for the right city, look for the right street, generate the coordinates, make some copy & paste and place that info into some custom fields that the rss-google-map plugin requires, and reapeat that for each property? Ummmh forget it, too much work! too many things to remember!
if that javascript and googlemap could be inserted into the TXP Admin panel maybe I can parse and insert the coordinates right into the custom fields …
After a little work I placed all the necessary code into txplib_head.php and txp_article.php and IT WORKS! The map is placed where I wanted (Between the Title and the body textarea):

The only effort for the client is to click the exactly point over the map!
And finally, after fill all the required data for each property and click the “Publish” button, the live website shows the google map with the property placed in it’s righ coordinates!

Wonderful!

It would be nice and useful to have an admin plugin to do all this work without the need to hack that files!!!

MattD · 2009-01-15 22:09:37

You can insert elements into the admin html via a plugin. Take a look at my colorpicker plugin for an example.

Also take a look at Google’s example on Geocoding for how to use their service to get long/lat from an address.

Last edited by MattD (2009-01-15 22:10:35)

duchamp · 2009-01-15 22:27:32

MattD wrote:

You can insert elements into the admin html via a plugin. Take a look at my colorpicker plugin for an example.
Also take a look at Google’s example on Geocoding for how to use their service to get long/lat from an address.

Thanks a lot for the suggestions Matt! Anyway, actually I’m too tired to do more than that, maybe someone would like to take this idea and make something new, maps are allways needed!
I really love the Flexibility of TXP, and also love to find different ways to adapt it to different kind of websites.
Regards

MattD · 2009-01-15 23:02:51

If you want to send me the changes you made I’ll take a look when I have time.

renobird · 2009-01-16 15:14:22

Wow!

This looks like an awesome idea! Matt, Please run with this when you have time.

:)

—
T

duchamp · 2009-01-16 15:55:58

Here I go with all the code that I used:

First at all, I modified txplib_head.php adding this:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="<?php echo LANG; ?>" lang="<?php echo LANG; ?>" dir="<?php echo gTxt('lang_dir'); ?>">
<head>
<style type="text/css">v\:* {behavior:url(#default#VML);}body {margin:0px; padding:20px;background-color:#666; color:#fff;}</style>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=HERE-YOUR-KEY"></script>

Replace HERE-YOUR-KEY with your GoogleMaps API Key

That’s all for txplib_head.php

Then I’ve modified txp_article.php adding this code before the textarea id=“body”:

echo n.graf('<div id="map" style="width:400px;height:230px;padding:0px;margin:0px;text-align:left;"></div><script type="text/javascript">
    //<![CDATA[
    var map = new GMap(document.getElementById("map"));
    map.centerAndZoom(new GPoint(-65.03665924072266,-42.76717863402333), 1);
    var point = new GPoint(-65.03665924072266,-42.76717863402333);
    var marker = new GMarker(point);
    map.addOverlay(marker);
    GEvent.addListener(map,"click", function(overlay, point) {
        if (overlay) {
            map.removeOverlay(overlay);
      } else if (point) {
            map.recenterOrPanToLatLng(point);
            var marker = new GMarker(point);
            map.addOverlay(marker);
     }
     });
// Volver a centrar Mapa y Agregar Coordenadas Clickeando el Mapa
GEvent.addListener(map,"click", function(overlay, point) {
            document.getElementById("custom-3").value=point.y;
            document.getElementById("custom-4").value=point.x;
});
    //]]>
</script>

Obviously, you could change the custom fields number and also the coordinates of the initial map (the #1 after the coordinates is the Zoom Level)

As I coudn’t use rss_google_map as supposed, I just copy the generated code and put it inside a form:

<txp:if_custom_field name="Longitud"><h4>Location:</h4></txp:if_custom_field>
				<div id="map" style="width: 430px; height: 280px">
				</div>
    <script type="text/javascript">

    			//<![CDATA[
          window.onload = showMap;
            function showMap() {

    		if (GBrowserIsCompatible()) {

      		var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(<txp:if_custom_field name="Longitud"><txp:custom_field name="Longitud" /><txp:else />-65.03665924072266</txp:if_custom_field>,<txp:if_custom_field name="Latitud"><txp:custom_field name="Latitud" /><txp:else />-42.76717863402333</txp:if_custom_field>), 1);
}

					var icon = new GIcon();
					icon.image = "http://labs.google.com/ridefinder/images/mm_20_orange.png";
					icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
					icon.iconSize = new GSize(12, 20);
					icon.shadowSize = new GSize(22, 20);
					icon.iconAnchor = new GPoint(6, 20);
					icon.infoWindowAnchor = new GPoint(5, 1);
			var point0 = new GPoint(<txp:if_custom_field name="Longitud"><txp:custom_field name="Longitud" /><txp:else />-65.03665924072266</txp:if_custom_field>,<txp:if_custom_field name="Latitud"><txp:custom_field name="Latitud" /><txp:else />-42.76717863402333</txp:if_custom_field>)
;
              var marker0 = new GMarker(point0,icon);

              map.addOverlay(marker0)

              GEvent.addListener(marker0, "click", function() {
var html = '<div style="width: 185px;">'
marker0.openInfoWindowHtml(html);
});
    	//]]>

		}
    	</script>

I guess that's all what I've used. The only problem is that the map doesn't work very well in IE. Hope this could be used to anything useful!

Regards,

Alex

MattD · 2009-01-16 22:21:24

So far I have a plugin that handles the admin side.

When I have more time I can try and handle the front end side as well.

EDIT: I’ll want to test it some more and add some functionality before I truly release anything.

Last edited by MattD (2009-01-17 03:56:50)

MattD · 2009-01-17 03:56:14

I’ve added the ability to enter an address and get the lat/lng from the google api.
msd_google_map_v0.2.txt

I’m not sure I’ll build a public side tag to go along of this. I think it’s good enough that it lets you add location data to an article. Let me know if you see it otherwise.

duchamp · 2009-01-17 10:22:20

MattD wrote:

I’ve added the ability to enter an address and get the lat/lng from the google api.
msd_google_map_v0.2.txt
I’m not sure I’ll build a public side tag to go along of this. I think it’s good enough that it lets you add location data to an article. Let me know if you see it otherwise.

It’s not working for me. I’m doing a try using a Local server (XAMPP), Textpattern 4.0.6 (I’m going to update it to 4.0.7 later today), the default custom fields and also I’ve tryied using a local address (Puerto Madryn, Chubut, Argentina) and each of the default examples inside the default form:

<txp:rss_google_map address="1600 Pennsylvania Ave NW" city="Washington" state="DC" zip="20500" />

<txp:rss_google_map lat="38.898563" long="-77.037223" geotitle="The White House" />

Of course, the <txp:rss_google_map_js apikey="xxx" /> is placed inside the <head> with an API Key (as Im trying to use it in 127.0.0.1 it shows a message saying that I need to register another API Key, but I know that it could work), and <txp:rss_google_map /> is right after the <body> tag.

Also the plugin is not correctly parsing this <div id=\"map\"> (that error comes from the original plugin and its easy to solve taking out that slashes)

But, I think this must to be tested in a live site, with the latest Textpattern version and the right API Key.

MattD · 2009-01-17 17:21:38

Seems to be some confusion. My plugin has nothing to do with rss_google_map. Mine just adds the map to the write tab to allow you to easily add location date (lat/lng) to your article.

You could then use this data with rss_google_map (I assume, I’ve never used it) in 4.0.7 and above.

Untested example:

<txp:rss_google_map lat='<txp:custom_field name="custom1"/>' long='<txp:custom_field name="custom2"/>' geotitle="The White House" />

duchamp · 2009-01-17 17:30:02

MattD wrote:

Seems to be some confusion. My plugin has nothing to do with rss_google_map. Mine just adds the map to the write tab to allow you to easily add location date (lat/lng) to your article.

Ha ha sorry, sorry, you’re right! it was too early this morning, I’ve put your plugin in the same folder as the rss_google_map but opened that one, not yours.
I’ll try it later!

kus · 2009-01-18 02:22:21

I think it would be nice if the maps is placed in under title forms , like alex screenshoot.

Textpattern CMS

Textpattern CMS support forum

#1 2009-01-15 21:32:58

An rss_google_map Hack

#2 2009-01-15 22:09:37

Re: An rss_google_map Hack

#3 2009-01-15 22:27:32

Re: An rss_google_map Hack

#4 2009-01-15 23:02:51

Re: An rss_google_map Hack

#5 2009-01-16 15:14:22

Re: An rss_google_map Hack

#6 2009-01-16 15:55:58

Re: An rss_google_map Hack

#7 2009-01-16 22:21:24

Re: An rss_google_map Hack

#8 2009-01-17 03:56:14

Re: An rss_google_map Hack

#9 2009-01-17 10:22:20

Re: An rss_google_map Hack

#10 2009-01-17 17:21:38

Re: An rss_google_map Hack

#11 2009-01-17 17:30:02

Re: An rss_google_map Hack

#12 2009-01-18 02:22:21

Re: An rss_google_map Hack

Board footer