Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Using bing map on our page and it doesn't work on ie and windows mobile

santoshm0123
Level 2
Level 2

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?

1 Accepted Solution
smacdonald2008
Correct answer by
Level 10
Level 10

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

3 Replies
shekhardhiman
Employee
Employee

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
Level 2
Level 2

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>
smacdonald2008
Correct answer by
Level 10
Level 10

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