I reading stuff about the Google API and I wanted to implement the usual Google driving directions that Google maps has for 2 different points. Here's my code so far
(function() {
window.onload = function() {
// Creating a map
var options = {
zoom: 5,
center: new google.maps.LatLng(36.1834, -117.4960),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), options);
// Creating an array that will contain the points for the polyline
var route = [
new google.maps.LatLng(37.7671, -122.4206),
new google.maps.LatLng(34.0485, -118.2568)
];
// Creating the polyline object
var polyline = new google.maps.Polyline({
path: route,
strokeColor: "#ff0000",
strokeOpacity: 0.6,
strokeWeight: 5
});
// Adding the polyline to the map
polyline.setMap(map);
};
})();
It has a straight line between the two cities...
Here's an example of using the DirectionsService:
var directionsService = new google.maps.DirectionsService();
var directionsDisplay;
var homeLatlng;
function initialize() {
homeLatlng = new google.maps.LatLng(37.7671, -122.4206);
var myOptions = {
zoom: 10,
center: homeLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var infowindow = new google.maps.InfoWindow({
content: ''
});
directionsDisplay = new google.maps.DirectionsRenderer({
draggable: false,
map: map,
markerOptions: {
draggable: false
},
panel: document.getElementById("directionsPanel"),
infoWindow: infowindow
});
var request = {
origin:homeLatlng,
destination:new google.maps.LatLng(34.0485, -118.2568),
travelMode: google.maps.DirectionsTravelMode[DRIVING],
unitSystem: google.maps.UnitSystem[METRIC]
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
If you want to draw a route based on driving directions (or walking directions or transit directions or biking directions), use the Google Directions API. I don't believe the API won't draw the route for you, but it will give you all the lat/lng points that you need to connect in your polyline to show the route.
Related
I'm working with Google Maps to show a cars last location. Often times this will be in a parking lot off of a main road, however when I input the coordinates for the parking lot carLatLng into Google's routing engine the response I get looks to be the nearest road. How do I get it so that the same coordinates I enter are the ones I get from my response?
var carLatLng = new google.maps.LatLng(29.9461,-90.07)
var request = {
origin: carLatLng,
destination:
waypoints: [],
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.WALKING
};
self.directionsService.route(request, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
var lat = response.routes[0].legs[0].end_location.lat();
var lng = response.routes[0].legs[0].end_location.lng();
// lat = 29.946164
// lng = -90.0702933
}
});
The DirectionsService always returns start/end points for driving directions on the road. If you want the result to end somewhere else, you need to extend the polyline yourself (you have the original coordinates, draw a polyline from there to the end of the route from the directions service).
proof of concept fiddle
code snippet:
var geocoder;
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var carLatLng = new google.maps.LatLng(29.9461, -90.07);
var carMarker = new google.maps.Marker({
map: map,
position: carLatLng
});
var request = {
origin: "Dixon, New Orleans, LA",
destination: carLatLng,
waypoints: [],
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.WALKING
};
var directionsService = new google.maps.DirectionsService();
var directionsRenderer = new google.maps.DirectionsRenderer({
map: map,
preserveViewport: true,
polylineOptions: {
strokeColor: "#0000FF"
}
})
directionsService.route(request, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
var lat = response.routes[0].legs[0].end_location.lat();
var lng = response.routes[0].legs[0].end_location.lng();
directionsRenderer.setDirections(response);
map.setCenter(carLatLng);
map.setZoom(20);
var polyline = new google.maps.Polyline({
map: map,
strokeColor: "#0000FF",
path: [carLatLng, response.routes[0].legs[0].end_location]
});
// lat = 29.946164
// lng = -90.0702933
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
I've done a lot lately with Google Map API, unfortunately not with the routing service.
But have a look at these tutorials, they are quite detailed, I found them very helpful at times: http://econym.org.uk/gmap/
For your case I'd especially look at part 26 onwards.
I've followed the instruction given on the Google Maps API site, but my circle is never being drawn to my map, and I don't really understand what I am missing, could anybody point me in the right direction?
Here is my method to add the new address marker and search radius to the map (Note that the marker is added as expected):
// Add the users point to the map
function addAddress() {
// Get the users current location
var location = document.getElementById("P1_LOCATION").value; // Users postcode
var radius_size = document.getElementById("P1_RADIUS").value; // Users radius size in miles
var search_radius;
// Translate the users location onto the map
geocoder.geocode({ 'address': location}, function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
// Center around the users location
map.setCenter(results[0].geometry.location);
// Place a marker where the user is situated
var marker = new google.maps.Marker({
map:map,
position: results[0].geometry.location
});
// configure the radius
// Construct the radius circle
var radiusOptions = {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: marker.center, // I want to set the center around the users location
radius: radius_size // I want the radius to be in miles, how do I do this?
};
// add the radius circle to the map
search_radius = new google.maps.Circle(radiusOptions);
}
});
}
And I'm sure someone will ask if I have configured a base map object, this is done in my initializer method:
var geocoder;
var map;
// Create our base map object
function initialize()
{
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(0,0);
var mapOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
How would I go about getting the radius to display around the given point? any suggestiosn would be greatly appreciated.
I get this error with the posted code: Uncaught InvalidValueError: setRadius: not a number
But the real issues was this: center: marker.center, should be center: marker.getPosition(), (a google.maps.Marker doesn't have a "center" property)
working code snippet:
// Add the users point to the map
function addAddress() {
// Get the users current location
var location = document.getElementById("P1_LOCATION").value; // Users postcode
var radius_size = parseFloat(document.getElementById("P1_RADIUS").value); // Users radius size in meters (unless you scale it to miles)
var search_radius;
// Translate the users location onto the map
geocoder.geocode({
'address': location
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// Center around the users location
map.setCenter(results[0].geometry.location);
// Place a marker where the user is situated
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
// configure the radius
// Construct the radius circle
var radiusOptions = {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: marker.getPosition(), // I want to set the center around the users location
radius: radius_size // I want the radius to be in miles, how do I do this?
};
// add the radius circle to the map
search_radius = new google.maps.Circle(radiusOptions);
}
});
}
var geocoder;
var map;
// Create our base map object
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(0, 0);
var mapOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="P1_LOCATION" value="08646" type="text" />
<input id="P1_RADIUS" value="10000" type="text" />
<input id="geocode" value="geocode" type="button" onclick="addAddress()" />
<div id="map" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
For anybody in future who encounters the same problem, make sure you take the extra step which is not demonstrated in the API guide, and that is to set the Map which the radius object belongs too, in my case:
search_radius.setMap(map);
I am using Google API v3 for "directions to here". However, the maps are not getting loaded properly. I am getting no error in logs.
When the page loads, I do the following:
var startPoint = new google.maps.LatLng(start.lat(), start.lng());
var endPoint = new google.maps.LatLng(parseFloat(end.latitude), parseFloat(end.longitude));
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 15,
mapTypeControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
center: endPoint
};
var map = new google.maps.Map(document.getElementById("branchLocatorSiteMapCanvas"), mapOptions);
$r.currentPage.map = map;
$page.off('pageshow').on('pageshow', function () {
// Suitable for V3 and fix for map div is not rendered
if ($r.currentPage.map) {
var timer = window.setTimeout(function () {
google.maps.event.trigger($r.currentPage.map, 'resize');
if (endPoint) {
$r.currentPage.map.setCenter(endPoint);
}
else if (startPoint) {
$r.currentPage.map.setCenter(startPoint);
}
window.clearTimeout(timer);
}, 400);
}
});
if ($r.currentPage.map) {
google.maps.event.addListenerOnce($r.currentPage.map, 'idle', function () {
// Do something only the first time the map is loaded
google.maps.event.trigger($r.currentPage.map, 'resize');
$r.currentPage.map.setCenter(endPoint);
});
I use this snippet for Direction Service and Rendering.
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
I didn't try it with your code example, but you can take this simpler demo project to see how to make it work in a Worklight 6.0.0.2-based app: Google Maps Directions Demo project.
The demo project is based on this example via the Google Maps documentation.
End result is:
JavaScript portion of the app:
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
var map;
function wlCommonInit(){
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 7,
disableDefaultUI: false,
center: chicago
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
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);
}
});
}
I am displaying google map with code below, I want to hide Polyline between A to B. All answers on google talk about creating an array and then doing array.setmap(null). can I hide polyline without using arrays. In other case, how should I use array to hide polyline using code below.
Edit: I need marker A and B to be shown
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var time;
function initialize() {
var rendererOptions = {
map: map,
draggable: true
}
// Instantiate a directions service.
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
// Create a map and center it on islamabad.
var islamabad = new google.maps.LatLng(33.7167, 73.0667);
var mapOptions = {
zoom: 13,
center: islamabad
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = document.getElementById('MainContent_txtFrom').value;
var end = document.getElementById('MainContent_txtTo').value;
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);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
If you want to render the directions but hide the polyline, use the DirectionsRendererOptions suppressPolylines.
function initialize() {
var rendererOptions = {
suppressPolylines: true,
map: map,
draggable: true
}
// Instantiate a directions service.
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
As shown in the demo below, you can remove polylines by two means:
setting the option suppressPolylines to true in directionsDisplay, your google.maps.DirectionsRenderer by using
directionsDisplay.setOptions({
suppressPolylines: true
});
This will preserve the start- and end-point markers.
The method setOptions(options:DirectionsRendererOptions) changes the options settings of DirectionsRenderer after initialization.
use directionsDisplay.setMap(null); to remove all directions rendering, but this includes markers, so if you do that you will need to add extra markers to the map.
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var time;
var pointA = new google.maps.LatLng(48.86, 2.35);
var pointB = new google.maps.LatLng(33.7167, 73.0667);
function initialize() {
var rendererOptions = {
map: map,
draggable: true
}
// Instantiate a directions service.
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
// Create a map and center it on islamabad.
var islamabad = new google.maps.LatLng(33.7167, 73.0667);
var mapOptions = {
zoom: 13,
center: islamabad
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = pointA;
var end = pointB;
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);
}
});
};
function removeRoute() {
directionsDisplay.setOptions({
suppressPolylines: true
});
// this "refreshes" the renderer
directionsDisplay.setMap(map);
};
function removeRouteNull() {
directionsDisplay.setMap(null);
};
google.maps.event.addDomListener(window, 'load', initialize);
#map {
height: 280px;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<button onclick="removeRoute()">Remove route (suppressPolylines)</button>
<button onclick="removeRouteNull()">Remove route (setMap(null))</button>
<button onclick="initialize()">Undo all</button>
<section id="map"></section>
If you refer to this answer: Google Maps v3 directionsRenderer.setMap(null) not working to clear previous directions you should see what you're looking for.
You do not need to use an array as you're implementing the directionsRenderer object. If you declare this globally (Edit Which I now see you have already) (so that you only have one instance at any given time) then you can simply use directionsDisplay.setMap(null) to remove previous directions rendered.
If you want to render the markers from the response but hide the polyline I suppose the simplest (but I would imagine by no means cleanest) way would be to simply alter the opacity on the polyline object:
var myPolylineOptions = new google.maps.Polyline({
strokeColor: '#FF0000',
strokeOpacity: 0.00001,
strokeWeight: 0
});
And then assign it to your renderer:
directionsDisplay = new google.maps.DirectionsRenderer({polylineOptions: myPolylineOptions});
I am new to API's and I have this to create my map but I want to take the driving directions out what should I change to get this to happen. I have a ton of markers being rendered from MySQL so I don't need to start over, just remove the directions.
Here is the web page.
This is the code for rendering the map:
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
var request = {
origin: '<?php echo $orgcitname; ?>',
destination: '<?php echo $descitname; ?>',
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
To remove the directions from the map, you call the google.maps.DirectionsRenderer's setMap() function without any parameters. So in your case:
directionsDisplay.setMap();
var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
That will leave you with just your map.. no directions..