Google Maps showing all gray

Asked

Viewed 956 times

1

I developed an html but I find problem to make it work, in my logic everything is right but does not run correctly.

What am I missing?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//PT" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Roteirizador Matteusin</title>
</head>
 
  <body>

		<div id="dvMapa" style="height: 600px; width: 80%;"> </div>		
		
		<script type="text/javascript">
			
			var directionsService = new google.maps.DirectionsService();

			var _mapPoints = new Array();
			var _directionsRenderer = '';
			var zoom_option = 6;
			var LegPoints = new Array();
			var map;
			function InitializeMap() {

				_directionsRenderer = new google.maps.DirectionsRenderer();

				var myOptions = {
					zoom: zoom_option,
					zoomControl: true,
					disableDoubleClickZoom: true,
					streetViewControl: false,
					center: new google.maps.LatLng(-8.598882, -55.641439),
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};

				map = new google.maps.Map(document.getElementById("dvMapa"), myOptions);
				_directionsRenderer.setMap(map);
				_directionsRenderer.setOptions({ draggable: true });

				google.maps.event.addListener(_directionsRenderer, 'directions_changed', function() {
				var myroute = _directionsRenderer.directions.routes[0];
				CreateRoute(myroute);
				zoom_option = map.getZoom();
				});
	
				drawRoute();
			}


			function CreateRoute(myroute) {
				var index = 0;
				if (_mapPoints.length > 10)
				{
					index = _mapPoints.length - 10;
				}

				for (var i = 0; i < myroute.legs.length; i++) {
					saveLegPoints(myroute.legs[i], index);
					index = index + 1;
				}
			}

			function saveLegPoints(leg, index) {
			var points = new Array();
				for (var i = 0; i < leg.steps.length; i++) {
					for (var j = 0; j < leg.steps[i].lat_lngs.length; j++) {
						points.push(leg.steps[i].lat_lngs[j]);
					}
				}
				LegPoints[index] = points;
			}

			function drawPreviousRoute(Legs) {
				var segPointValue = new Array();
				for (var i = 0; i < Legs; i++) {
					var innerArry = LegPoints[i];
					for (var j = 0; j < innerArry.length; j++) {
						segPointValue.push(innerArry[j]);
					}
					//addPreviousMarker(innerArry[0]);
				}
				var polyOptions = {
					path: segPointValue,
					strokeColor: '#F75C54',
					strokeWeight: 3
				};
				var poly = new google.maps.Polyline(polyOptions);
				poly.setMap(map);
			}

			function addPreviousMarker(myLatlng) {
				var marker = new google.maps.Marker({
					position: myLatlng,
					icon: "Images/red-circle.png",
					title: ""
				});
				marker.setMap(map);
			}

			function getRoutePointsAndWaypoints(Points) {
				if (Points.length <= 10) {
					drawRoutePointsAndWaypoints(Points);
				}
				else {
					var newPoints = new Array();
					var startPoint = Points.length - 10;
					var Legs = Points.length - 10;
					for (var i = startPoint; i < Points.length; i++) {
						newPoints.push(Points[i]);
					}
					drawRoutePointsAndWaypoints(newPoints);
					drawPreviousRoute(Legs);
				}
			}


			function drawRoutePointsAndWaypoints(Points) {
				var _waypoints = new Array();

				if (Points.length > 2)
				{
					for (var j = 1; j < Points.length - 1; j++) {
						var address = Points[j];
						if (address !== "") {
							_waypoints.push({
								location: address,
								stopover: true
							});
						}
					}		
					drawRoute(Points[0], Points[Points.length - 1], _waypoints);
				} else if (Points.length > 1) {
					drawRoute(Points[_mapPoints.length - 2], Points[Points.length - 1], _waypoints);
				} else {
					drawRoute(Points[_mapPoints.length - 1], Points[Points.length - 1], _waypoints);
				}
			}

			function drawRoute() {
				var _request = '';
					_request = {
						origin: 'Rua das Bananeiras, Pq. Santana - Santana de Parnaiba',
						destination: 'Peixes, Parque Santana - SP',
						waypoints: [{location: 'Rua Virgem, Parque Santana - SP'}, {location: 'Rua Touro, Parque Santana - SP'}],
						optimizeWaypoints: true,
						travelMode: google.maps.DirectionsTravelMode.DRIVING
					};
  
				directionsService.route(_request, function(_response, _status) {
					if (_status == google.maps.DirectionsStatus.OK) {
						_directionsRenderer.setDirections(_response);
					}
				});
			}
			
		</script>
		
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?signed_in=false&callback=InitializeMap" async defer></script>
		
	</body>
</html>

javascript google-maps google-api

  • The logic should not be wrong, what happens is that google maps, requires a Key API and this API Key has a limit of access depending on the user, you can use an api with "https" same as the ITAÚ site that will have an unlimited access, I believe.

  • https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=false&language=pt-br

  • see if this helps you: http://answall.com/questions/74934/google-maps-e-jquery-problems

  • Good morning friends. Unfortunately it didn’t work, I applied a KEY, today was the first access of the day and it didn’t work. I have this code separated by . html e . js, there they work normally, hence it is an attempt to unify the two

  • I’ll see what I can do to help you.

1 answer

1


I arranged for the map to be displayed, however, there is a problem in route, I do not know if they are correct, but you can look for more information here, I believe you are exceeding the limit of 8 waypoints: https://developers.google.com/maps/documentation/javascript/examples/directions-travel-modes 

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//PT" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Roteirizador Matteusin</title>
</head>
 
  <body>

	<div id="dvMapa" style="height: 600px; width: 80%;"> </div>		
	
	<script type="text/javascript">
		
		var _directionsRenderer,
		    directionsService,
		    map,
		    myOptions,
		    _request;

		var _mapPoints = new Array();
		
		var zoom_option = 6;
		var LegPoints = new Array();    

		function InitializeMap() {

			var _directionsRenderer = new google.maps.DirectionsRenderer();
                        var directionsService = new google.maps.DirectionsService();
			myOptions = {
				zoom: zoom_option,
				zoomControl: true,
				disableDoubleClickZoom: true,
				streetViewControl: false,
				center: new google.maps.LatLng(-8.598882, -55.641439),
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};

			map = new google.maps.Map(document.getElementById("dvMapa"), myOptions);
			_directionsRenderer.setMap(map);
			_directionsRenderer.setOptions({ draggable: true });

			google.maps.event.addListener(_directionsRenderer, 'directions_changed', function() {
			var myroute = _directionsRenderer.directions.routes[0];
			CreateRoute(myroute);
			zoom_option = map.getZoom();
			});
         
                  drawRoute();
			
		}

		function CreateRoute(myroute) {
			var index = 0;
			if (_mapPoints.length > 10)
			{
				index = _mapPoints.length - 10;
			}

			for (var i = 0; i < myroute.legs.length; i++) {
				saveLegPoints(myroute.legs[i], index);
				index = index + 1;
			}
		}

		function saveLegPoints(leg, index) {
		var points = new Array();
			for (var i = 0; i < leg.steps.length; i++) {
				for (var j = 0; j < leg.steps[i].lat_lngs.length; j++) {
					points.push(leg.steps[i].lat_lngs[j]);
				}
			}
			LegPoints[index] = points;
		}

		function drawPreviousRoute(Legs) {
			var segPointValue = new Array();
			for (var i = 0; i < Legs; i++) {
				var innerArry = LegPoints[i];
				for (var j = 0; j < innerArry.length; j++) {
					segPointValue.push(innerArry[j]);
				}
				//addPreviousMarker(innerArry[0]);
			}
			var polyOptions = {
				path: segPointValue,
				strokeColor: '#F75C54',
				strokeWeight: 3
			};
			var poly = new google.maps.Polyline(polyOptions);
			poly.setMap(map);
		}

		function addPreviousMarker(myLatlng) {
			var marker = new google.maps.Marker({
				position: myLatlng,
				icon: "Images/red-circle.png",
				title: ""
			});
			marker.setMap(map);
		}

		function getRoutePointsAndWaypoints(Points) {
			if (Points.length <= 10) {
				drawRoutePointsAndWaypoints(Points);
			}
			else {
				var newPoints = new Array();
				var startPoint = Points.length - 10;
				var Legs = Points.length - 10;
				for (var i = startPoint; i < Points.length; i++) {
					newPoints.push(Points[i]);
				}
				drawRoutePointsAndWaypoints(newPoints);
				drawPreviousRoute(Legs);
			}
		}


		function drawRoutePointsAndWaypoints(Points) {
			var _waypoints = new Array();

			if (Points.length > 2)
			{
				for (var j = 1; j < Points.length - 1; j++) {
					var address = Points[j];
					if (address !== "") {
						_waypoints.push({
							location: address,
							stopover: true
						});
					}
				}		
				drawRoute(Points[0], Points[Points.length - 1], _waypoints);
			} else if (Points.length > 1) {
				drawRoute(Points[_mapPoints.length - 2], Points[Points.length - 1], _waypoints);
			} else {
				drawRoute(Points[_mapPoints.length - 1], Points[Points.length - 1], _waypoints);
			}
		}

		function drawRoute() {
				var _request = {
					origin: 'Rua das Bananeiras, Pq. Santana - Santana de Parnaiba',
					destination: 'Peixes, Parque Santana - SP',
					waypoints: [{location: 'Rua Virgem, Parque Santana - SP'}, {location: 'Rua Touro, Parque Santana - SP'}],
					optimizeWaypoints: true,
					travelMode: google.maps.DirectionsTravelMode.DRIVING
				};

			directionsService.route(_request, function(_response, _status) {
				if (_status == google.maps.DirectionsStatus.OK) {
					_directionsRenderer.setDirections(_response);
				}
			});
		}

	</script>
	<script type="text/javascript" src="https://maps-api-ssl.google.com/maps/api/js?signed_in=false&callback=InitializeMap" async defer></script>
	
</body>
</html>

  • Good afternoon Ivan. Thank you very much, I will try to review adjust based on what you passed me. But I managed to do a trick to unify the scrips with HTML and it worked, I will work on the adjustments now, as you passed me there. Thank you very much :D

Browser other questions tagged javascript google-maps google-api

You are not signed in. Login or sign up in order to post.