Community
Select to view content in your preferred language

Resize Googel Map

2868
0
09-20-2015 09:53 AM
JulieBiju
by
Deactivated User
‎09-20-2015 09:53 AM

Hi All,Thank u for ur time

The following is the javascript I am using to load google and esri map

Here I am planning to use google map with free of cost with size  width < 640 and height < 640 .In this case how can I resize only googlemap when user click on google map button?Help [plssssss

<%@ 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/MapSer...";

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

                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.show();

                    alert(layers.id);

                }

            }

            function hideImageTiledLayers(layers) {

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

                    var layer = map.getLayer(map.layerIds);

                    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>

0 Kudos
0 Replies