Solved

embedding bing map with custom places

Posted on 2011-03-06
1
839 Views
Last Modified: 2012-05-11
Hi, can you please let me know how I can embed a map from bing, after I insert a custom mark on some locations? I have a store and we have two retail locations, we would like to insert a mark on the map with our two locations, and then embed the map in our html files for our website.

Also, can I add a custom image on the place mark?

Thank you!
0
Comment
Question by:darkbluegr
1 Comment
 
LVL 28

Accepted Solution

by:
strickdd earned 500 total points
ID: 35057555
First, you'll have to decide which version of Bing Maps API to use: http://msdn.microsoft.com/en-us/library/dd877180.aspx.
Then you can follow the references on how to do what you are looking to do.

For example, using the 7.0 API, you create the map page (http://msdn.microsoft.com/en-us/library/gg427624.aspx):

<!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://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

      <script type="text/javascript">
      function GetMap()
      {  

         var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
                           {credentials: "Your Bing Maps Key",
                            center: new Microsoft.Maps.Location(45.5, -122.5),
                            mapTypeId: Microsoft.Maps.MapTypeId.road,
                            zoom: 7});
      }
      </script>
   </head>
   <body onload="GetMap();">
      <div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>      
   </body>
</html>


Then you add you location pushpins (http://msdn.microsoft.com/en-us/library/gg427604.aspx):

// Define the pushpin location
var loc = new Microsoft.Maps.Location(47.592, -122.332);  //Use the GPS of your store here
           
// Add a pin to the map
var pin = new Microsoft.Maps.Pushpin(loc);
map.entities.push(pin);
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now