bing map api static map image with custom pushpin

Question

I am using using Bingmap api, want to use static map i am using following api reference

http://msdn.microsoft.com/en-us/library/ff701724.aspx

My question is over static map can we display custom pushpin image ?

any quick idea

Answer 1

No - you can choose from one of the 37 built-in pushpin styles, but you can't provide your own custom icon. See http://msdn.microsoft.com/en-us/library/ff701719.aspx for reference.

Answer 2

No, but if you make the same request to Microsoft API with the "&mmd=1" parameter you get a JSON object which includes the pixel offsets of all the markers. With this info you could fairly easily render custom markers with CSS, or composite an image yourself with ImageMagick or similar.

Answer 3

Custom pushpins are not supported natively in the static map api, but as @Ed said you can get metadata about the pushpin location if you need to do this.

This will require a separate call to the same endpoint as the map image with the &mmd=1 or &mapMetadata=1 query appended in the url. This returns an object with a metadata about the map including the pushpin position (minus the map image itself)

http://msdn.microsoft.com/en-us/library/hh667439.aspx

Below is a snippet showing an example of how to do this:

// pushpinData is the returned object from the call
// the anchor property is an object like this {x:200,y:100}
var pushpinPosition = pushpinData.resourceSets[0].resources[0].pushpins[0].anchor;
// the offsets are to do minor adjustments of the image placement
var pushpinXPos = pushpinPosition.x - xoffset;
var pushPinYPos = pushpinPosition.y - $("#myMap").height()- yoffset;

var pushpin = "<img id='pushpinImg' src='marker.png'></img>";
$("#myMap").append(pushpin);
$('#pushpinImg').css('margin-left', pushpinXPos + 'px')
$('#pushpinImg').css('margin-top', pushPinYPos + 'px')

Answer 4

If you only need to center a single pin, which is probably the most common use case for this sort of thing, you can also generate a static image without a pin, and then use CSS to center your custom pin over the image.

Example HTML:

<div class="wrapper">
    <img class="map" src="path/to/bing-maps/static/image" />
    <img class="pin" src="path/to/custom/pin.jpg" />
</div>

Example CSS:

.wrapper {
    max-width: 400px;    
    position: relative;
}
.map {
    display: block;
    width: 100%;
}
.pin {
    display: block;
    height: 34px;
    left: 50%;
    margin-left: -10px;
    margin-top: -34px;    
    position: absolute;
    top: 50%;
    width: 20px;
}

Here's a working fiddle: http://jsfiddle.net/jaredjensen/fem4a556/