CG Google Maps - KML files overlay

[blast2007]

Very simple trick to display overlay of kml files on your map.

First of all upload your KML file in your site (e.g. /uploads/maps/mytrack.kml)

Call CGGoogleMaps module in your page

Code: Select all

{CGGoogleMaps map='n'}  

(n is your map number)

After code this create overlay with this code:

Code: Select all

{literal}
<__script__ type="text/javascript"><!--
var geoXml = new GGeoXml("http://www.mysite.com/uploads/maps/mytrack.kml");
  if (GBrowserIsCompatible()) {
        map.addOverlay(geoXml);
  }
// --></__script>
{/literal}

Hope this helps
Regards
blast

[chuckienorton]

Do you think it's possible to add a field to the "cataloger" with kml data for that property, and then use cg google maps to read those property overlays? (basically like a real estate hot map). This is for http://reserveland.com/Invest-Land-Real ... -property/.

This would be sweet addition for lots of people if I can figure out how to do it.

~C

[nhaack]

For real estate, you could make use of googles geocoder. Let's say you store the address of a property in an own content block (let's say a oneline="true") then you can use code like the following in your template (untested):

Code: Select all

{literal}
<__script__ type="text/javascript"><!--
        geocoder = new GClientGeocoder();
 
		if (geocoder) {
			geocoder.getLatLng("{/literal}{content block="adress" oneline="true"}{literal}",
				function(point) {
					if (!point) {
						alert(address + " not found");
					} else {
						map.setCenter(point, 5);
						var marker = new GMarker(point);
						map.addOverlay(marker);
					}
				});
		}
// --></__script>
{/literal}

I haven't checked the script, I just took it from a site of mine. But it should provide you with an idea of how to start The geocoder can translate any address that you get results from via regular google maps into proper coordinates. So knowing where the house stands is enough, no need to go there and grap GPS coordinates.

Best
Nils

[chuckienorton]

Great!!! I'll try it right away & get back to you. Thanks.

Only thing that would be better is actual overlay...(for shaped land properties)... here is demo we designed: http://www.180bydesign.com/demos/reserveland/ (click on MapAPI link at top to see the map). Do you think that's possible? Or a little complicated?

Thanks dude!
Chuck

[nhaack]

I think if you want to go for overlays to get such a map working, you should rely more on coordinates than on addresses (don't know about the road infrastructure in that area).

Alternatively, you could draw a polygon with the coordinates of the corners of the property. In that case a KML file from walking around it would be a good basis (though I would only use two points for one side and not twenty or so). However, with large properties and a lot of them, collecting data can be a pain in the a** I can imagine.

From the screenshot I guess it is a rather remote area? You might not be able to get proper locations using the geocoder.

You got a tricky one there. Any ideas how you want to store the location yet? What modules are you going to use?

Best
Nils

[chuckienorton]

Thanks Nils. Yeah, definitely tricky... but worth it if I can pull it off. We've built it using cataloger... here it is: http://reserveland.com/Invest-Land-Real ... -property/.

So if we add a field to the cataloger, you think we could insert the coordinates (or the owner could), so that each property has it's own coordinates - then the geocoder could (possible) string them together on a map. I'll look more closely at the goecoder in a few days and see if I think it will work.

Thanks so much for your quick response dude. CMSMS rocks!

[nhaack]

well, geocoder is just a lookup service. It will return the coordinates of a given specific adress. It will not do anything else.

For drawing lines between the points you can use polyline to connect them. However, if you want to draw a line around the whole property, you need a different amount of points. A triangular one would need 3, a square one 4 and of it is strangely cut, you need 6,7 or even more. So the question here is, how can you store several coordinates of an unspecified number for each object. Either a XML or you have an area in which you paste your hand-made JS, but keeping it in CMS and automated would be nicer.

If I got you right, you want to highlight the single properties on the map by it's shape. Just giving a street address will only return a point.

Concluding from your screen as mentioned under the demo link, you need an overlay that would cover your whole area showcasing the single properties and a single point for each property (which you could use on an overlay to display a single point or text bubble). As I couldn't get a point for the adresses given on the page you mentioned, I think you should go with a pair of coordinates for each property to be accurate.

If you like to draw a line around the property, take the approach as desribed by blast2007 in the first post

Best
Nils

[geraldo]

Very simple trick to display overlay of kml files on your map.
...

Code: Select all

{literal}
<__script__ type="text/javascript"><!--
var geoXml = new GGeoXml("http://www.mysite.com/uploads/maps/mytrack.kml");
  if (GBrowserIsCompatible()) {
        map.addOverlay(geoXml);
  }
// --></__script>
{/literal}

The call "addOverlay(geoXml)" only works within the 'namespace' of CGGooglemaps, for example
'CGGoogleMaps0.addOverlay(geoXml)', otherwise there is no css-id for the display window

CMS 1.8.2. and CGGoggleMaps V1.5.6 + CGExtension 1.20 + CGSimpleSmarty 1.4.5

geraldo

[Charles Butcher]

Does anyone have this working with CGGoogleMaps 2.0.3 ?

Thanks to Blast2007 and Geraldo, I had a KML displaying nicely in CGGoogleMaps v1.x, but with the excellent new version of the module it has stopped working. I tried fiddling with the object name ("google.maps.addOverlay" etc) but I'm out of my depth.

[mw]

Does anyone have this working with CGGoogleMaps 2.0.3 ?

Thanks to Blast2007 and Geraldo, I had a KML displaying nicely in CGGoogleMaps v1.x, but with the excellent new version of the module it has stopped working. I tried fiddling with the object name ("google.maps.addOverlay" etc) but I'm out of my depth.

1. Go to "Extensions -> calguys Google Maps -> Maps -> (Select your Map)
2. select the Javascript Tab
3. look for: var infoWindow = new google.maps.InfoWindow(); (around line 266)
change it from:

Code: Select all

var mapObj = new google.maps.Map(mapElem,map_options);
var infoWindow = new google.maps.InfoWindow();

to look like:

Code: Select all

var mapObj = new google.maps.Map(mapElem,map_options);
var infoWindow = new google.maps.InfoWindow();
var kml = new google.maps.KmlLayer('http://www.mysite.com/uploads/maps/mytrack.kml');
kml.setMap(mapObj);

good luck!

[Charles Butcher]

1. Go to "Extensions -> calguys Google Maps -> Maps -> (Select your Map)
2. select the Javascript Tab
3. look for: var infoWindow = new google.maps.InfoWindow(); (around line 266)
change it from:

Code: Select all

var mapObj = new google.maps.Map(mapElem,map_options);
var infoWindow = new google.maps.InfoWindow();

to look like:

Code: Select all

var mapObj = new google.maps.Map(mapElem,map_options);
var infoWindow = new google.maps.InfoWindow();
var kml = new google.maps.KmlLayer('http://www.mysite.com/uploads/maps/mytrack.kml');
kml.setMap(mapObj);

good luck!

Thank you very much. This worked like a charm.