I'm new here and hoping to get assistance in what I'm missing in my html file.
I have this google map code that works completely fine when I placed it on wix for my mock up design.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var markers = [
{
"title": 'Bancroft Medical Center',
"lat": '39.755597',
"lng": '-75.570262',
"description": '<b>Brandywine Podiatry</b><br>Bancroft Medical Center<br> 1010 North Bancroft Parkway<br> Wilmington, DE 19805<br>(302) 658-1129'
},
{
"title": 'Silverside Professional Center',
"lat": '39.8010954',
"lng": '-75.5038161',
"description": '<b>Brandywine Podiatry</b><br>2106 Silverside Road<br> Wilmington, DE 19810<br>(302) 478-8099'
},
{
"title": 'Becks Woods Plaza',
"lat": '39.616351',
"lng": '-75.699592',
"description": '<b>Brandywine Podiatry</b><br>Becks Woods Plaza<br>121 Becks Woods Drive<br> Bear, DE 19701<br> (302) 595-4077'
},
{
"title": 'Omega Professional Center',
"lat": '39.6920102',
"lng": '-75.6771784',
"description": '<b>Brandywine Podiatry</b><br>Omega Professional Center<br>B-89 Omega Drive<br> Newark, DE 19713<br>(302) 595-4077'
},
{
"title": 'Ketlay Plaza',
"lat": '39.452119',
"lng": '-75.729465',
"description": '<b>Brandywine Podiatry</b><br>Ketlay Plaza<br>114 Sandhill Drive<br> Middletown, DE 19709 <br>(302) 595-4077'
},
{
"title": 'Glasgow Professional Center',
"lat": '39.5993024',
"lng": '-75.7448504',
"description": '<b>Brandywine Podiatry</b><br>Glasgow Professional Center<br>2600 Glasgow Ave.<br> Newark, DE 19702<br> (302) 595-4077'
}
];
window.onload = function () {
LoadMap();
}
function LoadMap() {
var mapOptions = {
center: new google.maps.LatLng(39.6057218,-75.5820083),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
//Create and open InfoWindow.
var infoWindow = new google.maps.InfoWindow();
for (var i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
//Attach click event to the marker.
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
//Wrap the content inside an HTML DIV in order to set height and width of InfoWindow.
infoWindow.setContent("<div style = 'width:100%;min-height:100%'>" + data.description + "</div>");
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
<div id="dvMap" style="width:100%;min-height:100%">
</div>
Now that I'm building the site and applying it to my html file, the map disappears.
=====
Below is my HTML file.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bpo-theme.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Raleway:400,800,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
<title>BPO</title>
<!--MENU-->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="styles.css">
<!--MAPS-->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="googlemap-api.js"></script>
</head>
<body>
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>For Patients</a></li>
<li><a href='#'>Our Doctors</a></li>
<li><a href='#'>Foot & Ankle Conditions</a></li>
<li><a href='#'>Forms</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
<div style="background-image:url(images/Bancroft.jpg); background-size:cover; height:500px; text-align:center; color:#ffffff;">
<br><h1>Welcome to Delaware's Premiere Foot & Ankle Center</h1>
<div class="section group">
<div class="col span_1_of_3">
<div class="pad white"><h4>FOOT & ANKLE</h4>TYPES OF CONDITIONS
</div>
</div>
<div class="col span_1_of_3">
<div class="pad white">
<h4>FOR PATIENTS</h4>NEW & CURRENT
</div>
</div>
<div class="col span_1_of_3">
<div class="pad white">
<h4>PATIENT FAQS</h4>FOR YOUR VISIT
</div>
</div>
</div>
</div>
<div class="section group">
<div class="col2 span_1_of_2">
<div style="padding:10%;">
<h4 class="grayheadr">OFFICE LOCATION</h4><br>
<!--Bancroft-->
<h5>Bancroft Medical Center</h5>
1010 North Bancroft Parkway,<br>
Wilmington, DE 19805 <br>
<h5>(302) 658-1129</h5><br>
M: 8am-4:30pm<br>
T: 8am-6pm<br>
W: 8am-5pm<br>
T: 8am-4:30pm<br>
F: 8am-1:30pm
<hr class="solid">
<!--Silverside-->
<h5>2106 Silverside Professional Center</h5>
2106 Silverside Rd.<br>
Wilmington, DE 19810<br>
<h5>(302) 478-8099</h5><br>
Monday: 8am-4:30pm<br>
Tuesday: 8am-6pm<br>
Wednesday: 8am-4:30pm<br>
Thursday: 8am-4:30pm<br>
Friday: 8am-4pm<br>
<hr class="solid">
<!--Becks Woods-->
<h5>Becks Woods Plaza</h5>
121 Becks Woods Dr.<br>
Bear, DE 19701<br>
<h5>(302) 595-4077</h5><br>
Monday: 8am-4:30pm<br>
Tuesday: 8am-6pm<br>
Wednesday: 8am-6pm<br>
Thursday: 8am-4:30pm<br>
Friday: 8am-1:30pm<br>
<hr class="solid">
<!--Omega-->
<h5>Omega Professional Center</h5>
B-89 Omega Drive<br>
Newark, DE 19713<br>
<h5>(302) 595-4077</h5><br>
Monday: 12:30pm-5:30pm
<hr class="solid">
<!--Ketlay-->
<h5>Ketlay Plaza</h5>
114 Sandhill Drive<br>
Middletown, DE 19709<br>
<h5>(302) 595-4077</h5><br>
Thursday: 8am-5:30pm
<hr class="solid">
<!--Glasgow-->
<h5>Glasgow Professional Center</h5>
2600 Glasgow Ave.<br>
Newark, DE 19702<br>
<h5>(302) 595-4077</h5><br>
Wednesday: 8:00am-10:30pm
<!--locations end-->
</div>
</div>
<div class="col2 span_1_of_2">
<div class="pad">
<div id="dvMap" style="width:100%;min-height:100%"></div>
<br>
<h4 class="grayheadr">ABOUT US</h4><br><br>
At Brandywine Podiatry, we understand that successful treatment takes into consideration the elements of comfort, aesthetics and functionality -we strive to provide solutions that address each of these elements to achieve the optimal health of each of our patients.<br><br>
Please call one of our office near you to schedule your initial, new patient consultation today and let Brandywine Podiatry help get you back on your feet again. more »<br><br>
</div>
</div>
</body>
</html>
It is probably the Height issue. To show a google map on your page, your map div MUST have a effective height. If you set height as 100%, then its direct parent should have a fixed height (e.g.800px), but if the direct parent height is also set as 100%, then the parent's direct parent should have a fixed height (e.g. 500px) and so on and so forth.
Remember, the 100% height is relative to its parent, the parent itself or one of it's super must have a fixed height. If all the parents to the <html> are specified 100% then it shall occupy the entire window, thus it automatically has a fixed height.
Related
i'm making several web pages for PlayStation 3 system, it only supports html, some css and javascript
I don't know any of those coding but i managed to get a html done
This is a page i made
<html>
<head>
<title>PlayStation® Radio</title>
</head>
<script>
javascript:window.resizeTo(screen.width,screen.height)
</script>
<body onload="changeScreenSize()">
<style>
body { background-image:url("http://raw.githubusercontent.com/LuanTeles/PS3-4K-Pro/main/Web_Pages/media/radio.png");
background-size: 100% auto;
background-attachment: scroll;
margin-top: 3%;
margin-left: 8%;
margin-right: 8%;
marginbottom: 8%;}
body {background-color:#000000;}
body {color:white;}
}
</style>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<script type="text/javascript" src="http://github.com/LuanTeles/PS3-4K-Pro/raw/main/Web_Pages/script/flash_objects.js"></script>
<div id="player_936" align="center">
<script type="text/javascript">
var flashvars_936 = {};
var params_936 = {
quality: "low",
wmode: "transparent",
bgcolor: "#ffffff",
allowScriptAccess: "always",
allowFullScreen: "true",
flashvars: "fichier=http://github.com/LuanTeles/ScreenSavers/releases/download/Winamp/Winamp_Visualization.mp4&auto_play=true&apercu=http://raw.githubusercontent.com/LuanTeles/PS3-4K-Pro/main/Web_Pages/media/visualizer_preview.png"
};
var attributes_936 = {};
flashObject("http://github.com/LuanTeles/PS3-4K-Pro/raw/main/Web_Pages/swf/video_player/video_player_28.swf", "player_936", "1080", "660", "8", false, flashvars_936, params_936, attributes_936);
</script>
</div>
<div id="player_9428" align="center">
<script type="text/javascript">
var flashvars_9428 = {};
var params_9428 = {
quality: "low",
wmode: "transparent",
bgcolor: "#ffffff",
allowScriptAccess: "always",
allowFullScreen: "true",
flashvars: "url=http://relay.181.fm:8128&autostart=yes"
};
var attributes_9428 = {};
flashObject("http://github.com/LuanTeles/PS3-4K-Pro/raw/main/Web_Pages/swf/music_player/music_player_6.swf", "player_9428", "1080", "35", "8", false, flashvars_9428, params_9428, attributes_9428);
</script>
</div>
</body>
</html>
It looks great on 1080p resolution
1080p
But in 720 as example it looks terrible
720p
How can i make it fit different resolutions?
I’m having a problem with the implementation of google maps within my phonegap build. I have this problem in the browser on my pc and on the Phone itself. When I have the code in isolation it works and shows a map but when I have it within the rest of the code nothing seem te happen. Please help me with this.
<!doctype html>
<html>
<head>
<title>Huisartspraktijk app</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- /jquery links en scripts. NIET VERWIJDEREN!! -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-ui.js"></script>
<style>
/* css styes for the maps */
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!-- Script for the geolocation, Stack Overflow -->
<script>
$(document).ready(function () {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//onDeviceReaddy
initMap(); //Google map
navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
}
// user Current Position
function displayAndWatch(position) {
setCurrentPosition(position);
watchCurrentPosition();
}
function setCurrentPosition(pos) {
var image = 'img/ic_CurrentLocationmap.png';
currentPositionMarker = new google.maps.Marker({
icon: image,
map: map,
position: new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
),
title: "Current Location"
});
map.panTo(new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
));
}
function watchCurrentPosition() {
var positionTimer = navigator.geolocation.watchPosition(
function (position) {
setMarkerPosition(
currentPositionMarker,
position
);
});
}
function setMarkerPosition(marker, position) {
marker.setPosition(
new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude)
);
var center = {
lat: position.coords.latitude,
lng: position.coords.longitude
}
map.setCenter(center);
}
function locError(error) {
// the current position could not be located
}
});
</script>
</head>
<body>
<!-- The mobile page in html5, within this page there is a DIV containing the Java Script to summon google maps -->
<div data-role="page" id="mobiel">
<!-- /header -->
<div data-role="header">
<h1>SPOED</h1>
<div data-role="navbar">
<ul>
<li>Mainpage</li>
<li>Chat met de arts</li>
<li>Consultaanvraag</li>
<li>Doorverwijzing</li>
<li>Bloedonderzoek</li>
<li>Berichten</li>
<li>EPD</li>
<li>Mijn medicijnen</li>
</ul>
</div>
</div>
<!-- /content -->
<div role="main" class="ui-content" align="center">
<h2> "Ga naar deze medische post. Men is op de hoogte van uw komst" </h2>
<div style="background-color: lightyellow">
<br>
<h3> Huisartsenpraktijk Gideonse en Boekhout </h3>
<p>Meteorenstraat 4<br>
2024 RK, Haarlem</p>
<p>Telefoon<br>
023 - 525 36 00 </p>
<p>Keuze 1: Spoed <br>
Keuze 2: Herhaalrecepten <br>
Keuze 3: Assistentie</p>
<br>
<!-- In this DIV you will find a small Java Script for summoning Google maps. But some how it won't work, Google maps won't show within this DIV. -->
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBRewVX3nHmzN6KDiT5g5ruUCINH4wERaQ&callback=initMap"
async defer></script>
</div>
Terug
</div>
<!-- /footer -->
<div data-role="footer">
<h2>© 2019 Huisartsapp</h2>
</div>
</div><!-- /page -->
</body>
</html>
Check Your API Key.
It's Getting ExpiredKeyMapError
https://developers.google.com/maps/documentation/javascript/error-messages#expired-key-map-error
Go to -> https://console.cloud.google.com
Select your Project.
And Create New API Key and Try It.
After Add new API key and check your Style
Check Overflow style.
Your Code Works fine Only API Key Is the Problem.
I have a list of paper-card and I want to know how to use the fancybox library to preview the card content of my paper-card.
Here is an example of paper-card:
<paper-card heading="Emmental"
image="http://placehold.it/350x150/FFC107/000000" alt="Emmental">
<div class="card-content">
Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one
of the cheeses of Switzerland and is sometimes known as Swiss
cheese.
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
You can use fancybox with Polymer by passing the <paper-card> reference (via this.shadowRoot.querySelector() to jQuery:
firstUpdated() { // LitElement callback: element has rendered
const card = this.shadowRoot.querySelector('.card');
$(card).fancybox();
}
<html>
<head>
<meta charset="utf-8">
<!-- Polyfills only needed for Firefox and Edge. -->
<script src="https://unpkg.com/#webcomponents/webcomponentsjs#latest/webcomponents-loader.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.js"></script>
</head>
<body>
<!-- Works only on browsers that support Javascript modules like
Chrome, Safari, Firefox 60, Edge 17 -->
<script type="module">
import {LitElement, html} from 'https://unpkg.com/#polymer/lit-element/lit-element.js?module';
import 'https://unpkg.com/#polymer/paper-card/paper-card.js?module';
import 'https://unpkg.com/#polymer/paper-button/paper-button.js?module';
class MyElement extends LitElement {
render() {
return html`
<style>
.card {
width: 300px;
}
</style>
<paper-card class="card"
data-fancybox
data-animation-effect="false"
href="https://placehold.it/350x150/FFC107/000000"
heading="Emmental"
image="https://placehold.it/350x150/FFC107/000000" alt="Emmental">
<div class="card-content">
Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one
of the cheeses of Switzerland and is sometimes known as Swiss
cheese.
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>`;
}
firstUpdated() {
const card = this.shadowRoot.querySelector('.card');
$(card).fancybox();
}
}
customElements.define('my-element', MyElement);
</script>
<my-element></my-element>
</body>
</html>
I have a page that will show up a popover that has contact list, one of the list is a map location (google map).
All the lists are shown when popover is called, except google map. Google map only show gray background, but when I inspected it, it shows my coordinated I've input. And when I move it to the outside of pop over it shows no problem.
I've tried to reignite/resize the map when the popover is shown using shown.bs.popover function, but it failed.
here is the plunkr http://plnkr.co/edit/VWiCzhpiOyEMmfRoxaIy?p=preview
here is my code snippet
// Code goes here
$(function() {
//show popover
$('[data-toggle="popover"]').popover({
html: true,
container: 'body',
content: function() {
var getID = $(this).attr("id");
switch (getID) {
case "contact-us":
return $('#list-popover').html();
}
}
});
});
$(document).ready(function() {
$("[data-toggle='popover']").on('shown.bs.popover', function() {
reignitMap();
// console.log(popo);
});
});
//variable used to try reignite map when popover is shown
var googleMap = {};
function initMap() {
// console.log("initiating map");
googleMap.myPosition = {
lat: -6.2126170,
lng: 106.8228290
};
googleMap.map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: googleMap.myPosition
});
googleMap.marker = new google.maps.Marker({
position: googleMap.myPosition,
map: googleMap.map
});
};
function reignitMap() {
// console.log("reignit map");
google.maps.event.trigger(googleMap.map, "resize");
googleMap.map.setCenter(googleMap.myPosition);
};
/* Styles go here */
#map {
width: 110%;
height: 15em;
background-color: grey;
}
.popover {
max-width: 600px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div class="formLabelRight displayTable col-xs-2 col-md-2 ">
<div class="alignMiddle">
<a href="javascript:;" id="contact-us" class="linkFont" data-toggle="popover" data-placement="bottom">
<span> Contact Us</span>
</a>
</div>
</div>
<div class="container">
<div id="list-popover" class="hide col-xs-12 col-md-12" style="width:100px;">
<div class="col-xs-12 col-md-12" style="display: block;">
<div class="row">
<p>Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah
kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun.</p>
</div>
<!--
View Branch Locator -->
<div id="map" class="col-xs-10 col-md-10"></div>
</div>
</div>
</div>
<!-- <div id="map" class="col-xs-10 col-md-10"></div> -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB4MzPKw9W1RlCgQcctcWmlktTfqQLhMC8&callback=initMap"></script>
</body>
</html>
I'm in traineeship in a company and I need to used the program of another trainee who programmed it in 2012. So I have done some update but I have a problem :
In the report of this trainee the web page was a column on the left with a "menu" for request, at the bottom a field for the result of request, and on all the remaining space a map with different information. For the moment the problem it's the map in region 'center' it's like in region 'top'.
Header :
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.1/dijit/themes/soria/soria.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojox/grid/resources/tundraGrid.css">
<script src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: false" ></script>
<script>
require(["dojo/ready", "dojo/parser", "dojo/_base/xhr", "dojo/dom", "dojo/domReady!", "dijit/layout/BorderContainer", "dijit/layout/TabContainer", "dijit/layout/ContentPane", "dojox/grid/DataGrid", "dojo/store/Memory", "dojo/data/ObjectStore", "dijit/form/Select", "dijit/form/Button", "dijit/form/RadioButton", "dijit/ColorPalette", "dijit/form/TextBox", "dijit/form/SimpleTextarea", "dijit/form/MultiSelect", "dijit/TooltipDialog", "dijit/form/DropDownButton", "dojox/gfx", "dijit/TitlePane", "dijit/form/NumberSpinner", "dojo/store/Memory", "dojo/dom-style", "dojo/query", "dojo/NodeList-dom"]);
</script>
<script src="/static/javascript/queries.js" type="text/javascript"></script>
<script src="/static/javascript/map.js" type="text/javascript"></script>
<script src="/static/javascript/utils.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?v=3&key=KEY"></script>
<link rel="stylesheet" type="text/css" href="/static/css/home.css" />
<link rel="stylesheet" type="text/css" href="/static/css/map.css" />
Body :
<body class="soria" >
<div id="mainLayout"
data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design: 'sidebar'">
<div id="mapLayout" data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'center', splitter: true"
style="height:500px;">
<div id="map"></div>
</div>
<div id="leftLayout"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'left', splitter: true, minSize: 330"
style="min-width: 330px">
<p>
{% include "Home/forms/formQueries.html" %}
</p>
<p id="messageLimitNumberLines" style="display: none">Le nombre de paramètres est limité à cinq. Vous ne pouvez pas en ajouter d'autres.</p>
</div>
<div id="datagridLayout" data-dojo-type="dijit/layout/ContentPane" style="min-height: 300px" data-dojo-props="region: 'bottom', splitter: true, minSize: 300">
<div id="datagrid" data-dojo-type="dojox/rid/DataGrid">
</div>
</div>
</div>
</body>
That is what I want
That is what I have
I don't know if you need another code so tell me.
If you want a pane on the left, use 'leading' for the value of region
<div id="leftLayout"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'leading', splitter: true, minSize: 330"
style="min-width: 330px">
Then in the canter region you would place a separate border container there the map is in center region and datagrid layout in bottom region.
Regions
Each child element must have an attribute “region” which
indicates where it should be positioned (most names are self
explanatory):
top
bottom
right
left
center
leading: used have flexible layout in
left-to-right/right-to-left environments. In ltr, it will be
equivalent to left, in rtl equivalent to right.
trailing: opposite of
‘leading’: right in ltr, left in rtl There can be multiple widgets for
each region, in which case their order (i.e. closeness to the edge of
the LayoutContainer) is controlled by their relative layoutPriority
settings.
There must always be one region marked ‘center’.
Source: https://dojotoolkit.org/reference-guide/1.10/dijit/layout/LayoutContainer.html#dijit-layout-layoutcontainer