We Keep Coding

How Can I animate Bing map pushpins based on a live GPS feed

I have looked over the bing maps documentation trying to find an answer to my question. I would prefer to do everything using the bing maps api and not have to add a third party library if possible.
Question: How can I animate a pushpin to make a smooth transition from one set of gps coordinate(longitude/latitude) to another in order to simulate smooth movement of a Pushpin on Bing maps?
Question: can deleting an entire object out of the map.entities array waste enough resources to cause performance issues? If so how can I change the pushpin latitude and longitude properties without deleting the entire object?
Sample code of trying to change the pushpins properties without deleting the object out of the array. This code does not work… I am unsure why it is not working?
map.entities.get(theIndexOfThePushPin)._location.latitude = newLat;
map.entities.get(theIndexOfThePushPin)._location.longitude = newLon;
I create a pushpin like so - This works fine
map.entities.push(new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat, lon), {
text: text,
visible: true,
textOffset: new Microsoft.Maps.Point(0, 5)
}));
Pseudo code for my recursive angular $http call
function BusMoveGPSRefresh() {
$http.get(resourceURL)
.then(function (data) {
if ('if pushpins have not been created') {
//create pushpins...
}
} else {
//delete pushpins out of the array and then recreate them
//with updated lon/lat. Or just update existing objects lon/lat properties if possible?
}
}
BusMoveGPSRefresh();//after everything is done then go get more info and start again. recursion...
}, function (reason) {// if fail than do
console.log(reason);
console.log("This Is not Working!!! Dang!!");
});
}
Any insight into the problem would be greatly appreciated! Thanks!

I could not find a simple answer for adding animation. I did find a site that gave a step by step tutorial on a more in-depth answer on how to animate pushpins.
Answer: 1 -- tutorial on how to animate bing map pushpins
https://blogs.bing.com/maps/2014/08/07/bring-your-maps-to-life-creating-animations-with-bing-maps-javascript/
Answer: 2 -- this is how to update the pushpin location without deleting the pushpin object out of the entities array.
Instead of deleting the entire pushpin object find the pushpin index and then use the property "setLocation()" and then add a new location.
//check to make sure that the lat and lon have
//changed if it is still the same location do nothing. else update
if (map.entities.get(indexOfPushpin).getLocation().latitude != lat
|| map.entities.get(indexOfPushpin).getLocation().longitude != lon) {
map.entities.get(indexOfPushpin).setLocation(new Microsoft.Maps.Location(lat, lon));
}

Google Maps marker click listener

I need to add click event to Google Map markers, I'm using cordova in my app. Any way recommended in the documentation is not working... unless I make the marker draggable (then it works like gold) and I can't do that. I found that it was an issue a long, long time ago in 2011...
I think something had to be done with that since 2011. Do you have any idea?
Working piece of code below:
var position = new google.maps.LatLng(coords.lat, coords.lng);
var markerOptions = angular.extend({
map: map,
position: position,
title: name,
draggable: true
}, DrawingOptions.marker);
var googleMarker = new google.maps.Marker(markerOptions);
var marker = {
Id: id,
Type: type,
marker: googleMarker,
circle: new google.maps.Circle(circleOptions),
};
marker.marker.addListener('click', function () {
addInfoModal();
});
I also tried to make a function adding listener, but it won't work. I was also thinking about not-so-graceful solution - making marker draggable, but actually preventing action while dragging, but this isn't working and it looks bad in code.
Have you heard of something helpful in this case?

Seem your function is not right.
try without function simply adding the listener this way :
google.maps.event.addListener(googleMarker, 'click', function (event) {
alert('click');
});

Sencha Touch 2 remove Google map Markers

i'm trying to remove all the markers from a google map using ExtJS. I'm performing a setCenter() operation (i need to remove the old center from the map) and also i want to add a new marker in the new center.
As i know, to get the google map instance i need to perform a getMap() over the map container, i.e map.getMap()
I tried with clearMarkers();, deleteMarkers(); and markers = []; but neither works. The google map object looks really weird on the Chrome Developer tools utility, at least for me.
With the addition, same problem. I'm doing that:
new google.maps.Marker({
map : map.getMap(),
position : new google.maps.LatLng(location.lat, location.lng),
title : 'Drag Marker To New Position',
animation : google.maps.Animation.DROP,
draggable : true
});
Any help is appreciated!
Thanks.

It's very simple. To remove a marker from the map, call the setMap() method passing null as the argument.
marker.setMap(null);
Note that the above method does not delete the marker. It simply removes the marker from the map. If instead you wish to delete the marker, you should remove it from the map, and then set the marker itself to null.
If you wish to manage a set of markers, you should create an array to hold the markers. Using this array, you can then call setMap() on each marker in the array in turn when you need to remove the markers. You can delete the markers by removing them from the map and then setting the array's length to 0, which removes all references to the markers.
Find an example here View example (marker-remove.html)
Read more about Google Maps Tutorial - Remove a marker

Finally i get a solution for that (maybe it's not the better way, but it works)
I decided to have a global variable that references the marker that i have to put over the map.
To define a global variable in sencha i use this approach:
Ext.application({
name: 'SIGCC',
marker: null,
....
....
});
I'm using a custom class to get an AutocompleteTextField, and when the user taps a suggested location the previous marker has to be removed and a new one is placed over the google map. Also i have to recenter the map in the new location
recenterMap: function(location){
//addressMap is the id of the xtype map component
var map = Ext.getCmp('addressMap');
map.setMapCenter({ latitude: location.lat, longitude: location.lng });
if (SIGCC.app.marker){
SIGCC.app.marker.setMap(null);
}
SIGCC.app.marker = new google.maps.Marker({
map : map.getMap(),
position : new google.maps.LatLng(location.lat, location.lng),
title : 'Drag Marker To New Position',
animation : google.maps.Animation.DROP,
draggable : true
});
//My map is hidden before de users tap action, so i have to unhide them
map.setHidden(false);
},
As you can see, this portion of code references the global variable defined previously.
Hope this helps someone.

Capture Google Maps Polyline On Click (Per Start/End)

Description
I am currently working with Google Maps V3 for our client and they've asked us to implement a drawing tool that will allow them to create connected stream of lines and calculate the distance. However, it seems the Google Maps V3 Drawing Manager library is very limited in how it allows us to capture the click events for a polyline.
Our Code
google.maps.event.addListener(map, 'click', function(event){
//TODO: Store lat/long of click for distance calculation later
});
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
//TODO: Display the total distance of the line
});
The Goal
google.maps.event.addListener(drawingManager, 'polylineclick', function(event){
//TODO: Store lat/long of line for distance calculation and display updated distance.
});
As you can see, we want to capture the lat/long as the user is creating the polyline and display the distance as each line is created, not once the entire polyline is completed.
Also, I know we can imitate this by creating custom handlers and doing some magic with the map's click method and drawing lines manually between lat/longs, but it seems weird that the Google Maps API wouldn't have a click method for their Drawing Manager.
Clarification
The end goal is to have functionality so while drawing a polyline, we can display the total length of the polyline dynamically. I.E. I begin by drawing a line, a section appears that says "Total Line is X", I click a second spot to create a second line and the text updates to "x" + "y", I click a third and it updates to "x" + "y" + "z", etc. This is why we were hoping there is an event to handle "lineDrawn" or "polylineClick" to store these lat/longs to we can calculate the length for dynamically created lines without having the user stop drawing lines to see the total length.
Edit: Updated addListener in Our Goal to use drawingManager, not map.
Edit: Addition of Clarification section.

Basically you want to chain the two together like this:
var thePolyLine = new google.maps.Polyline({
polyLineOptions
}).setMap(map).addListener("click", function(event){
//click event
});
============= EDIT =============
Ok, I clearly didn't read the OP's question entirely.
Looks like the markercomplete event returns a marker. I'd create a global Array of marker objects, then you can run a distance check between each on catching that event.
var markers = new Array();
google.maps.event.addListener(theDrawingManager, "markercomplete", function (marker) {
markers.push(marker);
});
Then, you can loop through them, and computeDistanceBetween any or all points.
============= EDIT #2 =============
My Fiddle of the solution! (I updated the code with more comments and fixed an error, made it obvious that distance is in meters):
http://jsfiddle.net/8Xqaw/12/
Right-click the map to add points to measure.
Distance is in meters, btw. It will update distance when you drag points, too. And there is a click function for the polyLine itself.
Clicking the first point again will allow you to connect the final point with the first point to create a polygon, then you can click and drag to move the polygon around (which moves the points as well)...

Try this :3
var PolylineOption = {
strokeColor : "blue",
strokeOpacity : 0.5,
strokeWeight : 5
};
var Display;
var rendererOptions = {
draggable : true,
suppressMarkers : true,
polylineOptions : PolylineOption
};
var Service = new google.maps.DirectionsService();
Display = new google.maps.DirectionsRenderer(this.rendererOptions);
Display.setMap(map);
Service.route(this.request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
Display.setDirections(response);
}
});
google.maps.event.addListener(PolylineOption, 'click', function() {
alert(this.strokeColor);
});

Google Map Marker with custom numbering

I have a Google Maps marker function that successfully creates markers on a map like this:
// A function to create the marker and set up the event window
function createMarker(point,html) {
var marker = new GMarker(point,{title:html});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
Here is a tinyurl of the exiting code: http://tinyurl.com/b8f9b4l
Using this solution: Google maps: place number in marker?
I've updated this line of code but it is not numbering. What am I doing wrong?
var marker = new GMarker(point,{title:html,icon:'icon: \'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+ (position) +'|FF776B|000000',});

The icon property just needs to be the url. You don't need the extra "icon:", and you should drop the extra comma at the end (IE seems to throw an exception when it finds a dangling comma). Also, the parenthesis you don't need - but probably aren't hurting anything.
{
title:html,
icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=' + position +'|FF776B|000000'
}
I see where you got the idea. Idk why s/he got a point for that. The extra "icon:" messes it up.
Try this as a test, it should make sure you don't have any problems with the variables inside the url.
{
title:html,
icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=4|FF776B|000000'
}