jcanfield/googlemaps_canvas.html

## googlemaps_canvas.html
<!DOCTYPE html>
<html>
<head>
<title>Google Maps API and Driving Directions</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
                <script type="text/javascript">
                    function initialize() {
                        var myLatlng = new google.maps.LatLng(39.928294, -105.147710);
                        var mapOptions = {
                            zoom: 15,
                            center: myLatlng,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        }

                        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

                        var contentString = '<div id="gmap-content">'+
                                '<div id="gmap-siteNotice">'+
                                '</div>'+
                                '<h2 id="gmap-firstHeading" class="gmap-firstHeading">Your Business Name</h2>'+
                                '<div id="gmap-bodyContent">'+
                                    '<p><b>Address</b>:<br>' +
                                        '2800 Rock Creek Circle<br>'+
                                        'Superior, CO 80027<br>'+
                                        '<br>'+
                                        '<strong><a href="http://maps.google.com/maps?saddr=2800+Rock+Creek+Circle,+B1,+Superior,+CO+80027" title="Get Driving Directions" target="_blank">Get Directions</a></strong><br>'+
                                    '</p>'+
                                    '<div class="clear clearfix"></div>'+
                                '</div>'+
                                '</div>';

                        var infowindow = new google.maps.InfoWindow({
                            content: contentString
                        });

                        var marker = new google.maps.Marker({
                            position: myLatlng,
                            map: map,
                            title:"Your Business"
                        });

                        jQuery(function() {
                            infowindow.open(map,marker);
                        })
                    }
                    window.onload=initialize;
                </script>
</head>

<body>

<div id="map_canvas"></div>
<br /><strong><a href="http://goo.gl/maps/B9e0f">View Larger Map</a></strong>

<br>

<p>
Example of Driving Directions URL (Leave destination blank if needed): `http://maps.google.com/maps?saddr={start_address}&daddr={destination_address}`
</p>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Google Maps API and Driving Directions</title>
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
	<script type="text/javascript">
	function initialize() {
	var myLatlng = new google.maps.LatLng(39.928294, -105.147710);
	var mapOptions = {
	zoom: 15,
	center: myLatlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	}

	var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

	var contentString = '<div id="gmap-content">'+
	'<div id="gmap-siteNotice">'+
	'</div>'+
	'<h2 id="gmap-firstHeading" class="gmap-firstHeading">Your Business Name</h2>'+
	'<div id="gmap-bodyContent">'+
	'<p><b>Address</b>:<br>' +
	'2800 Rock Creek Circle<br>'+
	'Superior, CO 80027<br>'+
	'<br>'+
	'<strong><a href="http://maps.google.com/maps?saddr=2800+Rock+Creek+Circle,+B1,+Superior,+CO+80027" title="Get Driving Directions" target="_blank">Get Directions</a></strong><br>'+
	'</p>'+
	'<div class="clear clearfix"></div>'+
	'</div>'+
	'</div>';

	var infowindow = new google.maps.InfoWindow({
	content: contentString
	});

	var marker = new google.maps.Marker({
	position: myLatlng,
	map: map,
	title:"Your Business"
	});

	jQuery(function() {
	infowindow.open(map,marker);
	})
	}
	window.onload=initialize;
	</script>
	</head>

	<body>

	<div id="map_canvas"></div>
	<br /><strong><a href="http://goo.gl/maps/B9e0f">View Larger Map</a></strong>

	<br>

	<p>
	Example of Driving Directions URL (Leave destination blank if needed): `http://maps.google.com/maps?saddr={start_address}&daddr={destination_address}`
	</p>

	</body>
	</html>