We Keep Coding

How to identify if the pushpin is visible in the current view/zoom of bingMaps or not? if not visible setView to Location of the pushpin?

I'm using Bing Maps V8 and As per ask, I've to move/pan the bing map to set the visibility of the pushpin. Based on the pushpin location we can directly set the view as shown below but I've adjust/move the bing map only if the current view of bing maps doesn't have the pushpin visible to the naked eye.
this.map.setView({
center: new Microsoft.Maps.Location(pin.lat, pin.long),
});
Could you please share your thoughts on how to identify whether the pin is visible in the current view or not?
Regards & Thank you in Advance.

Get the bounding box of the map, then check to see if it contains your pushpins location. If it doesn't update the map view. Here is a code block that does this.
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(45, -110), null);
map.entities.push(pushpin);
//Get the bounding box of the current map view.
var bounds = map.getBounds();
//Check to see if the bounding box contains the pushpins location.
//And if it doesn't, center the map.
if(!bounds.contains(pushpin.getLocation())) {
map.setView({
center: pushpin.getLocation()
});
}

Gmarker custom icon not showing full size

We have manage to create markers with custom icon where we define first the icon for e.g.
var pIcon = new google.maps.MarkerImage('alertIcon/P.png',
new google.maps.Size(15, 15));
Then we define the marker in this manner.
var marker = new google.maps.Marker({
position: point,
map: map,
icon: yIcon
});
The issue now the custom icon appear but just partial of it not the complete one as we had in V2 what could be issue here?

var pIcon = new google.maps.MarkerImage('alertIcon/P.png',
// This might be where you're running into trouble, set
// Size(w,h) to the dimensions of the image
new google.maps.Size(72, 95),
// This is the origin, probably want to keep it at 0,0
new google.maps.Point(0,0),
// This is the anchor. For Point(x,y) x should be
// half the image width and y should be the height
new google.maps.Point(36, 95)
);

An icon for a Google maps marker just needs to be a string for the URL of the icon image. Creating a MarkerImage is probably causing the Google maps api to scale down the size of your custom icon.
var pIcon = "alertIcon/P.png"
This is all you should need when defining your icon.

Circle creates on previous coordinate on google map api

I'm creating marker and circle around 500 area. When user will be out of the boundary by drag the map another circle will create within same area of new generated marker. Issue is that its creating circle around previous generated marker instead of current generated marker.
You can check here:
http://jsbin.com/exiram/1
Can anyone help me please?

Pay atention with the events in tme map. for every pan "drag the map" you make a new marker in center of the map and a new circle for that marker.
probaly, you have a listener that capture all mouse events and call the code to make markers and circles.
you can make 2 buttons in your page, one to make a marker and other to make a circle.

Im a little bit busy to post a full answer so please excuse my psudo code
Somthing like this will work !
var map; // OUR MAP OBJECT
var circle; //OUR CIRCLE
var center; // lat long holder
google.maps.event.addListener(map, 'drag', function() {
center = getCenter();
circle.setCenter(center);
});

Remove Polygon from the map

Requirements: Using the Leaflet js maps api, when the customer clicks on a marker, a Rectangle should be drawn just below the Marker, centering according to the marker. Then clicking on another marker should remove previous rectangles and draw another rectangle below newly clicked marker.
Problem: I am using the code below to draw a polygon and I can see a rectangle. And it draws the rectangle on a marker. Then by clicking on another marker a new rectangle is being drawn. But the old rectangle also still exists.
Question: How should I implement the behavior, so that when clicking on new marker, the old rectangle will be deleted from the map?
//polygon
var latBlockSize = 0.002;
var lngBlockSize = 0.002;
var route = [
new L.LatLng(parseFloat(customer.MailingAddress.Lat) + latBlockSize, parseFloat(customer.MailingAddress.Lng) - lngBlockSize),
new L.LatLng(parseFloat(customer.MailingAddress.Lat) + latBlockSize, parseFloat(customer.MailingAddress.Lng) + lngBlockSize),
new L.LatLng(parseFloat(customer.MailingAddress.Lat) - latBlockSize, parseFloat(customer.MailingAddress.Lng) + lngBlockSize),
new L.LatLng(parseFloat(customer.MailingAddress.Lat) - latBlockSize, parseFloat(customer.MailingAddress.Lng) - lngBlockSize)
];
window.polygon = new L.Polygon(route);
window.map.addLayer(window.polygon);

I figured it out by myself.
This was the solution:
window.map.removeLayer(window.polygon);

That is working as well, tested with Leaflet 1.2.0.
window.polygon.remove()

How to place multiple icons for Google map markers in v3?

I'm trying to create a map similar to this (which is using v2 of the API). I want each marker on the map to consist of an image with a frame or background behind like so.
Using the icon and shadow MarkerOptions doesn't seem to accomplish this because a markers shadow falls behind other markers icons.

You can use an excellent little library, RichMarker. Its documentation is here.
To make usage easier, you can even create your own custom marker class, something like this:
Ns.Marker = function(properties) {
RichMarker.call(this, properties);
this.setContent('<div class="three-images-marker">' +
properties.NsImage ? '<div class="marker-image-1"><img src="'+properties.NsImage1+'"/></div>' : '' +
properties.NsFrameImage ? '<div class="marker-image-2"><img src="'+properties.NsImage2+'"/></div>' : '' +
'</div>');
};
Ns.Marker.prototype = Object.create(RichMarker.prototype);
// and use it like this:
var yourFramedMarker = new Ns.Marker({
position: yourMarkerLatlng,
map: yourMap,
NsImage: 'example.com/image.png',
NsFrameImage: 'example.com/frame.png',
});
'Ns' is whatever namespace you use, if you do.
From here on it's CSS work, you can position the images as you like.

I think you'll have to merge the images with the marker backgrounds. When I was building something similar I used CSS sprites and calculated the vertical offset (vPos), based on a standard height. I just didn't bother with the shadows.
var mImage = new google.maps.MarkerImage("YOURMARKER.png",
new google.maps.Size(34, 35),
new google.maps.Point(0, vPos),
new google.maps.Point(10, 34)
);
//insert marker
marker = new google.maps.Marker({
icon: mImage,
position: new google.maps.LatLng(latitude, longitude),
map: map
});

yes, marker shadows are all placed in the separate layer - below all markers. You have to merge the background and photo into one icon image, or create a new class which would inherit from MarkerImage.