Solved

Google Maps API

Posted on 2014-04-28
4
419 Views
Last Modified: 2014-05-06
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
Comment
Question by:john_yourspace
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 110

Expert Comment

by:Ray Paseur
ID: 40027431
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
 

Author Comment

by:john_yourspace
ID: 40027443
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
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40029709
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
 

Author Closing Comment

by:john_yourspace
ID: 40044198
thanks for the help
0

Featured Post

Industry Leaders: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question