Adobe Experience Manager Sites & More

santoshm0123 · 10/15/15

Hi,

In my page we r trying to call bing map by using bing map ajax v7.0 which works fine on mozilla/chrome but the ma doesn't show upon IE-9/10/11

and even when we search the page on mobile version in windows phone nokia lumina 1020 win 8.1 it doesn't work fine. (like the scroll from left to right doesn't work )

Is there any solution for this? Will this work or not?

smacdonald2008 · 10/15/15

This issue should be posted to forums on the bing map forums:

https://social.msdn.microsoft.com/Forums/en-US/home?forum=bingmapsajax

This is not really an AEM question - but rather the technology you are trying to embed into AEM. The issue is making bing maps work in IE.

View solution in original post

shekhardhiman · 10/15/15

Hi there,

Thank you for reaching out to Adobe Community.

Could you please elaborate a little on which product/solution within Adobe Marketing Cloud this question is specific to?

Thanks!

santoshm0123 · 10/15/15

This Question comes under adobe CQ5. (content management system) and in my component i m having map page in which I m using bing map ajax api. as i told it works fine on chrome /mozilla not on IE

this is how i wrote my code

iframe used ofr mobile

<%@include file="/apps/att/common/components/shared/global.jsp"%>

<%    pageContext.setAttribute("currentPagePath",resourceResolver.map(currentNode.getPath())); %>
<div class="Flexible-container">
    <iframe id="mapPage" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" src="${currentPagePath}.map.html"></iframe>
</div>
    <div id="container">
      <div id="left">
          <img src="mappage/pushpin_green.png"/>
          <label style="font-family: Arial; font-size: 16px; top: -10px; position: relative;">Cities available now</label>
       </div>
      <div id="right">
          <img src="/mappage/pushpin.png"/>
          <label style="font-family: Arial; font-size: 16px; top: -10px; position: relative;">Cities explored</label>
      </div>
      <div id="center">
          <img src="/pushpin_blue.png"/>
          <label style="font-family: Arial; font-size: 16px; top: -10px; position: relative;">Cities planned</label>
      </div>
    </div>

<style>

map.jsp page

<%@include file="/apps/att/common/components/shared/global.jsp"%>
<html>
     <head>

         <script src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1&mkt=en-us" type="text/javascript" charset="UTF-8"></script>
<%

pageContext.setAttribute("currentPagePath",resourceResolver.map(currentNode.getPath()));
pageContext.setAttribute("pushpinExploredPath",resourceResolver.map(request, "/mappage/pushpin.png"));
pageContext.setAttribute("pushpinPlannedPath",resourceResolver.map(request, "/pushpin_blue.png"));
pageContext.setAttribute("pushpinAvailablePath",resourceResolver.map(request, "/mappage/pushpin_green.png"));

%>
         <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
       console.log("${pushpinAvailablePath}");

       var map = null, infobox, dataLayer;
       var pushpinFrameHTML = '';
            var z=4;
              var h= jQuery(window).height();
               var w= jQuery(window).width();

            if(h<=450&&w<=640){z=3; }

          function GetMap() {
                  // Initialize the map
                    var mapOptions = {
                        zoom: z,
                        center: new Microsoft.Maps.Location(39.7392,-99.9903),
                         mapTypeId: Microsoft.Maps.MapTypeId.road,
                        credentials: "Akg_FZYIXiJc8S0ZecryN60DVoNKcHsd8fNm89pSSshPe_R4y89aoVQB8tBK02zt",
                        customizeOverlays: true,
                        showMapTypeSelector:false,
                        showScalebar:false
                }

                 Microsoft.Maps.loadModule('Microsoft.Maps.Overlays.Style',
           { callback: function() {
                map = new Microsoft.Maps.Map(document.getElementById("myMap"), mapOptions);
                jQuery('.MicrosoftMap').append(jQuery('#myMap > div:first'));
                dataLayer = new Microsoft.Maps.EntityCollection();
              map.entities.push(dataLayer);

              var infoboxLayer = new Microsoft.Maps.EntityCollection();
              map.entities.push(infoboxLayer);

              infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false, height: 100, width: 150,offset: new Microsoft.Maps.Point(-13, 30) });
              infoboxLayer.push(infobox);
              map.getZoomRange = function (){
                return {
                    max: 10,
                    min: z
                };
                };
           }
       });

            AddData();
          }

        function AddData() {
                var data = "[]";
              jQuery.ajax({ url:'<c:out value="${currentPagePath}.xhr.json"/>', cache: false, dataType: 'text', success: function(data){
                    var json = jQuery.parseJSON(data);
                    data = json.mapdata;
                  var imgSrc="",i=0,pin1;
                  pushpinFrameHTML ='';
                    console.log('Returned data --> ' + data);
                  for(i = 0; i < data.length; i++) {
                       if(data[i].availability == "explored") {
                        imgSrc = '<c:out value="${pushpinExploredPath}"/>';
                        //pushpinFrameHTML = '<div class="infobox_orange"><div class="infobox_content2">{content}</div></div>';
                    pushpinFrameHTML = '<div class="infobox_other nfoorange"><div class="infobox_banner"></div><div class="infobox_content">{content}</div></div><div class="infobox_pointer_other orangepointer"></div>';
                    pin1= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(data[i].latitude, data[i].longitude),{icon:imgSrc, height:50, width:50, draggable: false});
                      pin1.Title = data[i].district+", "+data[i].state+"";
                      pin1.Description = '<div class="btmLink"><a target="_top" class="tileLinkRightArrow" href="'+data[i].url+'">Keep me updated</a></div>';
                           pin1.name = pushpinFrameHTML;
                    Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);
                      Microsoft.Maps.Events.addHandler(map,'viewchangestart',restrictZoom);
                      dataLayer.push(pin1);
                       }}
                  for(i = 0; i < data.length; i++) {
                       if(data[i].availability == "planned") {
                        imgSrc = '<c:out value="${pushpinPlannedPath}"/>';
                        //pushpinFrameHTML = '<div class="infobox_blue"><div class="infobox_content2">{content}</div></div>';
                      pushpinFrameHTML = '<div class="infobox_other nfoblue"><div class="infobox_banner"></div><div class="infobox_content">{content}</div></div><div class="infobox_pointer_other bluepointer"></div>';
                    pin1= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(data[i].latitude, data[i].longitude),{icon:imgSrc, height:50, width:50, draggable: false});
                      pin1.Title = data[i].district+", "+data[i].state+"";
                    pin1.Description = '<div class="btmLink"><a target="_top" class="tileLinkRightArrow" href="'+data[i].url+'">Keep me updated</a></div>';
                           pin1.name = pushpinFrameHTML;
                      Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);
                      Microsoft.Maps.Events.addHandler(map,'viewchangestart',restrictZoom);
                      dataLayer.push(pin1);
                       }
                  }
                  for(i = 0; i < data.length; i++) {
                      if(data[i].availability == "available") {
                        imgSrc ='<c:out value="${pushpinAvailablePath}"/>';
                        //pushpinFrameHTML = '<div class="infobox_green"><div class="infobox_content">{content}</div></div>';
                         pushpinFrameHTML = '<div class="infobox nfogreen"><div class="infobox_banner"></div><div class="infobox_content">{content}</div></div><div class="infobox_pointer greenpointer"></div>';
                        pin1= new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(data[i].latitude, data[i].longitude),{icon:imgSrc, height:50, width:50, draggable: false});
                      pin1.Title = data[i].district+", "+data[i].state+"";
                      pin1.Description = '<div class="btmLink"><a target="_top" class="tileLinkRightArrow" href="'+data[i].url+'">Shop now</a></div>';
                          pin1.name = pushpinFrameHTML;
                      Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);
                      Microsoft.Maps.Events.addHandler(map,'viewchangestart',restrictZoom);
                      dataLayer.push(pin1);
                  }}
              }});
          }

          function displayInfobox(e) {
              if (e.targetType == 'pushpin') {
                  infobox.setLocation(e.target.getLocation());
                  console.log("description of infobox is:"+e.target.Description + "::::"+e.target.name);
                  var html = "<div class='infobox_title'>" + e.target.Title + "</div>" + e.target.Description;
                  pushpinFrameHTML = e.target.name;
                  infobox.setOptions({
                      visible: true,
                      htmlContent: pushpinFrameHTML.replace('{content}',html)
                  });
                      Microsoft.Maps.Events.addHandler(map, 'viewchangestart', function () {setTimeout('var mapctrl2 = map.entities.get(map.entities.getLength()-1); infobox.setOptions({visible:false})', 20)});
                      Microsoft.Maps.Events.addHandler(infobox, 'click', function () {setTimeout('var mapctrl3 = map.entities.get(map.entities.getLength()-1); infobox.setOptions({visible:false})', 20)});
              }
            var newWidth = jQuery(".infobox_title").width();
                infobox.setOptions({
                    offset: new Microsoft.Maps.Point(-(newWidth+62), 48),

                });
          }

        <body onload="GetMap();">
             <div id='myMap' style="position:relative;width:100%;height:100%; float:center;padding:0px;margin:0px;">
             </div>
        </body>
</html>
<style>