Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Google Maps API

Posted on 2014-04-28
4
Medium Priority
?
447 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 111

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 2000 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

Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

Question has a verified solution.

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

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…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

704 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