I was make Street view containers. I was see that link.
But i cannot see Street view in my browser /Google chrome/
Please teach me my mistake and my error.
Thank you
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>アスタンソーチのGoogle-APIです。</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var fenway = new google.maps.LatLng(32.785473,129.862451);
var panoramaOptions = {
position: fenway,
pov: {
heading: 165,
pitch: 0
},
zoom: 1
};
var myPano = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'),
panoramaOptions);
myPano.setVisible(true);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
I had the same problem.
The problem is in the following line at the top
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
when your website is hosted on your own server location, your map page cannot find the css file.
you need to add the following css to your file;
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas, #map_canvas {
height: 100%;
}
#media print {
html, body {
height: auto;
}
#map-canvas, #map_canvas {
height: 650px;
}
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
or you need to add it to a new file called default.css located at yourwebsitesAddress.com//\maps/documentation/javascript/examples/default.css
Related
I'm learning ag-grid to display data into a grid. I've just started with a simple example to display simple data to cell using cellRenderer. You can exam on the code here:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script>
var __basePath = '';
</script>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
span.cell1 {
position: relative;
float: left;
top: 50%;
left: 10%;
transform: translate(50%, -50%);
}
</style>
<script src="https://unpkg.com/ag-grid-community#20.2.0/dist/ag-grid-community.min.js">
</script>
</head>
<body>
<div id="myGrid" style="height: 100%;" class="ag-theme-balham"></div>
<script src="main.js">
</script>
</body>
</html>
main.js:
var columnDefs = [
{
field: 'gold',
cellRenderer: params => {
return '<span class="cell1">' + params.data.gold + '</span>';
},
editable: true,
},
];
var gridOptions = {
rowHeight: 60,
columnDefs: columnDefs,
};
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
agGrid
.simpleHttpRequest({
url:
'https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json',
})
.then(function(data) {
gridOptions.api.setRowData(data);
});
});
Please note the css I used:
span.cell1 {
position: relative;
float: left;
top: 50%;
left: 10%;
transform: translate(50%, -50%);
}
I want to display the data in the middle of the cell (css: top: 50%;) so I tried with above css. But after edited, the cell didn't show as expected. Please help!
Render at start:
Render at editting:
Render after editted:
You need to update your CSS. Give height and line-height properties for span.cell1 the same number which you provide to your rowHeight.
span.cell1 {
height: 60px;
line-height: 60px;
text-align: center;
}
Have a look at the updated plunk: https://next.plnkr.co/edit/4HHSANMjCpRkTdmm
I'm trying to add the textAngular toolbar at bottom of the texteditor-div. Right now it renders at the top.
I've been trying playin around with the css alot but with no sucess.
JS:
var app = angular.module('myApp', ['textAngular']);
app.controller('AppCtrl', function($scope, $http) {
$scope.htmlcontent = "<h2>New Note...</h2>";
$scope.save =function() {
console.log( $scope.htmlcontent );
$http.post("/Home/SaveWNote", { jsonData: $scope.htmlcontent });
}
});
HTML:
<!doctype html>
<head>
<meta charset="utf-8">
<title>Testing</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangy/1.2.3/rangy-core.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.2.0/textAngular-sanitize.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.2.0/textAngular.min.js'></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>
</head>
<body ng-app="myApp">
<div ng-controller="AppCtrl">
<div text-angular ng-model="htmlcontent "></div>
<button ng-click="save()">Save</button>
<br/>
Your htmlcontent <pre>{{htmlcontent}}</pre>
</div>
</body>
</html>
PREVIEW:
http://plnkr.co/edit/Wu1mc0v5bbuoLkvvDb9V?p=preview
You can use the attribute ta-target-toolbars on the text-angular directive to have it register with an alternate toolbar:
<div text-angular ta-target-toolbars="toolbar" ng-model="htmlcontent"></div>
<div text-angular-toolbar class="toolbar" name="toolbar"></div>
Here is an example: http://plnkr.co/edit/B2NU8RpUlSrKVFAlpOU2?p=preview
The relevant lines of code involcing ta-target-toolbars from textAngular are available here: https://github.com/fraywing/textAngular/blob/64d31658186bb9bb54c07f7c719d73a472d60b11/src/textAngular.js#L642-L656
you can play a bit with css to move toolbar under text area
please see here http://plnkr.co/edit/Wu1mc0v5bbuoLkvvDb9V?p=preview
.ta-editor {
height: 400px;
overflow: auto;
font-family: inherit;
font-size: 100%;
margin: 20px 0;
position: absolute;
top: 0;
width: 100%;
}
.editor-wrapper {
position: relative;
height: 470px;
}
.ta-toolbar {
position: absolute;
bottom: 0;
width: 100%;
}
Simple question here. I'm learning Web dev and I would like to create a border with a title and beneath it I want to put a google map view. Here is what I have in my css file "mystyle.css":
html{
height: 100%;
}
div.map{
height: 50%;
width: 50%;
}
div.title{
width: 100%;
height: 100%;
border: 5px solid blue;
margin: 0px;
text-align: center;
}
#map-canvas {
height: 50%;
width: 50%;
}
Then on my index.html this is what I have:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Google Maps Hello World</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?MY_MAP_KEY&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div class="title"><h1>Google Maps Test</h1></div>
<div id="map-canvas"/>
</body>
My problem is that all I can see is the blue border with the text "Google Maps Test" I can't see the map view. Strangely enough, if I rename div.title to body, then I can see the map. Any idea what i'm doing wrong?
Try using
#map-canvas {
height:300px;
width:300px;
}
instead of
#map-canvas {
height: 50%;
width: 50%;
}
And use <div id="map-canvas"></div>
instead of
<div id="map-canvas"/>
The bellow component is giving returning blank(but its printing the value "Hellow all") when used in a visualforce page ..but when used in a plain html in my local machine is returning the map. Please advice
<apex:component >
Hello all
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=KeyXXXX&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</apex:component>
Thanks,
Sandy
Trouble is with Salesforce's styles
Embed your component inside a VisualForce page without side bar, headers or styles (standardStylesheets="false" showHeader="false" sidebar="false"), then iframe this page inside another page with all styles, that will work.
my google maps script is gray when load the page, when I open the inspector of elements seen, I think it's for the resize, you can be? Thanks friends, I expect an answer. Here you have all the html of what would be the map, then this is included within a div. The strange thing is that when you resize the screen, is observed. I need help!!!!
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#googleMap {
width: 100%;
height: 600px;
margin-top: 6.5%;
overflow:visible;
}
img, embed, object, video {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js? key=AIzaSyCbVI4cT8PjwlmV0pZfK961MGnd6H3aGoY&signed_in=false"> </script>
<script>
var myCenter=new google.maps.LatLng(39.287649, -0.422548);
var myCenterverd=new google.maps.LatLng(39.287413, -0.422255);
var myCenterroig=new google.maps.LatLng(39.288497, -0.423953);
var myCentergroc=new google.maps.LatLng(39.287766, -0.421604);
function initialize() {
var mapOptions = {
center:new google.maps.LatLng(39.287413, -0.422255),
zoom:8,
mapTypeId:google.maps.MapTypeId.ROADMAP,
//disableDefaultUI: true
};
var map=new google.maps.Map(document.getElementById("googleMap"), mapOptions);
//var marker=new google.maps.Marker({position:myCenter,icon:'gotaico.png'});
var markerverd=new google.maps.Marker({position:myCenterverd,icon:'../dashboard/include/Mapa/iconosrellenos/gotaicoverd.png'});
var markerroig=new google.maps.Marker({position:myCenterroig,icon:'../dashboard/include/Mapa/iconosrellenos/gotaicoroig.png'});
var markergroc=new google.maps.Marker({position:myCentergroc,icon:'../dashboard/include/Mapa/iconosrellenos/gotaicogroc.png'});
//marker.setMap(map);
markerverd.setMap(map);
markerroig.setMap(map);
markergroc.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap"></div>
</body>
</html>
It seems that the following styles are causing the error:
img,
embed,
object,
video {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
Remove these and it will work: https://jsfiddle.net/cug0an68/1/
Ps, you may want to set up a new api key as you have made this one publicly available