Solved

Google Maps API

Posted on 2014-04-28
4
415 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
  • 2
4 Comments
 
LVL 109

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

These days socially coordinated efforts have turned into a critical requirement for enterprises.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

856 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