Google Maps API

Posted by KMFNJ | Filed under Toolbox

Recently I had an opportunity to play with Google Maps API -- it is, needless to say, very very cool. (Heck, it gets props just for being part of Google...)

Anyway, I was able to create a custom working map using the following tools:
Anyway, my modified code ended up looking something like this to display a basic map:


<div id="myMap" style="width: 500px; height: 500px;"></div>

<script type="text/javascript">
//<![CDATA[

// Create a base icon for all of our markers that specifies the shadow, icon
// dimensions, etc.
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);

var myMap = new GMap(document.getElementById("myMap"));
myMap.addControl(new GSmallMapControl());
var pt = new GLatLng(30.331249841794836, -95.48955917358398);
myMap.setCenter(pt, 15);

// A function to create a marker on the map with the given info
function createMarker(lng, lat, letter, html_text) {
	// Create a point
	var point = new GPoint(lng, lat);
	// Create a lettered icon
	var icon = new GIcon(baseIcon);
	icon.image = "http://www.google.com/mapfiles/marker.png";
	var marker = new GMarker(point, icon);
	GEvent.addListener(marker, "click",
		function () { marker.openInfoWindowHtml(html_text); });
	return marker;
}

function fromTarget () {
	var addr = document.get_address.address.value;
	addr = addr.replace(/\+/g, '%2B');
	addr = addr.replace(/ /, '+');
	var txt = 'http://maps.google.com/?q=from:+' + addr + '+to:+';
	txt += '780+Westridge+Rd.+Spring,+TX+77380';
	return txt;
}

function toTarget () {
	var addr = document.get_address.address.value;
	addr = addr.replace(/\+/g, '%2B');
	addr = addr.replace(/ /, '+');
	var txt = 'http://maps.google.com/?q=';
	txt += 'from:+780+Westridge+Rd.+Spring,+TX+77380+to:+';
	txt += addr;
	return txt;
}

var text = '<p style="text-align: left"/>';
text += '780 Westridge Rd. Spring, TX 77380<br/>';
text += '<form name="get_address">';
text += 'Enter an address: <input type="text" name="address" size=30><br/>';
text += '<input type="button" value="Get directions from this address" ';
text += 'onClick="window.open(fromTarget())"/></form><br/><input type="button" ';
text += 'value="Get directions to this address"';
text += 'onClick="window.open(toTarget())"/></form>';
		
var testMarker = createMarker(pt.x, pt.y, "", text);
myMap.addOverlay(testMarker);
//]]>
</script>
Notes: My code is largely a reproduction of the "How to Add Driving Directions" link I posted above. I really only change 1 line of code to make it more compliant with APIv2 (var pt = new GLatLng(30.331249841794836, -95.48955917358398);). Hope this was fun and informative - I sure learned alot from it! ..k.. Technorati Tags: , ,


Permalink | Comments (0) | Jan 30, 2007

Leave a Reply

You must be logged in to post a comment.