Pass Google Maps SearchBox result to Directions Service - google-maps

After reading documentation for the SearchBox class, the Places library including the AutoComplete class, and the Directions service, I cannot figure out how to pass the address selected by a user from the SearchBox to the Directions service to draw the map. The map and marker display correctly, and the SearchBox displays and functions correctly. On the "place_change" event, though, nothing happens. My code:
var rawlatitude = <?php echo $loc_lat; ?>;
var rawlongitude = <?php echo $loc_long; ?>;
var latitude = parseFloat(rawlatitude);
var longitude = parseFloat(rawlongitude);
var latlong = new google.maps.LatLng(latitude,longitude);
google.maps.event.addDomListener(window, 'load',initMap(latitude,longitude));
function initMap(lat,lng) {
// instantiate directions service object
var directionsService = new google.maps.DirectionsService;
// create map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: latlong
});
// add marker
var marker = new google.maps.Marker({
position: latlong,
map: map
});
// put address search box into map
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// create directions renderer and bind it to map
var directionsDisplay = new google.maps.DirectionsRenderer({map: map});
// listen to and respond to address search
var onChangeHandler = function() {
var location = searchBox.getPlaces();
var start = location.place_id;
calculateAndDisplayRoute(directionsDisplay, directionsService, map, start);
};
google.maps.event.addListener(searchBox, 'place_change', onChangeHandler);
}
function calculateAndDisplayRoute(directionsDisplay, directionsService, map, start) {
directionsService.route({
origin: start,
destination: latlong,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if(status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}

As Dr.Molle observed in his comment,
There is no place_changed-event for a SearchBox, it's an event for Autocomplete. The event for a SearchBox is called places_changed.
Also note that a SearchBox.getPlaces() returns an array with places
working fiddle
working code snippet:
var rawlatitude = 40.7127837;
var rawlongitude = -74.0059413;
var latitude = parseFloat(rawlatitude);
var longitude = parseFloat(rawlongitude);
var latlong = new google.maps.LatLng(latitude, longitude);
var viewport = {
"south": 40.4960439,
"west": -74.2557349,
"north": 40.91525559999999,
"east": -73.7002721
};
google.maps.event.addDomListener(window, 'load', function() {
initMap(40.735657, -74.1723667);
});
function initMap(lat, lng) {
// instantiate directions service object
var directionsService = new google.maps.DirectionsService;
// create map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: latlong
});
// add marker
var marker = new google.maps.Marker({
position: latlong,
draggable: true,
map: map
});
// put address search box into map
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input, {
bounds: viewport
});
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// create directions renderer and bind it to map
var directionsDisplay = new google.maps.DirectionsRenderer({
map: map
});
// listen to and respond to address search
var onChangeHandler = function() {
var locations = searchBox.getPlaces();
var start = locations[0].place_id;
var bounds = new google.maps.LatLngBounds();
bounds.extend(latlong);
bounds.extend(locations[0].geometry.location);
map.fitBounds(bounds);
var marker = new google.maps.Marker({
position: locations[0].geometry.location,
map: map,
title: locations[0].name
})
calculateAndDisplayRoute(directionsDisplay, directionsService, map, start);
};
google.maps.event.addListener(searchBox, 'places_changed', onChangeHandler);
}
function calculateAndDisplayRoute(directionsDisplay, directionsService, map, start) {
directionsService.route({
origin: {
placeId: start
},
destination: {
location: latlong
},
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<input id="pac-input" />
<div id="map"></div>

Related

Update Pickup location in google map

I want to show the current position based on user lat & long:
Drop off location always stay static but pick up location (icon) need to move as per lat long, but i am not find the correct way my code is:
$(document).ready(function() {
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var infowindow = new google.maps.InfoWindow();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true
});
var mapOptions = {
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
map = new google.maps.Map(document.getElementById("map"), mapOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute(pickUpLat,pickUplon,droplat,droplon) {
var pickUpLat = "<?= $pickUpLat ?>";
var pickUplon = "<?= $pickUplon ?>";
var droplat = "<?= $model->drop_off_latitude ?>";
var droplon = "<?= $model->drop_off_longitude ?>";
var start = new google.maps.LatLng(pickUpLat,pickUplon);
var end = new google.maps.LatLng(droplat,droplon);
createMarker(start,"<?= $model->item_delivery_title; ?>","<?= Yii::$app->urlManagerFrontEnd->createAbsoluteUrl('/images/track_route.png')?>");
createMarker(end,"<?= $model->drop_off_address; ?>",'');
var request = {
origin: start,
destination: end,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.WALKING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
}
});
}
function createMarker(latlng,title,icon) {
var marker = new google.maps.Marker({
position: latlng,
animation: google.maps.Animation.DROP,
title: title,
icon: icon,
map: map
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(title);
infowindow.open(map, marker);
});
}
initialize();
function makeRequest(){
$.ajax({
url:"<?php echo Url::base(true).'/delivery/map-data'; ?>",
type:"POST",
data:{"delivery_id":<?= $model->id ?>}
})
.done(function(result){
var respon=JSON.parse(result);
if(respon.status==200){
// want to cupdate the pickup location here
}
});
}
setInterval(makeRequest, (3000));
});
Make request function always update the pick up lat and long:
But I am not found any way to move the pick up icon (the van) see image :
The red marker is drop off address and the van is pickup address
You should create two variables for pick up and drop off marker. Also your createMarker function should return marker instance. After you receive request from server update pickUpMarker position.
$(document).ready(function() {
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var infowindow = new google.maps.InfoWindow();
var map;
var pickUpMarker, dropToMarker; // add marker variables
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true
});
var mapOptions = {
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
map = new google.maps.Map(document.getElementById("map"), mapOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute(pickUpLat,pickUplon,droplat,droplon) {
var pickUpLat = "<?= $pickUpLat ?>";
var pickUplon = "<?= $pickUplon ?>";
var droplat = "<?= $model->drop_off_latitude ?>";
var droplon = "<?= $model->drop_off_longitude ?>";
var start = new google.maps.LatLng(pickUpLat,pickUplon);
var end = new google.maps.LatLng(droplat,droplon);
if(!pickUpMarker) {
pickUpMarker = createMarker(start,"<?= $model->item_delivery_title; ?>","<?= Yii::$app->urlManagerFrontEnd->createAbsoluteUrl('/images/track_route.png')?>");
} else {
pickUpMarker.setPosition(start)
}
if(!dropToMarker) {
dropToMarker = createMarker(end,"<?= $model->drop_off_address; ?>",'');
} else {
dropToMarker.setPosition(start)
}
var request = {
origin: start,
destination: end,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.WALKING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
}
});
}
function createMarker(latlng,title,icon) {
var marker = new google.maps.Marker({
position: latlng,
animation: google.maps.Animation.DROP,
title: title,
icon: icon,
map: map
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(title);
infowindow.open(map, marker);
});
return marker;
}
initialize();
function makeRequest(){
$.ajax({
url:"<?php echo Url::base(true).'/delivery/map-data'; ?>",
type:"POST",
data:{"delivery_id":<?= $model->id ?>}
})
.done(function(result){
var respon=JSON.parse(result);
if(respon.status==200){
// want to cupdate the pickup location here
pickUpMarker.setPosition(result.position)
}
});
}
setInterval(makeRequest, (3000));
});

The direction does not show my current location and the destination

See this image.
I try to show my current location to the destination but the direction does not show up in the map, it just show the route at panel only.
navigator.geolocation.getCurrentPosition(function (position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var coords = new google.maps.LatLng(latitude, longitude);
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
map: map,
panel: document.getElementById('right-panel')
});
var trafficLayer = new google.maps.TrafficLayer();
var mapOptions =
{
zoom: 15,
center: coords
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
displayRoute(directionsService, directionsDisplay);
function displayRoute(service, display) {
service.route({
origin: coords,
destination: new google.maps.LatLng(5.409722, 100.313319),
provideRouteAlternatives: true,
travelMode: google.maps.TravelMode.DRIVING
}, function (response, status) {
if (status === google.maps.DirectionsStatus.OK) {
display.setDirections(response);
} else {
alert('Could not display directions due to: ' + status);
}
});
}
});
The map does not show the direction from my current location to destination.
When you create your google.maps.DirectionsRenderer, the map is undefined. Either create the google.maps.DirectionsRenderer after the map, or call .setMap on it once the map is defined.
var coords = new google.maps.LatLng(latitude, longitude);
var directionsService = new google.maps.DirectionsService;
var trafficLayer = new google.maps.TrafficLayer();
var mapOptions = {
zoom: 15,
center: coords
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
map: map,
panel: document.getElementById('right-panel')
});
displayRoute(directionsService, directionsDisplay);
proof of concept fiddle
code snippet:
var geocoder;
var map;
// [ 0 ]: Tapah, Perak, Malaysia (4.19773, 101.261529)
function initialize() {
var latitude = 4.19773;
var longitude = 101.261529;
var coords = new google.maps.LatLng(latitude, longitude);
var directionsService = new google.maps.DirectionsService;
var trafficLayer = new google.maps.TrafficLayer();
var mapOptions = {
zoom: 15,
center: coords
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
map: map,
panel: document.getElementById('right-panel')
});
displayRoute(directionsService, directionsDisplay);
function displayRoute(service, display) {
service.route({
origin: coords,
destination: new google.maps.LatLng(5.409722, 100.313319),
provideRouteAlternatives: true,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
display.setDirections(response);
} else {
alert('Could not display directions due to: ' + status);
}
});
}
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
<div id="right-panel"></div>

DirectionsService not working as required by the code

I am trying to make routes between any 2 locations I pass using DirectionsService of google maps. The locations are coming to me dynamically. But the problem I am facing is when the next 2 coordinates come it removes the previous route and displays the new route with the new coordinaates. I also can't use the waypoints because max. 8 waypoints are allowed and I need more than that.
here is my code:
var marker;
var map;
var mapOptions;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
function initialize() {
var rendererOptions = {
map : map,
suppressMarkers : true
}
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
mapOptions = {
zoom: 12,
center: new google.maps.LatLng(23.53265,77.754812)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
directionsDisplay.setMap(map);
}
//var image = 'C:\Users\Samir\Desktop\download.jpg';
var start = new google.maps.LatLng(23.32654,77.32685);
function Plot_Data(latlng){
//end = new google.maps.LatLng(lat,lng);
marker = new google.maps.Marker({
position: latlng ,
map: map
});
var request = {
origin:start,
destination:latlng,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
start = latlng;
}
A directionsRenderer will display only one route at a time. This will add a new one for each time you call the Plot_Data function, but will still be subject to the API rate and query limits:
var marker;
var map;
var mapOptions;
var directionsDisplay = [];
var directionsService = new google.maps.DirectionsService();
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
function initialize() {
var rendererOptions = {
map : map,
suppressMarkers : true
}
directionsDisplay.push(new google.maps.DirectionsRenderer(rendererOptions));
mapOptions = {
zoom: 12,
center: new google.maps.LatLng(23.53265,77.754812)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
directionsDisplay.setMap(map);
}
//var image = 'C:\Users\Samir\Desktop\download.jpg';
var start = new google.maps.LatLng(23.32654,77.32685);
function Plot_Data(latlng){
//end = new google.maps.LatLng(lat,lng);
marker = new google.maps.Marker({
position: latlng ,
map: map
});
var request = {
origin:start,
destination:latlng,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay[directionsDisplay.length-1].setDirections(response);
directionsDisplay[directionsDisplay.length-1].setMap(map);
directionsDisplay.push(new google.maps.DirectionsRenderer(rendererOptions));
} else alert("directions request failed: " +status);
});
start = latlng;
}

error setting start point from geolocation calc route() gmaps v3

i use that code to have the geolocation in my app and it works good also when i'm moving. I added some few lines to create a calculation from the geolocation to an end (fixed) point with fixed lat-long. I don't understand why the origin point in my code is not accepted (fireBug says that i cannot call a property [object Object] on it) but i cannot figure out.
Here are the code about the gmaps v3:
//image for the marker
var imageLoc = '../../img/bbb3.gif'
var map;
//initialize the maps
function initialize() {
//call directionsService and Display for the route
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
//map option
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(44.49489, 11.34262),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
//create the marker for the geolocation
marker = new google.maps.Marker({
map: map,
icon: imageLoc
});
//call updatePos() function
updatePos();
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('panel'));
var request = {
//origin is the marker of my geolocation
origin: marker,
//destination is a fxed position
destination: new google.maps.LatLng(44.496099,11.340246),
travelMode: google.maps.DirectionsTravelMode.WALKING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
var i;
//here I set my marker (if i==0 -> first run)
function updatePos(){
var options = {
timeout: 60000, enableHighAccuracy: true
};
var myUpdatedPos = navigator.geolocation.watchPosition(onSuccess, onError, options);
function onSuccess(position) {
if (i==0){
marker = new google.maps.Marker({
position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
map: map
});
}
i++;
//here I update the position
newLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
marker.setPosition(newLatlng);
}
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
}
google.maps.event.addDomListener(window, 'load', initialize);
Does anyne have idea why?
kind regards
Brus
The directionRequest takes either a string (an "address") or a google.maps.LatLng for origin and destination. marker is a google.maps.Marker object.
var request = {
//origin is the marker of my geolocation
origin: marker,
//destination is a fxed position
destination: new google.maps.LatLng(44.496099,11.340246),
travelMode: google.maps.DirectionsTravelMode.WALKING
};
To get the position of a marker, use its getPosition method:
var request = {
//origin is the marker of my geolocation
origin: marker.getPosition(),
//destination is a fxed position
destination: new google.maps.LatLng(44.496099,11.340246),
travelMode: google.maps.DirectionsTravelMode.WALKING
};
To give the marker a position when you initialize it, you can do this:
//create the marker for the geolocation
marker = new google.maps.Marker({
map: map,
position: map.getCenter(),
icon: imageLoc
});

Why won't google map navigate on my web page?

I want to locate a user's location using Geolocation and then navigate between user;s position and a fix point, but Google map just won't navigate and I am using the codes from Google's official documentation!
What's wrong? I am going mad after tried thousands of times,plz help
<script type="text/javascript">
$( "#map-page" ).live( "pageinit", function() {
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var salon = new google.maps.LatLng(22.981666,120.194301);
var defaultLatLng = new google.maps.LatLng(22.983587,120.22599); // Default to Hollywood, CA when no geolocation support
if ( navigator.geolocation ) {
function success(pos) {
// Location found, show map with these coordinates
drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
calcRoute(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
}
function fail(error) {
console.log(error);
drawMap(defaultLatLng); // Failed to find location, show default map
}
// Find the users current position. Cache the location for 5 minutes, timeout after 6 seconds
navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
} else {
drawMap(defaultLatLng); // No geolocation support, show default map
}
function drawMap(latlng) {
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
// Add an overlay to the map of current lat/lng
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Greetings!"
});
var marker = new google.maps.Marker({
position:new google.maps.LatLng(22.981666,120.194301),
map:map,
title:"the salon"
});
}
function calcRoute(latlng) {
var start = latlng;
var end = new google.maps.LatLng(22.981666,120.194301);
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);
}
});
}
});
</script>
You forgot to setup directionsDisplay.