I developed an app a few years back that made pretty extensive use of custom
data mapping for points and areas. I found the cleanest way to deal with
loading the data was through AJAX calls to an API, while developing your
javascript libraries independently. Otherwise, you end up bringing a whole
bunch of inline JS in to your views and couple them too tightly with the map
API.
Once you set up your API to deliver XML or JSON, you can use the standard
Google Maps API methods to add the points, map boundaries, etc like so. I used
a spatial database and then converted the point and geometry values to lat/lon
floats. Note that the JS below uses XML, is missing some of the custom marker
variables which were set earlier in the JS library. It was also written for an
earlier version of the API.
HTH,
Jon
-----------------------------------------------------
<script type=text/javascript>
// ===== Start with an empty GLatLngBounds object =====
var bounds = new GLatLngBounds();
// getXML
var request = GXmlHttp.create();
request.open("GET", api_xml, true);
request.onreadystatechange = function() {
//If we have loaded the XML
if (request.readyState == 4) {
//Kill our loading message and show the notes again
$("#load-msg").slideUp("fast",function(){$("#load-msg").remove();$(".note").slideDown("normal");});
var xmlDoc = request.responseXML;
// obtain the array of markers and loop through it
var markers = xmlDoc.documentElement.getElementsByTagName("wpt");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var actMarker = markers[i];
var lat = parseFloat(actMarker.getAttribute("lat"));
var lng = parseFloat(actMarker.getAttribute("lon"));
var point = new GLatLng(lat,lng);
var html = GXml.value(actMarker.getElementsByTagName("desc")[0]);
var label = GXml.value(actMarker.getElementsByTagName("name")[0]);
var link = "<a class=\"detail-link\"
href=\""+GXml.value(actMarker.getElementsByTagName("link")[0])+"\">View
Detail</a>";
var append = "<ul class=\"geo\"><li class=\"lat\">Latitude:<abbr
title=\""+lat+"\" class=\"latitude\">"+lat+"</abbr></li><li
class=\"lon\">Longitude:<abbr title=\""+lng+"\"
class=\"longitude\">"+lng+"</abbr></li></ul>";
html = "<p class=\"gmap-label\">"+html+append+"</p>";
label = label+link;
// create the marker
var marker = createMarker(point,label,html);
map.addOverlay(marker);
// ==== Each time a point is found, extent the bounds of the map
=====
bounds.extend(point);
}
// ===== determine the zoom level from the bounds =====
map.setZoom(map.getBoundsZoomLevel(bounds));
// ===== determine the centre from the bounds ======
var clat = (bounds.getNorthEast().lat() +
bounds.getSouthWest().lat()) /2;
var clng = (bounds.getNorthEast().lng() +
bounds.getSouthWest().lng()) /2;
map.setCenter(new GLatLng(clat,clng));
}
}
</script>
On Dec 3, 2013, at 9:58 AM, Dave Long <[email protected]> wrote:
>
> Can anyone suggest a link to a good tutorial on setting up an app to create
> either a Google or Bing map populated by a MySQL db using ColdFusion? (for
> real estate purposes)
>
> I've tried going to their sites (Google, Bing) but it seems you have to have
> been born knowing the terminology to find the correct instructions.
>
> Thanks,
>
> Dave Long
>
>
> ---
> This email is free from viruses and malware because avast! Antivirus
> protection is active.
> http://www.avast.com
>
>
>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Order the Adobe Coldfusion Anthology now!
http://www.amazon.com/Adobe-Coldfusion-Anthology/dp/1430272155/?tag=houseoffusion
Archive:
http://www.houseoffusion.com/groups/cf-talk/message.cfm/messageid:357253
Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/groups/cf-talk/unsubscribe.cfm
