Google Maps API

How can I use google maps api to get direction to a set of co-ordinations? I also want to show a bigger map

I am currently just using the co-ordinations to show show a custom map

Thanks

J
john_yourspaceAsked:
Who is Participating?
 
Tom BeckConnect With a Mentor Commented:
See if this helps. It's a stand-alone example that basically does what you are asking. Of course, you will want to validate and sanitize any input data coming from the user. You could also use the API to geocode addresses into lat/lng coordinates.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Directions service</title>
    <style>
      html, body, #map-directions {
        height: 100%;
		width: 100%;
        margin: 0 auto;
        padding: 0px
      }
	  
      #directions-panel {
        height: 70%;
        float: left;
        width: 30%;
        overflow: auto;
		min-width: 300px
      }

      #rwmb-map-canvas-0 {
		height: 70%;
		width: 50%;
		float: left;
		min-width: 400px
      }
	  
    </style>

</head>

<body>
<button onClick="largerMap()">View larger map</button><br />
<label for="lat">From Coords: Lat</label>
<input type="text" id="lat" />
<label for="lng">Lng</label>
<input type="text" id="lng" />
<button onClick="calcRoute()">Get directions</button>
<div id="map-directions">
    <div id="rwmb-map-canvas-0"></div>
    <div id="directions-panel"></div>
</div>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var directionsDisplay = new google.maps.DirectionsRenderer();;
var directionsService = new google.maps.DirectionsService();
var map, center;
	( function()
	{
	
	center = new google.maps.LatLng( 54.3501461, -7.257281455599976 );
	mapOptions = {"zoom":14,"mapTypeId":"ROADMAP"};

	switch ( mapOptions.mapTypeId )
	{
		case "ROADMAP":
			mapOptions.mapTypeId = google.maps.MapTypeId.ROADMAP;
			break;
		case "SATELLITE":
			mapOptions.mapTypeId = google.maps.MapTypeId.SATELLITE;
			break;
		case "HYBRID":
			mapOptions.mapTypeId = google.maps.MapTypeId.HYBRID;
			break;
		case "TERRAIN":
			mapOptions.mapTypeId = google.maps.MapTypeId.TERRAIN;
			break;
	}
	mapOptions.center = center;		
	map = new google.maps.Map( document.getElementById( "rwmb-map-canvas-0" ), mapOptions );
	
		var marker = new google.maps.Marker( {
			position: center,
			map: map, title: "101 Address"
		} );
		var infoWindow = new google.maps.InfoWindow( {
			content: "<h5>101 Address</h5>"
		} );

		google.maps.event.addListener( marker, "click", function()
		{
			infoWindow.open( map, marker );
		} );
	} )();
	
	function calcRoute() {
	    directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('directions-panel'));
		var start = document.getElementById('lat').value + ',' + document.getElementById('lng').value;
		var end = center;
		var request = {
			origin:start,
			destination:end,
			travelMode: google.maps.TravelMode.DRIVING
		};
		directionsService.route(request, function(response, status) {
		  if (status == google.maps.DirectionsStatus.OK) {
			directionsDisplay.setDirections(response);
		  }
		});
		document.getElementById( "map-directions" ).style.height = '600px';
	}
	
	function largerMap() {
		document.getElementById( "map-directions" ).style.height = '600px';
	}
</script>                     
</body>
</html>

Open in new window

0
 
Ray PaseurCommented:
Please expand on the question a little bit, maybe with an example.  For us to answer in the most useful way we would need to see what you have got for input and what you want to create for output.  Thanks, ~Ray
0
 
john_yourspaceAuthor Commented:
Hi Ray,


<div id="rwmb-map-canvas-0" style="width:100%;height:200px"></div><script>if ( typeof google !== "object" || typeof google.maps !== "object" )
						document.write('<script src="//maps.google.com/maps/api/js?sensor=false"><\/script>')</script><script>
				( function()
				{
			
				var center = new google.maps.LatLng( 54.3501461, -7.257281455599976 ),
					mapOptions = {"zoom":14,"mapTypeId":"ROADMAP"},
					map;

				switch ( mapOptions.mapTypeId )
				{
					case "ROADMAP":
						mapOptions.mapTypeId = google.maps.MapTypeId.ROADMAP;
						break;
					case "SATELLITE":
						mapOptions.mapTypeId = google.maps.MapTypeId.SATELLITE;
						break;
					case "HYBRID":
						mapOptions.mapTypeId = google.maps.MapTypeId.HYBRID;
						break;
					case "TERRAIN":
						mapOptions.mapTypeId = google.maps.MapTypeId.TERRAIN;
						break;
				}
				mapOptions.center = center;
				map = new google.maps.Map( document.getElementById( "rwmb-map-canvas-0" ), mapOptions );
				
					var marker = new google.maps.Marker( {
						position: center,
						map: map, title: "101 Address"
					} );
						var infoWindow = new google.maps.InfoWindow( {
							content: "<h5>101 Address</h5>"
						} );

						google.maps.event.addListener( marker, "click", function()
						{
							infoWindow.open( map, marker );
						} );} )();
				</script>                        </p>

Open in new window



This is my code, its been generated via a plugin, This is working fine, I would like to connect up the following hyperlinks based on the above

<a href="#">View larger map</a>
                                          <a href="#">Get directions</a>
0
 
john_yourspaceAuthor Commented:
thanks for the help
0
All Courses

From novice to tech pro — start learning today.