Resize Googel Map

JulieBiju — Sun, 20 Sep 2015 16:53:09 GMT

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>

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

on iOS devices-->

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

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>

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>

</script>

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.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>

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

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

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

<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 />

</div>

Al Tareeq(EN)</button>

Al Tareeq(AR)

</button>

Google Street

</button>

Google Statellite

</button>

Google Hybrid

</button>

Google Terrain

</button>

Bing Aerial

</button>

Bing Aerial with labels

</button>

Roads

</button>

</div> </td>

</tr>

</table>

</div>

</form>

</body>

</html>

topic Resize Googel Map in ArcGIS JavaScript Maps SDK Questions

Resize Googel Map