We Keep Coding

Create new polyline on marker movement

Below is my code for delivery person tracking. I'm using Maps Javascript API v3 in Ionic-angular food delivery application. I need user to see delivery boy position in realtime. I have succeeded in drawing a polyline, placing delivery boy, user and restaurant markers. The delivery boy marker is moving on location change. But i need to redraw polyline everytime when delivery boy moves. How to do that? Click the link for full code
https://pastebin.com/We8BQd7H
directionsDisplay.setMap(map);
// directionsDisplay.setOptions({ suppressMarkers: true });
directionsDisplay.setOptions({
polylineOptions: {
strokeWeight: 4,
strokeOpacity: 1,
strokeColor: "#000000",
},
suppressMarkers: true,
});
var geocoder = new google.maps.Geocoder();
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origins: [origin1],
destinations: [destinationA],
travelMode: "DRIVING",
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false,
},
function (response, status) {
console.log('distance matrix response', response);
if (status !== "OK") {
alert("Error was: " + status);
} else {
var originList = response.originAddresses;
var destinationList = response.destinationAddresses;
var outputDiv = document.getElementById("output");
// outputDiv.innerHTML = '';
// deleteMarkers(markersArray);
var showGeocodedAddressOnMap = function (asDestination) {
var icon = asDestination ? destinationIcon : originIcon;
return function (results, status) {
if (status === "OK") {
map.fitBounds(bounds.extend(results[0].geometry.location));
// markersArray.push(new google.maps.Marker({
// map: map,
// position: results[0].geometry.location,
// icon: icon
// }));
} else {
alert("Geocode was not successful due to: " + status);
}
};
};
directionsService.route(
{
origin: origin1,
destination: destinationA,
travelMode: "DRIVING",
},
function (response, status) {
console.log('direction response', response);
if (status === "OK") {
directionsDisplay.setDirections(response);
} else {
window.alert("Directions request failed due to " + status);
}
}
);
for (var i = 0; i < originList.length; i++) {
var results = response.rows[i].elements;
geocoder.geocode(
{ address: originList[i] },
showGeocodedAddressOnMap(false)
);
for (var j = 0; j < results.length; j++) {
geocoder.geocode(
{ address: destinationList[j] },
showGeocodedAddressOnMap(true)
);
}
}
}
}

According to the documentation If you want to redraw you're polyline, store it in a variable and use the setmap(null) method.
You can write an update function to remove you're old polyline, update his path, and redraw it. The code can look like this :
let map;
let directionsDisplay;
// assuming you have almost the first two point of the line to draw it
let pathCoordinate = [
{ lat: 37.772, lng: -122.214 },
{ lat: 21.291, lng: -157.821 },
];
let polylineShape = {
strokeWeight: 4,
strokeOpacity: 1,
strokeColor: "#000000",
}
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
//... you're configuration
});
}
function updatePath(newCoordinate) {
// remove old polyline
directionsDisplay.setMap(null);
// update coordinate
pathCoordinate.push(newCoordinate);
// set the new polyline
directionsDisplay = new google.maps.Polyline({...polylineShape, ...{path:pathCoordinate});
directionsDisplay.setMap(map);
}
//
initmap();
directionsDisplay = new google.maps.Polyline({...polylineShape, ...{path:pathCoordinate});
directionsDisplay.setMap(map);
// then call updatePath() every time you need to update
updatePath({ lat: -18.142, lng: 178.431 });

Google Maps API Finding Details

I am trying to use the google maps details about a location to display in an info window from a marker. I am creating a marker and want to get the address of that marker so that I can store it in a database. I am able to get the title of the marker but I do not know how to get the full address. This is my code:
<script>
let pos;
let map;
let bounds;
let infoWindow;
let currentInfoWindow;
let service;
let infoPane;
function initMap() {
bounds = new google.maps.LatLngBounds();
infoWindow = new google.maps.InfoWindow;
currentInfoWindow = infoWindow;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
map = new google.maps.Map(document.getElementById('map'), {
center: pos,
zoom: 20
});
bounds.extend(pos);
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
getNearbyPlaces(pos);
}, () => {
handleLocationError(true, infoWindow);
});
} else {
handleLocationError(false, infoWindow);
}
}
function handleLocationError(browserHasGeolocation, infoWindow) {
pos = { lat: -33.856, lng: 151.215 };
map = new google.maps.Map(document.getElementById('map'), {
center: pos,
zoom: 20
});
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Geolocation permissions denied. Using default location.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
currentInfoWindow = infoWindow;
getNearbyPlaces(pos);
}
function getNearbyPlaces(position) {
let request = {
location: position,
rankBy: google.maps.places.RankBy.DISTANCE,
keyword: 'basketball courts'
};
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, nearbyCallback);
}
function nearbyCallback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
createMarkers(results);
}
}
function createMarkers(places) {
places.forEach(place => {
let marker = new google.maps.Marker({
position: place.geometry.location,
map: map,
title: place.name
});
marker.addListener("click", () => {
map.setZoom(16);
map.setCenter(marker.getPosition());
});
bounds.extend(place.geometry.location);
});
map.fitBounds(bounds);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap">
</script>
I am unfamiliar with javascript so I am not sure how exactly to format it. If it shows up in the infowindow I can work on it myself from there but if anyone has suggestions on how to show it there I would appreciate it.

To be fair you have done most of the work but if it is simply a case of taking the results from the nearbyPlaces search and adding to an infowindow then perhaps you can find use in the following. The work is done in the createMarkers function
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Google Maps: </title>
<style>
#map{
width:800px;
height:600px;
float:none;
margin:auto;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
let pos;
let map;
let bounds;
let infoWindow;
let currentInfoWindow;
let service;
let infoPane;
function initMap() {
bounds = new google.maps.LatLngBounds();
infoWindow = new google.maps.InfoWindow;
currentInfoWindow = infoWindow;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
map = new google.maps.Map(document.getElementById('map'), {
center: pos,
zoom: 20
});
bounds.extend(pos);
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
getNearbyPlaces( pos );
}, () => {
handleLocationError(true, infoWindow);
});
} else {
handleLocationError(false, infoWindow);
}
}
function handleLocationError(browserHasGeolocation, infoWindow) {
pos = { lat: -33.856, lng: 151.215 };
map = new google.maps.Map(document.getElementById('map'), {
center: pos,
zoom: 20
});
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Geolocation permissions denied. Using default location.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
currentInfoWindow = infoWindow;
getNearbyPlaces(pos);
}
function getNearbyPlaces(position) {
let request = {
location: position,
rankBy: google.maps.places.RankBy.DISTANCE,
keyword: 'basketball courts'
};
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, nearbyCallback);
}
function nearbyCallback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
createMarkers(results);
}
}
function createMarkers(places) {
places.forEach(place => {
console.log(place)
let marker = new google.maps.Marker({
position: place.geometry.location,
map: map,
title:place.name,
/* assign the response data as a property of the marker */
content:place
});
/*
for convenience a regular anonymous function is better here
as it allws us to use `this` to refer to the marker itself
within the body of the function.
*/
marker.addListener("click", function(e){
map.setZoom(16);
map.setCenter( marker.getPosition() );
/*
Iterate through ALL properties ( or just some ) of the `this.contents`
property and set as the content for the infowindow
*/
infoWindow.setContent( Object.keys(this.content).map(k=>{
return [k,this.content[k] ].join('=')
}).join( String.fromCharCode(10) ) );
/* open the infowindow */
infoWindow.setPosition(e.latLng)
infoWindow.open(map,this);
});
bounds.extend(place.geometry.location);
});
map.fitBounds(bounds);
}
</script>
<script async defer src="//maps.googleapis.com/maps/api/js?key=<APIKEY>&libraries=places&callback=initMap">
</script>
</body>
</html>
The data returned is JSON and has a structure like this for each individual result. The location data contained therein will bear no resemblance to that found for others running this self same script but show suffice.
{
"business_status" : "OPERATIONAL",
"geometry" : {
"location" : {
"lat" : 52.7525688,
"lng" : 0.4036446
},
"viewport" : {
"northeast" : {
"lat" : 52.75354047989272,
"lng" : 0.4048724298927222
},
"southwest" : {
"lat" : 52.75084082010728,
"lng" : 0.4021727701072778
}
}
},
"icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/v1/png_71/generic_business-71.png",
"icon_background_color" : "#7B9EB0",
"icon_mask_base_uri" : "https://maps.gstatic.com/mapfiles/place_api/icons/v2/generic_pinlet",
"name" : "Multi-Use Games Area",
"place_id" : "ChIJX2Y4mjyL10cRQ0885NSSeTE",
"plus_code" : {
"compound_code" : "QC33+2F King's Lynn",
"global_code" : "9F42QC33+2F"
},
"rating" : 0,
"reference" : "ChIJX2Y4mjyL10cRQ0885NSSeTE",
"scope" : "GOOGLE",
"types" : [ "point_of_interest", "establishment" ],
"user_ratings_total" : 0,
"vicinity" : "The Walks, nr, South St, King's Lynn"
}
Within the marker click callback function, where previously there is this:
infoWindow.setContent( Object.keys(this.content).map(k=>{
return [k,this.content[k] ].join('=')
}).join( String.fromCharCode(10) ) );
We can build up a string of whatever items you wish to use:
infoWindow.setContent( this.content.name ); // simply display the name
or
infoWindow.setContent(
`<h1>${this.content.name}</h1>
<p>${this.content.vicinity}</p>
<ul>
<li>Lat: ${this.content.geometry.location.lat()}</li>
<li>Lng: ${this.content.geometry.location.lng()}</li>
</ul>
<img src="${this.content.icon}" />`
); // show some HTML content

How can I implement google map in the vue component?

I get reference from here : How to get the formatted address from a dragged marker in Google Version Maps
It using javascript
I want to implement it in the vue component
I try like this :
https://jsfiddle.net/oscar11/1krtvcfj/2/
I don't type code here. Because the code is too much. So you can directly see in jsfiddle
If I click geocode button, there exist error like this :
Uncaught ReferenceError: marker is not defined
How can I solve the error?

new Vue({
el: '#app',
template: `
<div>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Geocode" #click="codeAddress()">
</div>
`,
data() {
return {
geocoder: null,
map: null,
marker: null,
infowindow: null
}
},
mounted() {
this.infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50)
})
google.maps.event.addDomListener(window, "load", this.initialize)
},
methods: {
initialize() {
this.geocoder = new google.maps.Geocoder();
let latlng = new google.maps.LatLng(-34.397, 150.644)
let mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions)
google.maps.event.addListener(this.map, 'click', () => {
this.infowindow.close()
});
},
geocodePosition(pos) {
this.geocoder.geocode({
latLng: pos
}, responses => {
if (responses && responses.length > 0) {
this.marker.formatted_address = responses[0].formatted_address
} else {
this.marker.formatted_address = 'Cannot determine address at this location.'
}
this.infowindow.setContent(this.marker.formatted_address + "<br>coordinates: " + this.marker.getPosition().toUrlValue(6))
this.infowindow.open(this.map, this.marker)
});
},
codeAddress() {
let address = document.getElementById('address').value;
this.geocoder.geocode({
'address': address
}, (results, status) => {
if (status == google.maps.GeocoderStatus.OK) {
this.map.setCenter(results[0].geometry.location);
if (this.marker) {
this.marker.setMap(null);
if (this.infowindow) this.infowindow.close();
}
this.marker = new google.maps.Marker({
map: this.map,
draggable: true,
position: results[0].geometry.location
});
google.maps.event.addListener(this.marker, 'dragend', () => {
this.geocodePosition(this.marker.getPosition());
});
google.maps.event.addListener(this.marker, 'click', () => {
if (this.marker.formatted_address) {
this.infowindow.setContent(this.marker.formatted_address + "<br>coordinates: " + this.marker.getPosition().toUrlValue(6));
} else {
this.infowindow.setContent(address + "<br>coordinates: " + this.marker.getPosition().toUrlValue(6));
}
this.infowindow.open(this.map, this.marker);
});
google.maps.event.trigger(this.marker, 'click');
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
}
})
You should store globe value in the data of Vue component, and get the value by this.name in you methods.

Need to bind an inner function to the click event of an element

I need to use a "resetMap" function which I defined in my initMap function (callback function for google map), to bind to reset button. Now it cannot be used because its not there in the global scope.
If I move this function to global scope its items such as mapOptions.center setzoom etc will be undefined.
This is my script file
var map;
/* Hardcoding 5 airport locations - our data - model*/
var airports = [
{
title: "Calicut International Airport",
lat: 11.13691,
lng: 75.95098,
streetAddress: "Karipur",
cityAddress: "Malappuram, Kerala",
visible: ko.observable(true),
id: "nav0",
showIt: true
},
{
title: "Chennai International Airport",
lat: 12.9920434,
lng: 80.1631409,
streetAddress: "Meenambakkam",
cityAddress: "Chennai, Tamil Nadu",
visible: ko.observable(true),
id: "nav1",
showIt: true
},
{
title: "Trivandrum International Airport",
lat: 8.4829722,
lng: 76.909139,
streetAddress: "Vallakkadavu",
cityAddress: "Thiruvananthapuram, Kerala",
visible: ko.observable(true),
id: "nav2",
showIt: true
},
{
title: "Cochin International Airport",
lat: 10.15178,
lng: 76.39296,
streetAddress: "Nedumbassery",
cityAddress: "Kochi, Kerala",
visible: ko.observable(true),
id: "nav3",
showIt: true
},
{
title: "Kempegowda International Airport",
lat: 13.2143948,
lng: 77.6896124,
streetAddress: "Devanahalli",
cityAddress: "Bengaluru, Karnataka",
visible: ko.observable(true),
id: "nav4",
showIt: true
}
];
/* Initializing map, markers */
function initMap() {
var myLatlng = new google.maps.LatLng(13.2143948, 77.6896124);
var mapOptions = {
zoom: 6,
disableDefaultUI: true
};
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(8.4829722, 76.909139), //SW coordinates here
new google.maps.LatLng(13.2143948, 77.6896124) //NE coordinates here
);
map = new google.maps.Map(document.getElementById("map"), mapOptions);
map.fitBounds(bounds);
setMarkers(airports);
setMapWithMarker();
/* Function to reset the map zoom and set center */
function resetMap() {
map.setCenter(mapOptions.center);
map.setZoom(6);
}
$(window).resize(function(){
map.setCenter(mapOptions.center);
});
}
/* Controlling the visibility of marker based on the 'showIt' property */
function setMapWithMarker() {
for (var i = 0; i < airports.length; i++) {
if(airports[i].showIt === true) {
airports[i].locMarker.setMap(map);
} else {
airports[i].locMarker.setMap(null);
}
}
}
/* Setting markers on map and attaching content to each of their info windows */
function setMarkers(location) {
var img = 'img/airport.png';
for (var i = 0; i < location.length; i++) {
location[i].locMarker = new google.maps.Marker({
position: new google.maps.LatLng(location[i].lat, location[i].lng),
map: map,
animation: google.maps.Animation.DROP,
title: location.title,
icon:img
});
var airportTitle = location[i].title;
var wikiUrl = 'https://en.wikipedia.org/w/api.php?action=opensearch&search=' +
airportTitle + '&format=json&callback=wikiCallback';
(function(i){
var wikiRequestTimeout = setTimeout(function() {
$('.show-error').html('ERROR: Failed to load wikipedia data - Airport details will not show up! Sorry for the inconvenience caused.');
}, 5000);
$.ajax({
url: wikiUrl,
dataType: "jsonp"
}).done(function(response){
var article = response[2][0];
location[i].contentString =
'<strong>'+ location[i].title + '</strong><br><p>' + location[i].streetAddress
+ '<br>' + location[i].cityAddress + '<br></p><p>' + article +
'</p><p>Source: Wikipedia</p>';
clearTimeout(wikiRequestTimeout);
});
})(i);
/* info window initialization and setting content to each marker's info window */
var infowindow = new google.maps.InfoWindow({});
new google.maps.event.addListener(location[i].locMarker, 'click',
(function(airport, i) { return function() {
airport.setAnimation(google.maps.Animation.BOUNCE);
setTimeout(function() {
airport.setAnimation(null);
}, 2400);
infowindow.setContent(location[i].contentString);
infowindow.open(map,this);
map.setZoom(15);
map.setCenter(airport.getPosition());
};
})(location[i].locMarker, i));
/* info window call when clicked on airport menu item */
var searchNav = $('#nav' + i);
searchNav.click((function(airport, i) {
return function() {
airport.setAnimation(google.maps.Animation.BOUNCE);
setTimeout(function() {
airport.setAnimation(null);
}, 2200);
infowindow.setContent(location[i].contentString);
infowindow.open(map,airport);
map.setZoom(15);
map.setCenter(airport.getPosition());
};
})(location[i].locMarker, i));
}
}
/* Function for toggling the menu */
function slideToggle() {
$(this).toggleClass('toggled');
$( "#listing" ).toggle( "slow", function() {
// Animation complete.
});
}
/* Our view model */
function viewModel() {
var self = this;
this.locMarkerSearch = ko.observable('');
ko.computed(function() {
var search = self.locMarkerSearch().toLowerCase();
return ko.utils.arrayFilter(airports, function(airport) {
if (airport.title.toLowerCase().indexOf(search) >= 0) {
airport.showIt = true;
return airport.visible(true);
} else {
airport.showIt = false;
setMapWithMarker();
return airport.visible(false);
}
});
});
};
// Activates knockout.js
ko.applyBindings(new viewModel());
I need to bind the function here in my index.html
<footer>
<button id="reset" data-bind="click: resetMap">Reset Zoom to center</button>
</footer>
<script src="js/lib/knockout-3.4.0.js"></script>
<script src="js/script.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDVOVW9WT7QaVlFYDkE7K2Qm-AvSS02YrM&callback=initMap" async defer onerror="googleError()"></script>
How can I resolve this problem? Thanks in advance..

You haven't shown us how viewModel uses initMap, but fundamentally, initMap needs to make resetMap available to the outside world. One way to do that is to return it:
function initMap() {
// ...
function resetMap() {
}
// ...
return resetMap;
}
and then have code in viewModel put that on the view model:
function viewModel() {
this.resetMap = initMap(); // I assume you're calling this indirectly; whatever
}
Then resetMap has access to what it needs, and it's on the view model so it can be bound.

Meteor implementing Google Maps and Google Places

I'm attempting to implement a Google Map on my Meteor app that will get the user's location and then will find places that serve food near the user. I began by implementing the example
given by Google, and it worked fine when I did it that way; however I'm trying to implement it properly by adding it to the actual Javascript file and it is now giving me a "Google is undefined" error.
menuList = new Mongo.Collection('items');
if (Meteor.isClient) {
var pls;
var map;
var infowindow;
Meteor.startup(function () {
//get user location and return location in console
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
function success(pos) {
var crd = pos.coords;
console.log('Your current position is:');
console.log('Latitude : ' + crd.latitude);
console.log('Longitude: ' + crd.longitude);
console.log('More or less ' + crd.accuracy + ' meters.');
pls = {lat: crd.latitude, lng: crd.longitude};
};
function error(err) {
console.warn('ERROR(' + err.code + '): ' + err.message);
};
navigator.geolocation.getCurrentPosition(success, error, options);
})
Meteor.methods({
callback: function (results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
},
createMarker: function (place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
})
Template.searchIt.helpers({
'initMap': function () {
console.log("HERE");
//Dummy values I placed for StackOverflow
var pyrmont = {lat: -33.234, lng: 95.343};
map = new google.maps.Map(document.getElementById('map'), {
center: pyrmont,
zoom: 15
});
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: pyrmont,
radius: 500,
types: ['food']
}, callback);
}
})
}
<head>
<title>Place searches</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyACgaDFJrh2pMm-bSta1S40wpKDDSpXO2M
&signed_in=true&libraries=places" async defer></script>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
{{>searchIt}}
</body>
<template name="searchIt">
{{initMap}}
</template>

You should try the dburles:google-maps package.
Here is an example written by its author: http://meteorcapture.com/how-to-create-a-reactive-google-map/
Have fun!

i had to place the code you have above inside of a GoogleMaps.ready('map', callback) block. or inside of an if (GoogleMaps.loaded()) {} block...
for instance.. this works just fine:
caveat: i'm using the radarSearch, but the concept is the same.
Template.galleryCard.onRendered(function() {
GoogleMaps.ready('minimap', function(map) {
const params = {
map: map,
name: 'The Spice Suite',
loc: {lat: 38.9738619, lng: -77.01829699999999},
};
const service = new google.maps.places.PlacesService(params.map.instance);
let request2 = {
//name & location & radius (meters).
name: params.name,
location: params.loc,
radius: 100,
};
let callback = function(results,status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
console.log(results[0]);
return results[0].place_id;
} else {
console.log(status);
}
};
service.radarSearch(request2,callback);
});
});