CODEWITHSUNDEEP
javascriptvirtual-earth
bluestella
bluestella

Reputation: 399

Adding a push pin to a map using Javascript

How will I be able to put a pin using a click of my mouse? given this is the code:

function AddPushpin()
  {
      var shape = new VEShape(VEShapeType.Pushpin, **map.GetCenter()**);
      shape.SetTitle('sample');
      shape.SetDescription('This is shape number '+pinid);
      pinid++;
      map.AddShape(shape);
  }

it's pointing to the center..

do you have any idea on how to add an image to the pushpin hover?

Upvotes: 1

Views: 4954

Answers (2)

Chris Pietschmann
Chris Pietschmann

Reputation: 29885

Here's an example that adds a pushpin during the OnClick event of the Map, and sets the Shape's Photo URL to display an image within the InfoxBox.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-US"></script>
    <script type="text/javascript">
    var map = null;

    function GetMap()
    {
        map = new VEMap("myMap");
        map.LoadMap();

        // Attach the OnClick event
        map.AttachEvent("onclick", OnClick_Handler);

        // You could Dettach the OnClick event like this
        //map.DetachEvent("onclick", OnClick_Handler);
    }

    function OnClick_Handler(e){
        // "sender" is the VEMap that raised the event
        // "e" is the VE Map Event Object

        // Get the Lat/Long where the Mouse was clicked
        var pushpinLocation = map.PixelToLatLong(new VEPixel(e.mapX, e.mapY));

        // Create the Pushpin Shape
        var s = new VEShape(VEShapeType.Pushpin, pushpinLocation);
        s.SetTitle("test pushpin");
        s.SetDescription("test description");

        s.SetPhotoURL("http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png");

        // Plot a Shape at the Clicked location
        map.AddShape(s);
    }
    </script>
</head>
    <body onload="GetMap();">
        <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
    </body>
</html>

Upvotes: 1

Muad&#39;Dib
Muad&#39;Dib

Reputation: 29196

check out this article...

function InitMap ()
{
// add code to init your map....

// attach the onclick event...
map.AttachEvent("onclick", MouseClick);

}

function MouseClick(e)
    {
        map.AddPushpin('pin', 
        e.view.latlong.latitude, 
        e.view.latlong.longitude,
        88,
        34,
        'pin',
        'MyPin',
        1);  
    }

Upvotes: 0

Related Questions