AnsweredAssumed Answered

Bing Map showing blank

Question asked by meenu.monu on Sep 19, 2015
Latest reply on Sep 21, 2015 by meenu.monu

Hi All,

 

Urgent ...Pls help me.

Bing map is not loading in my application .It is showing blank screen.

 

Rest all maps working fine.Pls Help.Bing map key I used is correct

java script used below

 

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Map.aspx.vb" Inherits="Default2" %>

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head runat="server">

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <meta http-equiv="X-UA-Compatible" content="IE=7" />

        <!--The viewport meta tag is used to improve the presentation and behavior of the samples

        on iOS devices-->

        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>

        <title>Google Maps Layer in ArcGIS JS API</title>

        <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css"/>

       

    <style type="text/css">

        html, body, #mapDiv{

        padding: 0;

        margin: 0;

        height: 100%;

            z-index: -1;

        }

        .auto-style3 {

            height: 20px;

        }

        .auto-style6 {

            height: 2%;

            width: 279px;

        }

        .auto-style7 {

            width: 279px;

        }

        #TxtAltareeqEng {

            width: 55px;

        }

        #TxtAltareeqEng0 {

            width: 55px;

        }

    </style>

     <script type="text/javascript">

         var djConfig = {

             parseOnLoad: true,

             baseUrl: './',

             modulePaths: {

                 // if use local copy, make sure the path reference is relative to 'baseUrl', e.g.:

                 //'agsjs': '../build/agsjs'

                 // use absolute path for online version. Note sometimes googlecode.com can be slow.

                 'agsjs': 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/1.05/build/agsjs'

             }

         };

        </script>

        <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4">

        </script>

         <script type="text/javascript" src="Scripts/gmapslayer_compiled.js">

        </script>

        <script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>

      

 

        <script type="text/javascript">

 

            window.onerror = function (msg, url, linenumber) {

                alert('Error message: ' + msg + '\nURL: ' + url + '\nLine Number: ' + linenumber);

                return true;

            }

 

            dojo.require("esri.map");

            dojo.require("dijit.form.Button");

            dojo.require("dijit.layout.BorderContainer");

            dojo.require("dijit.layout.ContentPane");

            //dojo.require("agsjs.layers.GoogleMapsLayer");

            dojo.require("esri.layers.graphics");

            dojo.require("esri.virtualearth.VETiledLayer");

         

 

            var map;

            var streetMap, esriTopo, gMap, BingLayer;

            var graphicsLayer;

            var Map1, Map2;

            var lastposdate  = "";

            var DoorOpenClose = 'NO';

 

            function init() {

                var initExtent = new esri.geometry.Extent({

                    "xmin": -14628212,

                    "ymin": 714227,

                    "xmax": 7718305,

                    "ymax": 9832858,

                    "spatialReference": {

                        "wkid": 102100

                    }

                });

                //alert('init');

                map = new esri.Map("mapDiv", {

                    extent: initExtent,

                    logo: true

                });

 

              

              

                Map1 = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer";

                Map2 = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer";

                streetMap = new esri.layers.ArcGISDynamicMapServiceLayer(Map1, {

                    id: "streetMap"

                });

                map.addLayer(streetMap);

                esriTopo = initLayer(Map2, "esriTopo");

 

                BingLayer = new esri.virtualearth.VETiledLayer({

                    bingMapsKey: "A......",

                    id: 'BingLayer',

                    mapStyle: esri.virtualearth.VETiledLayer.MAP_STYLE_AERIAL

                });

                map.addLayer(BingLayer);

 

              

                gMap = new gmaps.GoogleMapsLayer({

                    visible: false,

                    id: 'googlemaps'

                });

                map.addLayer(gMap);

 

             

 

                graphicsLayer = new esri.layers.GraphicsLayer();

                map.addLayer(graphicsLayer);

 

            

 

 

                var resizeTimer;

                dojo.connect(map, 'onLoad', function (theMap) {

                    dojo.connect(dijit.byId('map'), 'resize', function ()

                    { //resize the map if the div is resized

                        clearTimeout(resizeTimer);

                        resizeTimer = setTimeout(function () {

                            map.resize();

                            map.reposition();

                        }, 500);

                    });

                });

            }

 

 

 

 

            function initLayer(url, id) {           

                var layer = new esri.layers.ArcGISDynamicMapServiceLayer(url, {

                    id: id,

                    visible: false

                });

              

                map.addLayer(layer);

              return layer;        

 

           

            }

      

            function changeMap(layers) {

                hideImageTiledLayers(layers);

                for (var i = 0; i < layers.length; i++) {

                    layers[i].show();

                    alert(layers[i].id);

                }

            }

 

            function hideImageTiledLayers(layers) {

                  for (var j = 0, jl = map.layerIds.length; j < jl; j++) {

                    var layer = map.getLayer(map.layerIds[j]);

                    if (dojo.indexOf(layers, layer) == -1) {

                        layer.hide();

                      

                     }

                }

            }

       

           

                dojo.addOnLoad(init)

 

        </script>

 

 

</head>  

<body class="claro"  >

<form id="form1" runat="server">

    <div style="width: 100%; height: 100%">

          

                <table id="Tablecontrols0"   style="font-size: 15px; z-index: 101;

            background-color: #5B748B; width: 100%; height: 100%;">

            <tr style="font-family: Times New Roman">

                <td style="border-style: none; background-color: #496277; "

                    valign="top" class="auto-style6" >

             

                     </td>

              

                <td align="left"   style="border-style: none; background-color: #496277; height: 2%;"

                    valign="top" class="auto-style3" >

             

                     </td>

              

            </tr>

            <tr style="font-family: Times New Roman">

                <td style="border-style: none;"

                    valign="top" bgcolor="#496277"   >

             

                     </td>

              

                <td style="border-style: none; background-color: white; height: 500px;"

                    valign="top" id="td11" >

 

              

            <div id="mapDiv" runat ="server"  dojotype="dijit.layout.ContentPane" region="center"

                style="border:1px solid #000; visibility: visible; height: 100%; ">

                <br />

                <br />

            </div>

            <div id="buttons" style="position:absolute; right:75px; top:83px; z-Index:999;">

                <button dojoType="dijit.form.Button"   onClick="changeMap([streetMap]);">

                    Al Tareeq(EN)</button>

                <button dojoType="dijit.form.Button" onClick="changeMap([esriTopo]);">

                    Al Tareeq(AR)

                </button>

                <button dojoType="dijit.form.Button" onClick="changeMap([gMap]);gMap.setMapTypeId('roadmap')">

                    Google Street

                </button>

                <button dojoType="dijit.form.Button" onClick="changeMap([gMap]);gMap.setMapTypeId('satellite')">

                    Google Statellite

                </button>

                <button dojoType="dijit.form.Button" onClick="changeMap([gMap]);gMap.setMapTypeId('hybrid')">

                    Google Hybrid

                </button>

                <button dojoType="dijit.form.Button" onClick="changeMap([gMap]);gMap.setMapTypeId('terrain')">

                    Google Terrain

                </button>

 

 

                <button dojoType="dijit.form.Button" onClick="changeMap([BingLayer]);BingLayer.setMapStyle('esri.virtualearth.VETiledLayer.MAP_STYLE_AERIAL');">

                    Bing Aerial

                </button>

                 <button dojoType="dijit.form.Button" onClick="changeMap([BingLayer]);BingLayer.setMapStyle('esri.virtualearth.VETiledLayer.MAP_STYLE_AERIAL');">

                    Bing Aerial with labels

                </button>

                  <button dojoType="dijit.form.Button" onClick="changeMap([BingLayer]);">

                   Roads

                </button>

             

            </div>   </td>

              

            </tr>

            </table>

     

     </div>

        </form>

</body>

</html>

Outcomes