Develop Reference

Clear directions on Google Map with VueJS

I have the following code in my app:
createCargoRoute: function(cargo_id) {
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var storehouse = new google.maps.LatLng(53.243757, 50.269379);
var cargo_orders = this.orders.filter(order => this.cargos[cargo_id]['orders_ids'].includes(order.id));
var cargo_waypoints = cargo_orders.map(cargo_order => cargo_order['waypoint']);
directionsDisplay.setMap(this.$refs.olkonmap.$mapObject);
directionsService.route({
origin: storehouse,
destination: storehouse,
travelMode: 'DRIVING',
waypoints: cargo_waypoints,
optimizeWaypoints: true
}, function(result, status) {
if(status == 'OK') {
directionsDisplay.setDirections(result);
}
});
},
It works, but when I call it second time to draw another route, the first route doesn't removes from map. I read that I need to call directionsDisplay.setDirections(null) to clear directions and it works, for example, if I add setTimeout(function() { directionsDisplay.setDirections(null); }, 2000);
to createCargoRoute function.
But if I add directionsDisplay.setDirections(null); before any actions in createCargoRoute, it has no effect at second call. I think, it may be due to new DirectionsRenderer object which instantiates every time I call the function. Any advice would be appreciated. Thank you!

This is not good idea to create new DirectionsService and DirectionsRenderer on each call. Move them to mounted() and keep instances in component options (instead of putting them to data). Maybe it help:
export default {
// will be accessible via this.$options because no reactive data is needed
directionsService: null,
directionsDisplay: null,
mounted() {
this.$options.directionsService = new google.maps.DirectionsService();
this.$options.directionsDisplay = new google.maps.DirectionsRenderer();
this.$options.directionsDisplay.setMap(this.$refs.olkonmap.$mapObject);
},
methods: {
createCargoRoute: function(cargo_id) {
// clear existing directions
this.$options.directionsDisplay.set('directions', null);
var storehouse = new google.maps.LatLng(53.243757, 50.269379);
var cargo_orders = this.orders.filter(order => this.cargos[cargo_id]['orders_ids'].includes(order.id));
var cargo_waypoints = cargo_orders.map(cargo_order => cargo_order['waypoint']);
this.$options.directionsService.route({
origin: storehouse,
destination: storehouse,
travelMode: 'DRIVING',
waypoints: cargo_waypoints,
optimizeWaypoints: true
}, (result, status) => {
if(status == 'OK') {
this.$options.directionsDisplay.setDirections(result);
}
});
},
}
}

Removing directions overlay using angular-google-maps and angular2

Im using an api to populate a map with several markers, my desired functionality is for a user to click a button associated with a marker and it would plot directions from their current location. On the first instance it works perfectly but the current directions plotted just remain when trying to change the coordinates
Im using angular2-google-maps to plot the markers but I had to find a custom directive for directions. I think the problem is that I need to destroy the instance of the directions but using ngIf didnt help. I also tried resetting the instance of the direction in my directive using directionsDisplay.set('directions', null); but that didnt work either
/* directions.directive.ts */
import {GoogleMapsAPIWrapper} from '#agm/core/services/google-maps-api-wrapper';
import { Directive, Input} from '#angular/core';
declare var google: any;
#Directive({
selector: '<agm-map-directions [origin]="origin" [destination]="destination" #test></agm-map-directions>'
})
export class DirectionsMapDirective {
#Input() origin;
#Input() destination;
constructor (private gmapsApi: GoogleMapsAPIWrapper) {}
ngOnInit(){
this.gmapsApi.getNativeMap().then(map => {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
console.log("test");
directionsDisplay.setMap(map);
directionsService.route({
origin: {lat: this.origin.latitude, lng: this.origin.longitude},
destination: {lat: this.destination.latitude, lng: this.destination.longitude},
waypoints: [],
optimizeWaypoints: true,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
});
}
}
Here is the html associated with it
<agm-map [zoom]="13" [latitude]="currentLocation.result.latitude" [longitude]="currentLocation.result.longitude">
<agm-marker [latitude]="currentLocation.result.latitude" [longitude]="currentLocation.result.latitude"></agm-marker>
<agm-marker *ngFor="let device of location.ChargeDevice; let i = index"
ngShow="device.SubscriptionRequiredFlag"
[latitude]="convertStringToNumber(device.ChargeDeviceLocation.Latitude)"
[longitude]="convertStringToNumber(device.ChargeDeviceLocation.Longitude)"
(markerClick)="clickedMarker(device)">
</agm-marker>
<div *ngIf="showDirections" >
<agm-map-directions [origin]="origin" [destination]="destination" #test></agm-map-directions>
</div>
</agm-map>

I had the same problem as you.
I solved it by creating a global object that holds the instantiation of directionsService and directionsDisplay, to be able to pass those as reference later. ( See javascript pass by reference )
public directions: any = {
directionsService: null,
directionsDisplay: null
}
Then, I created a function that initialize the map once and I called it within ngOnInit() function:
constructor(private _gmapsApi: GoogleMapsAPIWrapper) { }
ngOnInit() {
this.initalizeMap(this.directions);
}
initalizeMap(directions): void {
this._gmapsApi.getNativeMap().then(map => {
directions.directionsService = new google.maps.DirectionsService;
directions.directionsDisplay = new google.maps.DirectionsRenderer;
directions.directionsDisplay.setMap(map);
directions.directionsDisplay.addListener('directions_changed', function() {
this.displayRoute(this.origin, this.destination, directions.directionsService, directions.directionsDisplay);
});
this.displayRoute(this.origin, this.destination, directions.directionsService, directions.directionsDisplay);
})
}
I added a listener to directionsDisplay to displayRoute whenever a change is made in the directions. The function displayRoute take as parameters origin and destination passed through #Input and references to directionsService and directionsDisplay whose instances I saved in directions object. The waypoints I took are also through #Input.
displayRoute(origin, destination, service, display): void {
var myWaypoints = [];
for (var i = 0; i < this.waypoints.length; i++) {
console.log(this.waypoints[i].markerID);
console.log(this.waypoints[i].location);
}
for (var i = 0; i < this.waypoints.length; i++) {
myWaypoints.push({
location: new google.maps.LatLng(this.waypoints[i].location),
stopover: true
})
}
service.route({
origin: origin,
destination: destination,
waypoints: myWaypoints,
travelMode: 'WALKING',
avoidTolls: true
}, function(response, status) {
if (status === 'OK') {
console.log("Route OK.");
display.setDirections(response);
} else {
alert('Could not display directions due to: ' + status);
}
});
}
The last function and the most important is calculateRoute, which I call from the component I injected the service ( Map Component in my case ) whenever I want it to recalculate the route.
calculateRoute(): void {
this._gmapsApi.getNativeMap().then(map => {
this.displayRoute(this.origin, this.destination, this.directions.directionsService, this.directions.directionsDisplay);
});
}
Hope it helps!

Angular 2 Google Maps Javascript API, Route Service function doesn't exist

Trying to get my head around using the Javascript API from Google Maps in my Angular 2 Project.
The problem i have is based on this code:
#Injectable()
export class CalculateAndDisplayRouteService {
public durationTrafficSource = new ReplaySubject<string>();
public durationTraffic$ = this.durationTrafficSource.asObservable();
public changeDurationTraffic(string) {
this.durationTrafficSource.next(string);
}
public routeResponse(response, status) {
console.log(response);
let map = new google.maps.Map(document.getElementById('map'), {
center: {lat: lat, lng: lng},
zoom: 8
});
if (status === 'OK') {
let directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: false,
suppressInfoWindows: true
});
directionsDisplay.setMap(map);
directionsDisplay.setDirections(response);
this.changeDurationTraffic(response.routes[0].legs[0].duration.text); //Error is here
} else {
window.alert('Directions request failed due to ' + status);
}
}
private currentDate = new Date();
public route(directionsService, transportMode, origin, destination) {
if(transportMode === 'DRIVING') {
directionsService.route({
origin: origin,
destination: destination,
travelMode: transportMode,
drivingOptions: {
departureTime: new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), this.currentDate.getDate() + 1, 7, 45),
trafficModel: 'pessimistic'
}
}, this.routeResponse);
The problem I have is in the routeResponse function. I receive an error where the changeDurationTraffic function is called.
"Uncaught TypeError: this.changeDurationTraffic is not a function".
Is there something i am doing wrong? Thanks.

The this inside that function is not refering to your component because of this method:
public route(directionsService, transportMode, origin, destination) {
if(transportMode === 'DRIVING') {
directionsService.route({
origin: origin,
destination: destination,
travelMode: transportMode,
drivingOptions: {
departureTime: new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), this.currentDate.getDate() + 1, 7, 45),
trafficModel: 'pessimistic'
}
}, this.routeResponse); //<-- ****Error here.****
Change that line to
this.routeResponse.bind(this);
Suggested reading: How to access the correct `this` context inside a callback?

React.js, where to put google maps api queries?

I'm building a google maps app with React.js.
My instinct is to create separate file with an ES6 class to handle search queries - within the class there will be a function that returns the search result. I intend to call that function from within a React Component.
See the component below for reference.
Should I move the code inside the findRoutes() and drawBoxes() methods to separate files? This is my first react app - want to learn how to best organize the code. Any tips are hugely appreciated.
var MapControl = React.createClass({
getInitialState: function(){
return {
originId: '',
destinationId: '',
radius: 1,
search: '',
map: {},
travelMode: google.maps.TravelMode.DRIVING
}
},
handleFormSubmit: function(input){
// Form Input
// Call findRoutes() once setState is complete.
this.setState({
originId: input.originId,
destinationId: input.destinationId,
radius: input.radius,
search: input.search
}, this.findRoutes);
},
handleMapRender: function(map){
// Intialized Google Map
this.setState({map: map});
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
routeBoxer = new RouteBoxer();
directionsDisplay.setMap(map);
placesService = new google.maps.places.PlacesService(map);
},
findRoutes: function(){
var me = this;
if (!this.state.originId || !this.state.destinationId) {
alert("findRoutes!");
return;
}
directionsService.route({
origin: {'placeId': this.state.originId},
destination: {'placeId': this.state.destinationId},
travelMode: this.state.travelMode
}, _.bind(function(response, status){
if (status === google.maps.DirectionsStatus.OK) {
// me.response = response;
directionsDisplay.setDirections(response);
var path = response.routes[0].overview_path;
this.setState({
routes: response,
boxes: routeBoxer.box(path, this.state.radius)
},this.drawBoxes);
} else {
window.alert('Directions config failed due to ' + status);
}
}, this));
},
drawBoxes: function(){
var boxpolys = new Array(this.state.boxes.length);
for (var i = 0; i < this.state.boxes.length; i++) {
boxpolys[i] = new google.maps.Rectangle({
bounds: this.state.boxes[i],
fillOpacity: 0,
strokeOpacity: 1.0,
strokeColor: '#000000',
strokeWeight: 1,
map: this.state.map
});
}
},
render: function() {
return (
<div className="MapControl">
<h1>Search</h1>
<MapForm
onFormSubmit={this.handleFormSubmit}
map={this.state.map}/>
<GMap
setMapState={this.handleMapRender}
originId= {this.state.originId}
destinationId= {this.state.destinationId}
radius= {this.state.radius}
search= {this.state.search}/>
</div>
);
}
});

Your instinct is correct, in general it's good practice to keep your view code as minimal as possible, and to move anything that is not explicitly related to rendering your view into another class.
React.js itself is not opinionated as to how you handle the rest of your application needs but a few libraries have emerged as the leading solutions for handling events, routing, services, data, etc.
You should review the Flux pattern for an overview of how you might manage the rest of your applications needs for React apps.
https://facebook.github.io/flux/docs/overview.html
I've moved on from Flux to using Redux recently
http://redux.js.org/ (which has emerged as the leading 'Fluxish' state management lib)
If you want to just get something up and running quickly and aren't trying to dive into all that just yet, I'd move the findRoutes method to an external service that you import in... drawBoxes seems fine to keep in here as it is directly related to rendering map elements in the view

Taking Screenshot Ionic framework

I'm building Ionic application that have geolocation (Google Api), but that's irelevant, in upper right corner is button which i want to make to take screenshot and automatically make popover with options to send that screenshot image via email, viber..., but i don't have an idea how to take that screenshot, I googled and googled without any luck, please help.
app.controller('MapCtrl', function($scope, $cordovaGeolocation, $ionicLoading, $ionicPlatform) {
$ionicPlatform.ready(function() {
$ionicLoading.show({
template: '<ion-spinner icon="bubbles"></ion-spinner><br/>Acquiring location!'
});
var posOptions = {
enableHighAccuracy: true,
timeout: 20000,
maximumAge: 0
};
$cordovaGeolocation.getCurrentPosition(posOptions).then(function (position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat, long);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
$scope.map = map;
$ionicLoading.hide();
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Lokacija'
});
}, function(err) {
$ionicLoading.hide();
console.log(err);
});
});
});

Two options, as far as I can tell:
Use a third-party Cordova plugin, such as https://github.com/gitawego/cordova-screenshot - this will most likely include the application's UI elements too, though, which might not be what you want.
Perhaps a better idea would be to use the Google Static Maps API - you can pass the current parameters from your dynamic map to it, and it'll return an image version.

This should get you started: How to take a screen shot in ionic
After you received the picture from the plugin, you can just use ionic's popover service to display it there.

This below code should help
*The function will take screenshot and share popup
For More details you can visit SocialSharing and Screenshot Ionic offical page
import { SocialSharing } from '#ionic-native/social-sharing/ngx';
import { Screenshot } from '#ionic-native/screenshot/ngx';
constructor(
private socialSharing: SocialSharing,
private screenshot: Screenshot
) { }
share(){
this.platform.ready().then(() => {
this.screenshot.URI(80)
.then((res) => {
//this.socialSharing.share('df',res.URI,null)
this.socialSharing.share('',null,res.URI,null)
.then(() => {},
() => {
alert('SocialSharing failed');
});
},
() => {
alert('Screenshot failed');
});
});
}