www.webdeveloper.com
Results 1 to 7 of 7

Thread: Bing - Change to Embed Map Code?

  1. #1
    Join Date
    Dec 2007
    Location
    Kelowna, BC
    Posts
    100

    Question Bing - Change to Embed Map Code?

    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
    Visiting or Relocating to the Okanagan Valley...
    http://www.okanaganforum.com

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    Hi there Calman,

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


    This code example validates as strict...
    Code:
    
    <!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>
    coothead
    Last edited by coothead; 03-15-2013 at 05:15 AM. Reason: typing errors !!!

  3. #3
    Join Date
    Dec 2007
    Location
    Kelowna, BC
    Posts
    100
    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
    Visiting or Relocating to the Okanagan Valley...
    http://www.okanaganforum.com

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    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...
    Code:
    
    <!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( http://vortex.accuweather.com/adcbin..._435x90_bg.jpg );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>
    coothead

  5. #5
    Join Date
    Dec 2007
    Location
    Kelowna, BC
    Posts
    100
    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
    Visiting or Relocating to the Okanagan Valley...
    http://www.okanaganforum.com

  6. #6
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    No problem, you're very welcome.



    coothead

  7. #7
    Join Date
    Dec 2007
    Location
    Kelowna, BC
    Posts
    100
    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
    Last edited by Calman; 03-22-2013 at 06:03 AM. Reason: Update on progress.
    Visiting or Relocating to the Okanagan Valley...
    http://www.okanaganforum.com

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles