Hey guys I'm using Ionic Native Google Maps plugins and I'm trying to show all the points on the screen as well as the user location, I can do that, no problem, the issue is that I need the user's location to be centered in the map AND show all the points around him.
I've been trying to use the put all my points into a new LatLngBounds and setting each using the .extend() method but it's not working.
Please help
async expandRadius() {
const query = await this.queryPlaces(10);
get(query).then(nearByPlaces => {
const foundPlaces = [];
nearByPlaces.forEach( el => {
const placesData = {
distance: Math.floor(this.geo.point(this.centerPoint.latitude, this.centerPoint.longitude)
.distance(el.geolocation.geopoint.latitude, el.geolocation.geopoint.longitude)),
...el
};
foundPlaces.push(placesData);
// THE CENTER ISSUE STARTS HERE //
const tmp = new LatLng(el.geolocation.geopoint.latitude, el.geolocation.geopoint.longitude);
this.bounds.extend(tmp);
this.map.addMarkerSync({
position: {
lat: tmp.lat,
lng: tmp.lng
},
icon: {
url: 'www/assets/icon/pin.png',
size: {width: 23, height: 33},
}
});
});
this.map.moveCamera({
target: this.bounds.getCenter(),
tilt: 0,
});
})
.catch()
.finally( async () => await this.loading.dismiss() );
}
Related
I am trying to build a live tracking with the route using Google Map JS version in ionic 4.
What I am trying to achieve is to give the route to the user from source to destination and update the route if the user chooses a new path other than the google provided one. The source is the user and destination is some point in the map.
I am able to draw route and update it if the user change the provided path using
startNavigation(){
this.geolocation.getCurrentPosition({ enableHighAccuracy: true })
.then((position) => {
this.userPosition = position;
this.userVehicleMarker = new google.maps.Marker({
map: this.map,
position: { lat: position.coords.latitude, lng: position.coords.longitude },
icon: this.vehicleIcon
});
this.addInfoWindow(this.userVehicleMarker, 'me')
this.watchVehicle = this.geolocation.watchPosition({ enableHighAccuracy: true })
.subscribe(async (pos) =>
{
// Calling the redraw function on every 25 meters distance travelled
this.drawRouteFromVehicleToDestination(pos.coords.latitude, pos.coords.longitude)
}
}, (err: PositionError) => {
// alert(err.message)
console.log("error : " + err.message);
});
})
)
drawRouteFromVehicleToDestination(lat, lng) {
let _self = this;
let directionsService = new google.maps.DirectionsService;
let directionsRenderer = new google.maps.DirectionsRenderer({
polylineOptions: {
strokeColor: "#428BE8",
strokeWeight: 2
},
suppressMarkers: true,
preserveViewport: true
});
directionsRenderer.addListener('directions_changed', function () {
let _data = directionsRenderer.getDirections();
let _newData = _data['routes'][0]['legs'][0]
console.log(_newData)
});
directionsService.route({
origin: { lat: lat, lng: lng},
destination: { lat: 27.673586, lng: 85.435131},
travelMode: 'DRIVING',
optimizeWaypoints: true,
provideRouteAlternatives: false,
avoidTolls: true,
}, (res, status) => {
if (status == 'OK') {
directionsRenderer.setDirections(res);
directionsRenderer.setMap(this.map);
} else {
console.warn(status);
}
});
}
But the issue is, it is sending a lot of requests to google API and which does not look like a practical approach to follow.
Is there any other approach I should follow using which I could track the route and update it as per user location change and also minimize the google ping?
Thank you in advance for your help.
I think the issue is that you call drawRouteFromVehicleToDestination() very frequently (every time the vehicle position changes, from this.geolocation.watchPosition). One way to reduce the number of calls would be to "debounce" this calls, limiting them to every X ms at most, since probably it's acceptable to update every 200/300 ms. For example, you could use the lodash _.debounce function. For an in-depth explanation, see also the article Debouncing and Throttling Explained Through Examples.
this.watchVehicle = this.geolocation.watchPosition({ enableHighAccuracy: true })
.subscribe(async (pos) => {
_.debounce(() => {
this.drawRouteFromVehicleToDestination(pos.coords.latitude, pos.coords.longitude);
}, 300, { leading: true });
}, (err: PositionError) => {
// alert(err.message)
console.log("error : " + err.message);
});
I have a map with a number of pins on it, the pins are generated from an endpoint api (json). I want to filter the pins via an input that has a v-modal - the search criteria is already set up and is pulled from the same api.
Even if someone can give some tips as to where in the vue lifecycle the filter should happen, i.e mounted, updated computed ect
Originally I used this article as a reference
https://medium.com/#limichelle21/integrating-google-maps-api-for-multiple-locations-a4329517977a
created() {
axios
.get(
`https://cors-anywhere.herokuapp.com/myEndpoint`
)
.then(response => {
// JSON responses are automatically parsed.
this.allProperties = response.data;
this.markers = this.allProperties.map(function (x) {
return {
lat: parseFloat(x.lat).toFixed(3),
lng: parseFloat(x.lng).toFixed(3),
add: x.dispAddress,
propId: x.property_id,
propPrice: x.outputAskingPrice,
propImg: x.imagePath
};
});
this.allProperties = response.data.map(x => {
x.searchIndex = `${x.sellingStatus} ${x.priceType} ${x.typeNames[0]} ${x.typeNames[1]} ${x.dispAddress}`.toLowerCase();
return x;
});
});
},
mounted: function () {
var _this = this;
function initMap() {
var center = {
lat: 53,
lng: -3
};
var map = new google.maps.Map(document.getElementById("map-canvas"), {
zoom: 10,
center: center
});
var newPin = new google.maps.Marker({
position: center,
map: map
});
}
},
updated() {
var _this = this;
var map = new google.maps.Map(document.getElementById("map-canvas"), {
zoom: 9,
center: new window.google.maps.LatLng(55.961, -3)
});
var infowindow = new google.maps.InfoWindow({});
var newPin;
var count;
for (count = 0; count < _this.markers.length; count++) {
newPin = new google.maps.Marker({
position: new google.maps.LatLng(
_this.markers[count].lat,
_this.markers[count].lng
),
map: map,
icon: "../assets/img/map-pin.png"
});
google.maps.event.addListener(
newPin,
"click",
(function (newPin, count) {
return function () {
infowindow.setContent(` ${_this.markers[count].add} <p> ${_this.markers[count].propPrice}</p><img src="${_this.markers[count].propImg}"><p>`);
infowindow.open(map, newPin);
};
})(newPin, count)
);
}
If you have v-model on an <input> field like mentioned in your question, you are binding the value of this <input> field to a variable probably defined in the data part of your Vue component. The value is always up to date in the model (reactive binding). You can watch this value and then trigger a function which updates Google Maps. Here is an example:
Vue.component('demo', {
data () {
return {
inputField: ''
};
},
created () {
console.log('Component script loaded, HTML not yet ready, load the data from your backend. Use a flag like isLoading or similar to indicate when the data is ready to enable input.');
},
mounted () {
console.log('Component mounted, HTML rendered, load Google Maps');
},
watch: {
inputField (newValue) {
console.log(`inputField changed to ${newValue}. Trigger here a method which update Google Maps. Make sure to debounce the input here, so that it does not trigger a Google Maps update too often.`);
}
},
template: `
<div>
<input type="text" v-model="inputField" placeholder="Lookup place">
</div>`
});
new Vue({ el: '#vue-demo-container' });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="vue-demo-container">
<demo></demo>
</div>
I am currently working on ionic native google maps building weather map . Basically i want to get LatLngBounds and zoom level while camera move then pass those data to url even shows data on map .
example every time when move map and zoom level, the url dynamically updates .
http://www.xxxxxxxx.net/map#lat=-25.87899&lng=-42.45117&zoom=4
My code :
getData(){
////Here should pass LatLngBounds in url ////
this.http.get('xxxxxxx/MetarJSON.php?bbox='','','',''' ,{},{}).then(data=>{
let DataJson = JSON.parse(data.data)
for (let datas of DataJson['features']) {
this.points.push({ lng: datas.geometry.coordinates[0], lat: datas.geometry.coordinates[1] });
}
for (let i = 0; i < DataJson.features.length; i++) {
let coords = DataJson.features[i].geometry.coordinates;
this.latLng = new LatLng(coords[1], coords[0]);
this.icoa = DataJson.features[i].properties.id
this.rawOb = DataJson.features[i].properties.rawOb
let fltcat = DataJson.features[i].properties.fltcat
let marker: Marker = this.map.addMarkerSync({
position: this.latLng,
title:fltcat,
icon: icons
})
}
})
}
loadMap() {
let mapOptions: GoogleMapOptions = {
camera: {
target: {
lat: 33.263,
lng: 44.232
},
zoom: 6,
}
};
this.map = GoogleMaps.create('map_canvas', mapOptions);
//// Here l get LatLngBounds but when l move map the lat and lng aren't update
let chec1= this.map.getVisibleRegion().farLeft.lat
let chec2= this.map.getVisibleRegion().farLeft.lng
console.log(chec1,chec2)
}
Ionic Google map native plugin Doc
l found solution while move map to update LatLngBounds . used GoogleMapsEvent constants
depending on doc , and he is working fine
this.map.on(GoogleMapsEvent.CAMERA_MOVE).subscribe(()=>{
let left= this.map.getVisibleRegion().northeast.lat
let leftbottom= this.map.getVisibleRegion().northeast.lng
let right= this.map.getVisibleRegion().southwest.lat
let rightbottom= this.map.getVisibleRegion().southwest.lng
console.log(left,leftbottom , right ,rightbottom )
})
I follow this guide
https://developers.google.com/maps/documentation/javascript/places#places_photos
to create place photo as marker icon. This is my map initialization code:
var map;
function initMap() {
// Create a map centered in Pyrmont, Sydney (Australia).
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -6.920812, lng: 107.604116},
zoom: 13
});
var request = {
location: map.getCenter(),
radius: '5000',
type: ['shopping_mall']
};
var service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);
}
// Checks that the PlacesServiceStatus is OK, and adds a marker
// using the place ID and location from the PlacesService.
function callback(results, status) {
console.log(results);
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
createPhotoMarker(place);
}
}
}
google.maps.event.addDomListener(window, 'load', initMap);
this is the createPhotoMarker function
function createPhotoMarker(place) {
var photos = place.photos;
if (!photos) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
title: place.name
});
return;
}
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
title: place.name,
icon: photos[0].getUrl({'maxWidth': 35, 'maxHeight': 35})
});
}
the function will create regular marker if place photo is not available. But for the place with photo available, I get this error :
Failed to load resource: the server responded with a status of 404 () lh3.googleusercontent.com/w35-h35-p/AF1QipOIL6GVVmtqp_cw_hBEQxdILZSa8poMO0HAqFHd=k
And the map only shows regular marker.
What did I do wrong?
This is the fiddle http://jsfiddle.net/v90fmrhp/
==========Update 2017-07-07============
Thanks for the answers and fixes
It seems the issue solved. My fiddle is working now
https://issuetracker.google.com/issues/63298126
Marked as Fixed
Good news! We have fixed this issue. Thanks for your patience.
Happy Mapping!
Looks like the error you are seeing is caused by some issue on Google's side. It's affecting quite a few other users as well, have a look at their public issue tracker:
Thanks for reporting this issue. We verified it and we'll keep tracking it.
https://issuetracker.google.com/issues/63298126
UPDATE (2017-07-06):
A fix for this is going into our release process now and it should be out soon - probably Monday at the latest.
https://issuetracker.google.com/issues/63298126#comment13
Had the same issue and Sulyman suggested a workaround that is working but I don't know for how long when google fixes this.
Google Places Photos .GetUrl is adding width and height to url
Here is what we did.
if(place.photos != null){
for(var i = 0; i < place.photos.length; i++){
//Do a string replace to get the w-h-p out of there.
var str = place.photos[i].getUrl({"maxWidth": 100, "maxHeight": 100});
var res = str.replace("w100-h100-p", "p");
self.pacPhotos.push({
id : res
});
}
}else {
console.log("no photo");
}
}
I also ran into this with google places api. Everything was working fine then randomly it stopped. It seems likely that it is due to google making changes as they get ready for releasing a better maps api to support vector
#DKinnison saved me with his solution so I just wanted to post my ES6 solution for parsing a received place. I commented out the other properties I am personally not using in case you need to.
const PHOTO_WIDTH = 600;
const PHOTO_HEIGHT = 600;
export function parseGooglePlace(place) {
if (!place) {
return;
}
const {
// address_components,
formatted_address,
geometry,
// icon,
// id,
// international_phone_number,
name,
// rating,
// reviews,
// opening_hours,
photos: _photos = [],
place_id,
// reference,
types = [],
// url: mapsURL,
// utc_offset,
// vicinity,
website,
} = place;
const photos = _photos.map(p =>
p
.getUrl({ maxWidth: PHOTO_WIDTH, maxHeight: PHOTO_HEIGHT })
.replace(`w${PHOTO_WIDTH}-h${PHOTO_HEIGHT}-p`, 'p'),
);
return {
website,
name,
photos,
address: formatted_address,
placeId: place_id,
geometry,
types,
};
}
I am hacking around with gmap3 managing to get the first task working. Showing the map using a lat long.
My javascript look likes
$('#map_canvas').gmap3(
{
action: 'init',
options: {
center: [x,y],
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: []
}
}
},
{
action: 'addMarkers',
radius: 100,
markers: GetMarkers(),
clusters:
{
0:
{
content: '<div class="cluster cluster-3">CLUSTER_COUNT <div class="cluster-3text">Stops</div> </div>',
width: 66,
height: 65
}
},
marker:
{
options:
{
icon: new google.maps.MarkerImage('../img/marker.png', size, origin, null, null)
},
events:
{
mouseover: function (marker, event, data) {
getArrivalsAndStop(marker, event, data);
},
mouseout: function () {
$(this).gmap3({ action: 'clear', name: 'overlay' });
}
}
}
});
This loads the map how I want. My next step is to be able apply a new lat & long. How can I do this without destroying the whole map and recreating it everytime?
I am using jquery gmap3 plugin.
If you want to call setCenter after having initialized the map and without reloading the whole thing you can do this like this :
$('#mymap').gmap3('get').setCenter(new google.maps.LatLng(48.706685,-3.486694899999975))
$('#mymap').gmap3('get') is the magic thing here, it give you the real google map object I think.
It was hard for me to find this out so I hope it can help someone else.
From the documentation:
This example executes map.setCenter with the result of the address resolution, target is not specified because this is the map.
$('#test').gmap3(
{
action: 'getLatLng',
address: '2 bis rue saint antoine, eguilles',
callback: function(result){
if (result){
$(this).gmap3({action: 'setCenter', args:[ result[0].geometry.location ]});
} else {
alert('Bad address 2 !');
}
}
});
So it looks like if you know the coordinates and don't need to use the geocoder, it would be:
$(this).gmap3({action: 'setCenter', args:[ new google.maps.LatLng(latitude, longitude) ]});
Kind of late in the game, but I am using a list and map(google maps type). hope it helps
Here is how I achieved it
$(document).delegate('#inner_list li', 'click', function () {
var id = $(this).attr('data-id');
$("#map-canvas").gmap3({
get: {
name:"marker",
id: id,
all: true,
callback: function(objs){
$.each(objs, function(i, obj){
obj.setIcon("http://www.markericon.com");
var newLL = obj.getPosition()
$('#map-canvas').gmap3('get').panTo(newLL)
});
}
}
});
});