jcanfield
9/20/2012 - 3:40 AM

Driving Directions URL for usage with Google Maps API and Custom infoWindow

Driving Directions URL for usage with Google Maps API and Custom infoWindow

googlemaps_canvas.html
content_copyfile_download
<!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>