Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 456
  • Last Modified:

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
0
john_yourspace
Asked:
john_yourspace
  • 2
1 Solution
 
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
 
Tom BeckCommented:
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
 
john_yourspaceAuthor Commented:
thanks for the help
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now