We Keep Coding

Google Maps v3 move Markers on top when updated

My App show couriers on Google Maps and as soon as the application receive a GPS update for one of the courier I keep the Map updated with the new courier position. It happen every second for each of my couriers.
The issue is that every time a courier is updated it is moved on top of all others causing a "disco" effect on the map (because couriers may have differe marker color).
I wish to keep the Marker at the same position (in terms of zIndex or whatever) when its position is updated.
How can I do that?
I don't think any code is required here... I do nothing special than create markers and update markers, but I'm pretty sure a comment will arrive with: "show code", so here we are:
funciton createCourierMarkers() {
var couriersStorage = [];
for (var i = 0; i < couriers.length; i++) {
var courier = couriers[i];
var status = courier.status || 'free';
var courierPosition = _getCourierPosition(courier);
var icon = MarkersService.getCourierIcon(status);
var courierMarker = new google.maps.Marker({
map: map,
position: courierPosition,
icon: icon,
zIndex: 200,
type: 'courier',
id: courier.id,
status: status
});
couriersStorage.push(courierMarker);
}
}
function updateCourierMarkerPosition(courier, marker) {
var courierPosition = _getCourierPosition(courier);
marker.setPosition(courierPosition);
}

Shift a polyline which hides another one on Google Map

I am drawing transport lines that are overlapping: two lines are going through the same road.
var routePath = new google.maps.Polyline({
path: polylinePoints,
As one line hides the other, I would like to shift one of these lines to make the two lines visible on the network.
I was wondering if it was possible to move a polyline as "one whole shape"?
because when I use the options: draggable:true, editable:true I get the opportunity to redraw the polyline "point by point", and as you have understood, it is not what I would like to do.
Thanks.

You can try this way (it is only a suggestion not tested ):
manage the polyline by click event
google.maps.event.addListener(drawingManager, 'click', function(line) {
var coord = line.getPath();
var newCoords
var numCoord = coord.length;
for (i = 0; i < numCoord; i++) {
newCoord[i] = new google.maps.LatLng(coord[i].lat + yourShiftY, coord[i].lng + yourShiftX);
}
line.setPath(newCoord);
});

OpenLayers Map markers disappear when map is centered on them

I'm having issues with the OpenLayers map markers. I have searched through the other answers here and on other sites but non of them really addressed the issue I'm having (at least I don't think they did. I'm fairly new to OpenLayers and Javascript, my apologies if I am wrong).
The markers appear when I load the map and page, and no errors display in the console. When I pan to the markers, as they cross into the middle third of the map at max extent, they disappear! When I zoom in, they disappear before I can even get them on screen (never errors from the console). Here is my javascript code for generating the map and markers. Thank you in advance for all of your help.
Additional notes: When I use static numbers (and not values retrieved from my XML file) for marker positioning, the markers do not disappear on pan or zoom. I am so confused.
RESOLVED: I used a different XML file and the markers stopped disappearing for some reason, I have no idea why.
Code:
$(function()
{
var map = new OpenLayers.Map("rcp1_map");
layer = new OpenLayers.Layer.OSM("OpenStreetMap");
map.addLayer(layer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
//load and retrieve values from XML file here
var xmlDoc=loadXMLDoc("http://whxlab3.dart.ns.ec.gc.ca/~brinka/
EMETsiteV1/EMETsite.xml");
var z=xmlDoc.getElementsByTagName("buoy_number");
var y=xmlDoc.getElementsByTagName("lat");
var x=xmlDoc.getElementsByTagName("long");
//create and add all map markers here
for(i=0; i<x.length; i++)
{
//use loaded XML file to retrieve values for marker positions
var px = x[i].childNodes[0].nodeValue;
var py = y[i].childNodes[0].nodeValue;
var pz = z[i].childNodes[0].nodeValue;
console.log("Testing Console", px, py);
var size = new OpenLayers.Size(32, 37);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('stock_images/buoy_arrow.png', size,
offset);
icon.setOpacity(0.7);
var lonlat = new OpenLayers.LonLat(px, py);
lonlat.transform(new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913"));
var marker = new OpenLayers.Marker(lonlat, icon);
marker.events.register("mouseover", marker, function(){
console.log("Over the marker "+this.id+" at place
"+this.lonlat);
this.inflate(1.2);
this.setOpacity(1);
});
marker.events.register("mouseout", marker, function(){
console.log("Out the marker "+this.id+" at place
"+this.lonlat);
this.inflate(1/1.2);
this.setOpacity(0.7);
});
marker.events.register("click", marker, function(){
console.log("Clicked "+this.id+" at place "+this.lonlat);
popup = new OpenLayers.Popup.FramedCloud("chicken",
marker.lonlat, new OpenLayers.Size(200, 200),
("Buoy Number: "+pz), null, true);
map.addPopup(popup);
});
markers.addMarker(marker);
}
//:*** To here
});

Bing Map pushpins not displaying on an Office365 SharePoint page

I have an Office 365 SharePoint site where I am trying to display data from a list that contains geolocation data using the Bing Maps ajax control (http://msdn.microsoft.com/en-us/library/gg427610.aspx). My map is loading up correctly and displaying the correct location but the actual pushpins are not displaying. I've tried default and custom pushpin icons to no avail. When I use similar JavaScript on a 'vanilla' html page, the pushpins display just fine so I think there must be some sort of conflict with the SharePoint JavaScript or css.
Here the relevant block of code:
function fillListData(web, list, items) {
var tile = $("#" + tileId);
var content = tile.find('.tileContent');
var mapOptions = {
credentials: "",
mapTypeId: Microsoft.Maps.MapTypeId.auto,
showDashboard: false
};
var map = new Microsoft.Maps.Map(content[0], mapOptions);
var locs = [];
var e = items.getEnumerator();
while (e.moveNext()) {
var listItem = e.get_current();
var title = listItem.get_item("Title");
var loc = listItem.get_item("Location");
var lat = loc.get_latitude();
var lon = loc.get_longitude();
var mapLoc = new Microsoft.Maps.Location(lat, lon);
locs.push(mapLoc);
//var pin = new Microsoft.Maps.Pushpin(mapLoc, {text: title, visible: true, icon:'../Style Library/Images/flag_red.png'});
//var pin = new Microsoft.Maps.Pushpin(mapLoc, {visible: true, icon:'../Style Library/Images/flag_red.png', width: 50, height: 50});
var pin = new Microsoft.Maps.Pushpin(mapLoc);
map.entities.push(pin);
}
var bestView = Microsoft.Maps.LocationRect.fromLocations(locs);
map.setView({bounds:bestView });
}
Any insights are appreciated.
Thanks.

Double check the lat and lon values. Make sure they actually have a value and that it is a number and not a string. If it is a string use parseFloat to convert it to a number. Numbers that are stored as a string is a fairly common cause for pushpins not displaying as the Location class ends up being invalid.

Incase anyone else comes across this problem, going into your internet settings, lowering protection levels and going into "Custom Levels", finding "Enable mixed content" and enabling that has been the solution for two machines here.

Bing! Map How to create an info box popup

I have a pin on my Bing! version 7 map although I'm failing to find out how to create an onclick event to display an info box !
Can anyone point me in the right direction or provide an example?
I have the following code so far! I need the popup to overlay the map panel.
Many thanks as always!
var map = null;
function GetMap() {
map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: 'xxx' });
map.entities.clear();
var pushpinOptions = { icon: 'icon.png', width: 53, height: 61 };
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), pushpinOptions);
var infoboxOptions = {title:'Infobox Title', description:'Infobox description'};
var defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions );
map.entities.push(defaultInfobox);
map.entities.push(pushpin);
}

Here's an example from MSDN
http://msdn.microsoft.com/en-us/library/gg508987.aspx

This page on the Bing sdk site has plenty of example with the code samples below the map:
http://www.bingmapsportal.com/isdk/ajaxv7