Bing - Change to Embed Map Code? - WebDeveloper.com Forums

This site is best viewed in a modern browser with JavaScript enabled.

Bing - Change to Embed Map Code?

Calman

Hi Folks,

I run local columnist's articles on our site on a weekly-monthly basis, where a lot of the reviews include scrollable maps. With each new page, I typically run them through a Validator, which kicks up approx 15-25 errors (which is commonly due to iframes or flash elements - which I can live with). However, in the last week, I have noticed a visual change to Bing Embedded Maps. It was not until tonight, that I see the coding changes that are included with their "generated code" for embedded maps on your site. Now, the maps look the same as before, apart from the new look zoom/pan graphic overlay, however, the Validator now throws up around 50 errors, all based on the embed code that Bing now generates.

The funny thing is, the old embedded maps (previous articles) show the new look, but retain the old generated code ... so I am confused???

Has anyone else come across this? ... is there a workaround or better approach?

All the best,
Cal

coothead

Hi there Calman,

have you considered using the "object element" instead of the "iframe element" ?

This code example validates as strict...

[color=navy]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>bing map</title>

<style type="text/css">
body {
    background-image:url(http://www.okanaganforum.com/images/backdrop%20home%202013.jpg);
    background-position:center top;
 }
h2 {
    font-family:arial,sans-serif;
    font-size:12px;
    color:#fff;
    text-align:center;
 }
#map {
    margin-top:300px;
 }
#obj0 {
    display:block;
    width:940px;
    height:206px;
    margin:auto;
 }
#obj1 {
    display:block;
    width:598px;
    height:210px;
    margin:auto ;
 }
#obj2 {
    display:block;
    width:598px;
    height:130px;
    margin:auto;
    overflow:hidden;
 }
</style>

</head>
<body>

<div id="flash-header">

<object id="obj0" type="application/x-shockwave-flash" data="http://www.okanaganforum.com/admin/flash/2012banner.swf "width="940" height="206">
 <param name="movie" value="http://www.okanaganforum.com/admin/flash/2012banner.swf">
 <param name="allowScriptAccess" value="sameDomain">
 <param name="quality" value="high">
 <param name="wmode" value="transparent">
</object>

</div>

<div id="map">

<h2>Interactive Map of the Okanagan Valley</h2>

<object id="obj1" type="text/html" width="598" height="210"
data="http://www.bing.com/maps/embed/?lvl=8&amp;cp=49.95302722253464~-119.36277770996094
&amp;sty=h&amp;draggable=true&amp;v=2&amp;dir=0&amp;where1=Vernon%2C+BC&amp;form=LMLTEW
&amp;pp=50.26567840576172~-119.2738037109375&amp;mkt=en-ca
&amp;emid=099c59af-061f-f119-b1ed-66cf63b7491e&amp;w=598&amp;h=210">
</object>

</div>

<div id="weather">

<h2>Local Time &amp; Weather</h2>

<object  id="obj2" type="text/html" data="http://www.okanaganforum.com/weather iframe.html" width="598" height="130">
</object> 

</div>


</body>
</html>[/color]

coothead

Calman

Many thanks for the example above coothead ... will have a good look into it when time permits.

The one thing I notice, is there a way of removing the frame and scroll bars with the Object route?

I heard that Object is not always the best alternative to iframes, but can't honestly remember the reason why? (browser compatibility perhaps?) ... and that Ajax includes was a better option to take?

It's just a nusiance that Bing have suddenly changed their "generated code" .. as that is the route of the problem I am facing right now.

Anyway, thanks again, will chip away at your code example and implement it into my columnist pages, where these elements are present.

All the best,
Cal

coothead

Hi there Calman,

apart from the flash stuff, you could put other stuff - ( the map and the weather ) - straight into the page.

The following example has been tested in IE8+, Firefox 19.0.2, Chrome 25.0.1, Opera 12.1.4 and Safari 5.1.7...

[color=navy]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>bing map</title>

<style type="text/css">
body {
    height:2780px;
    background-image:url(http://www.okanaganforum.com/images/backdrop%20home%202013.jpg);
    background-position:center top;
 }
h2 {
    font-family:arial,sans-serif;
    font-size:12px;
    color:#fff;
    text-align:center;
 }
#obj0 {
    display:block;
    width:940px;
    height:206px;
    margin:auto;
    margin-bottom:400px;
 }
#EmbedMap {
    width:598px;
    height:210px;
    margin:auto;
    overflow:hidden;
 }
#weather{
    width:598px;
    height:130px;
    margin:auto;
 }
</style>

</head>
<body>

<div id="flash-header">

<object id="obj0" type="application/x-shockwave-flash" data="http://www.okanaganforum.com/admin/flash/2012banner.swf "width="940" height="206">
 <param name="movie" value="http://www.okanaganforum.com/admin/flash/2012banner.swf">
 <param name="allowScriptAccess" value="sameDomain">
 <param name="quality" value="high">
 <param name="wmode" value="transparent">
</object>

</div>


<div id="EmbedMap">

<h2>Interactive Map of the Okanagan Valley</h2>

</div>


<div id="weather">

<h2>Local Time &amp; Weather</h2>

<table cellpadding="0" cellspacing="0"><tr>
<td style="background-image:url('http://www.okanaganforum.com/admin/graphics/clockbackdrop.jpg')">
<div style="width:141px;padding-left:21px;">
<script type="text/javascript" src="http://www.worldtimeserver.com/clocks/embed.js"></script>
<script type="text/javascript">
objCABC=new Object;objCABC.wtsclock="wtsclock001.swf";
objCABC.color="517eb7";
objCABC.wtsid="CA-BC";
objCABC.width=120;
objCABC.height=120;
objCABC.wmode="transparent";
showClock(objCABC);
</script>
</div>
</td>
<td style="background-image:url('http://www.okanaganforum.com/admin/graphics/clockbackdrop.jpg')">
<div style="width:436px;height:130px; background-image:url( [url]http://vortex.accuweather.com/adcbin/netweather_v2/backgrounds/winter1_435x90_bg.jpg[/url] );background-repeat:no-repeat;background-color:#7cadee;">
<div id="NetweatherContainer" style="height:75px;">
<script type="text/javascript" src="http://netweather.accuweather.com/adcbin/netweather_v2/netweatherV2ex.asp?partner=netweather&amp;tStyle=normal&amp;logo=1&amp;zipcode=NAM|CA|BC|KELOWNA|&amp;lang=uke&amp;size=10&amp;theme=winter1&amp;metric=1&amp;target=_blank"></script>
</div>
<div style="text-align:center;font-family:arial,helvetica,verdana,sans-serif;font-size:10px;line-height:15px;color:#00f;">
<a style="color:#00f" href="http://www.accuweather.com/world-index-forecast.asp?partner=netweather&amp;locCode=NAM|CA|BC|KELOWNA|&amp;metric=1">Forecast</a> | <a style="color:#00f" href="http://www.accuweather.com/maps-satellite.asp">Maps</a> | <a style="color: #00f" href="http://www.accuweather.com/index-radar.asp?partner=accuweather&amp;zipcode=NAM|CA|BC|KELOWNA|">Radar</a>
</div>
<img style="padding-top:5px" src="http://www.okanaganforum.com/images/spacer.gif" height="1" width="34" alt=""><span style="font-family:tahoma;color:#fff;">Okanagan Valley</span><img style="float:right;padding:5px 25px 0 0;" src="http://vortex.accuweather.com/adc2004/common/images/misc/netweather_v2/adcwhite.png" alt="">
</div>
</td>
</tr></table>

</div>


<!-- JS at the bottom for performance reasons -->
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&amp;mkt=en-ca"></script>
<script type="text/javascript">//<![CDATA[
(function (o, t, f){
if (o){
if (o.addEventListener)	{ o.addEventListener(t, f, true); }
else if (o.attachEvent) { o.attachEvent('on' + t, f); }
}
})(window, 'load', function (){
if (!false){
Microsoft.Maps.loadModule('Microsoft.Maps.Themes.BingTheme',
{
callback: function (){
var cp = new Microsoft.Maps.Location(49.9530272225346,-119.362777709961);
var map = new Microsoft.Maps.Map(document.getElementById('EmbedMap'),
{
theme: new Microsoft.Maps.Themes.BingTheme(),
showBreadcrumb:false,
showDashboard:true,
disableBirdseye:true,
showMapTypeSelector:false,
showLogo:true,
enableClickableLogo:true,
enableSearchLogo:false,
showScalebar:false,
credentials:'AijbFhynMi9YlUoC5sbBKfrfbnkcMJ34sYBEORQwbsviodnw8nTkkgh5se5COtMs',
center:cp,
zoom:8,
width:598,
height:210,
mapTypeId:Microsoft.Maps.MapTypeId.aerial,
labelOverlay: Microsoft.Maps.LabelOverlay.visible
});

var ps = [{"description":"","location":{"latitude":50.265678405761719,"longitude":-119.2738037109375},"title":""}];
for(var i=0;i< ps.length;i++){
var p = ps[i];
var location = new Microsoft.Maps.Location(p.location.latitude, p.location.longitude);
var pp = new Microsoft.Maps.Pushpin(location, {draggable: false});
map.entities.push(pp);
if (p.description || p.title){
map.entities.push(
new Microsoft.Maps.Infobox(location, {
title: ((p.title) ? decodeURIComponent(p.title) : ''),
description: ((p.description) ? decodeURIComponent(p.description) : ''),
pushpin: pp
}));
}
}
}
});
}
});
//]]></script>

</body>
</html>[/color]

coothead

Calman

Many thanks coothead!!!

I really appreciate you taking the time to play around with this, as I am well aware of the efforts involved.

You have given me a lot of food for thought and I will certainly be working with your suggestions, to improve how I present elements on the pages of my site. The last 6 months, I have been "converting myself" from the old table structure HTML, into the CSS approach, so although I am enjoying the converted method, I know I still have a lot of learning ahead.

All the best,
Cal

coothead

[indent]No problem, you're very welcome. [/indent]

coothead

Calman

Hi again! ....

Time for an obvious question coothead.

If I need to generate a new map location, how can I achieve this with the code you provided? (replace co-ords with manual iframe parameters or is there a map generator I can use)

All the best,
Cal

Update:

Okay, fiddled with the example text you kindly provided, so this is what I changed for a different location in the city:

var cp = new Microsoft.Maps.Location(49.886229,-119.491510);
zoom:14,
width:550,
height:400,
var ps = [{"description":"","location":{"latitude":49.886229,"longitude":-119.49151},"title":""}];

(replaced the 'red' tags with the co-ords generated by BING's Iframe code, so hope I am on the right tracks? (visually, it seems to work okay on my page and validates well)

All the best,
Cal