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

Forum|Forum|10 years ago
October 16, 2015
3 replies
2216 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by smacdonald2008

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.

WhoaShekhar

New Participant

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!

S

santoshm0123Author

New Participant

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>

smacdonald2008Accepted solution

New Participant

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.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded