From this answer, I've used the following code on this page:
<style type="text/css">
html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB6ElZHhJNP-A9LkwwDvVNqvCH_W3kICjk"></script>
<script type="text/javascript">
var map;
var grayStyles = [
{
featureType: "all",
stylers: [
{ saturation: -90 },
{ lightness: 50 }
]
},
];
var mapOptions = {
center: new google.maps.LatLng(-31.947414, 115.835933),
zoom: 15,
styles: grayStyles,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas"></div>
(I added our API key)
The output at bottom right of the page above contains:
<iframe frameborder="0" style="z-index: -1; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; border: none;" src="about:blank">
#document
<html>
<head></head>
<body></body>
</html>
</iframe>
There are no console errors.
Help appreciated.
I recommend you relocate your scripts to the bottom of the page and styles to the head. Then add height, width and display block to the div with Id of map_canvas.
<div id="map_canvas" style="position: relative; overflow: hidden; display: block; height: 500px; width: 100%;"></div>
Related
how do I make a pop up box when I press a button
how do I make this code work on the buttons on the image in the link I've added
https://www.w3schools.com/code/tryit.asp?filename=FD018J3LMVQB
What do you mean by "pop up box"? An alert by the browser or an element within the document?
For an alert: you would need to use JavaScript like so:
<button onclick="alert('Message goes here');"></button>
For a box element within your document: you should use JavaScript as well, like so:
function popBox(id) {
if (document.getElementById("pop" + id)) return;
var myBox = document.createElement("div");
// Style your div element as you wish, with JS, in <style></style>, in an external stylesheet
myBox.id = "pop" + id;
myBox.innerHTML = "Hey.";
document.getElementById("imgwrap").appendChild(myBox);
}
Whole file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.imagewrap {
display: inline-block;
position: relative;
z-index: 1;
}
#button1 {
position: absolute;
bottom: 0;
left: 25%;
}
#button2 {
position: absolute;
bottom: 0;
right: 0;
}
#button3 {
position: absolute;
right: 50%;
top: 50%;
}
#pop1, #pop2, #pop3 {
position: absolute;
z-index: 3;
width: 50px;
height: 50px;
}
#pop1 {
right: 10%;
top: 10%;
background-color: #FFF;
}
#pop2 {
right: 20%;
top: 20%;
background-color: #888;
}
#pop3 {
right: 30%;
left: 30%;
background-color: #000;
}
</style>
</head>
<body>
<div class="imagewrap" id="imgwrap">
<img src="https://www.google.com/logos/2012/opening_ceremony-2012-hp.jpg" />
<div id="pop">
<button id="button1" onclick="popBox(1);">אודות</button>
<button id="button2" onclick="popBox(2);">ערוץ היוטיוב</button>
<button id="button3" onclick="popBox(3);">פייסבוק</button>
</div>
</div>
<script>
function popBox(id) {
if (document.getElementById("pop" + id)) return;
var myBox = document.createElement("div");
// Style your div element as you wish, with JS, in <style></style>, in an external stylesheet
myBox.id = "pop" + id;
myBox.innerHTML = "Hey.";
document.getElementById("imgwrap").appendChild(myBox);
}
</script>
</body>
</html>
I recommed using button element instead of input in this case as it is not a form, it is a button.
EDIT:
I just saw your comment saying you wanted to use only CSS. You would need at least minimal JavaScript. The idea would be to create your div element, style it as you want, and add display: none;. Then you would have to change that to display: block; with JavaScript:
<button id="button1" onclick="document.getElementById('pop1').style.display = 'block';">etc</button>
I have made a google pie chart I am trying to get my heading in center of the pie.
I can get it there by, some css but I cant get it to be responsive, you need to reload the page for the chart to adjust, but then the heading is out?
h4.piechartheader {
position: absolute;
z-index: 100;
top: 268px;
left: 41%;
}
<div class="main-wrap" style="min-height:0px;">
<div class="piechart">
<h4 class="piechartheader">Your Business</h4>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Service', 'link', 'Hours per Day'],
['Marketing', '/ec/marketing.php', 1],
['Accounts', '/ec/bookkeeping.php', 1],
['Administration', '/ec/reception.php', 1],
['Job Execution', '',1],
['Job Management', '/ec/servicem8.php', 1]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 2]);
var options = {
title: 'Your Business',
pieSliceText: 'label',
legend: 'none',
pieHole: 0.4,
slices: [{color: '#CC9933'}, {color: 'black'}, {color: '#876D2D'}, {color: '#777'}, {color: '#0D72A8'}],
'tooltip' : {trigger: 'none'},
titlePosition: 'none',
width: '100%',
height: '100%',
};
$(window).on("throttledresize", function (event) {
initChart();
});
var chart = new google.visualization.PieChart(
document.getElementById('chart_div'));
chart.draw(view, options);
var selectHandler = function(e) {
window.location = data.getValue(chart.getSelection()[0]['row'], 1 );
}
// Add our selection handler.
google.visualization.events.addListener(chart, 'select', selectHandler);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 100%; margin:0;"></div>
</body>
<style>
body{ text-align: center;}
#chart_div{width: 100%; margin: 0 auto;}
</style>
</html>
</div><!---piechart--->
example is on http://www.vestedutility.com.au/ec/
any ideas?
I work it add added some div's and css
<body style="width:100%;">
<div id="chart_wrap">
<div class="centro_total"><div class="alinhar_middle estilo_total">
<h4 class="piechartheader">Your Business</h4>
</div>
</div>
<div id="chart_div"></div>
</div>
</body>
/***********Pie chart****************/
#chart_wrap {
border:1px solid gray;
position: relative;
padding-bottom: 100%;
height: 0;
overflow:hidden;
background:#fff;
}
div#chart_div {
position: absolute;
top: 0;
left: 0;
width:100%;
height:100%;
}
.chart_wrap {
position: relative;
padding-bottom: 100%;
}
.centro_total {
position: absolute;
left: 25%;
top: 25%;
width: 50%;
height: 50%;
vertical-align: middle;
text-align: center;
z-index: 0;
}
.alinhar_middle {
position: relative;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
/* etc */
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
h4.piechartheader {
font-size: 1em;
}
<!----Finish Pie chart--->
I have an embedded map using iframe and want to change to using an api. I've used the code from the google website to test, added the api key, but the map doesn't show on my webpage. Any ideas what I'm doing wrong? http://www.lithicsireland.ie/Archaeology_Projects_Irish_Lithic_Landscapes_Chert_Provenancing.html
The code I've used is:
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: { lat: -34.397, lng: 150.644},
zoom: 8
};
var map = new google.maps.Map(document.getElementById('mapbox'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<div class="mapcontainer"><div class="mapbox"></div>
</div>
And in css I have:
.mapcontainer {
float: left;
width: 100%;
margin: 0em 5%;
padding: 1em;
}
.mapbox {
float: left;
width: 90%;
margin: 0em 5%;
padding: 1em;
}
There is no div with id="mapbox' on your page (it has a class of "mapbox").
It works if you use getElementsByClassName('mapbox')[0] to get the reference to the map (and give it a reasonable height).
function initialize() {
var mapOptions = {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
};
var map = new google.maps.Map(document.getElementsByClassName('mapbox')[0],
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
working fiddle
code snippet:
function initialize() {
var mapOptions = {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
};
var map = new google.maps.Map(document.getElementsByClassName('mapbox')[0],
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
.mapcontainer {
width: 500px;
height: 500px;
margin: 0em 5%;
padding: 1em;
}
.mapbox {
width: 400px;
height: 400px;
margin: 0em 5%;
padding: 1em;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="d2 box">
<ul>
<li>Lithics Ireland Consultancy</li>
<li> Killian Driscoll
</li>
<li>lithicsireland#gmail.com</li>
<li>Galway, Ireland</li>
</ul>
</div>
<div class="d2 box">
<div class="mapcontainer">
<div class="mapbox"></div>
</div>
</div>
If you want to use id="mapbox" that works also:
working jsfiddle
code snippet:
function initialize() {
var mapOptions = {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
};
var map = new google.maps.Map(document.getElementById('mapbox'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
.mapcontainer {
width: 500px;
height: 500px;
margin: 0em 5%;
padding: 1em;
}
#mapbox {
width: 400px;
height: 400px;
margin: 0em 5%;
padding: 1em;
}
html,
body {
width: 100%;
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="d2 box">
<ul>
<li>Lithics Ireland Consultancy</li>
<li> Killian Driscoll
</li>
<li>lithicsireland#gmail.com</li>
<li>Galway, Ireland</li>
</ul>
</div>
<div class="d2 box">
<div class="mapcontainer">
<div id="mapbox"></div>
</div>
</div>
I have a problem with my InfoBox on Google maps. I have stiled it like I wanted but the close button disapired :/... Does someone know how to solve this problem?
My code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
function initialize() {
var loc, map, marker, infobox;
loc = new google.maps.LatLng(-33.890542, 151.274856);
map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: loc,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
marker = new google.maps.Marker({
map: map,
position: loc,
visible: true
});
infobox = new InfoBox({
content: document.getElementById("infobox"),
disableAutoPan: false,
maxWidth: 220,
pixelOffset: new google.maps.Size(-120, -320),
zIndex: null,
boxStyle: {
width: "220px"
},
closeBoxMargin: "12px 12px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1)
});
google.maps.event.addListener(marker, 'click', function() {
infobox.open(map, this);
map.panTo(loc);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<title>Creating and Using an InfoBox</title>
</head>
<body>
<div id="map" style="width: 100%; height: 500px"></div>
<br>
<div class="infobox-wrapper">
<div id="infobox">
<div class='actionInfo'>
<div class='markerImage'><a target='_blank' href=" + url + "><img src="http://www.plaveo.eu/Files/Actions/132_s.jpg"></a></div>
<div class='markerActionDescription'><h3><a target='_blank' href=" + url + ">Izdelava spletne strani - PAKET BRONZE - 11%</a></h3></div>
<div class='actionTill'>Traja do: <b>10.10.2014 16h </b> <br /> <a target='_blank' href=" + url + ">Več tukaj ...</a></div>
</div>
<hr />
<div class='coName'><strong>FUTURO WEB DESIGN</strong></div>
<div class='coAddress'>Grajska cesta 26, 4260 Bled</div>
<div class='coContact'>Tel.: 040 351 766</div>
</div>
</div>
</body>
</html>
CSS
.infobox-wrapper {
display:none;
width: 220px;
}
#infobox {
position: relative;
background: #7dc9c8;
border: 5px solid #ffffff;
max-width: 200px;
font-family:Roboto;
padding: 10px;
}
#infobox:after, #infobox:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position:
absolute;
pointer-events: none;
}
#infobox:after {
border-color: rgba(125, 201, 200, 0);
border-top-color: #7dc9c8;
border-width: 20px;
margin-left: -20px;
}
#infobox:before {
border-color: rgba(255, 255, 255, 0);
border-top-color: #ffffff;
border-width: 27px;
margin-left: -27px;
}
http://jsfiddle.net/jEhJ3/3521/
The button is covered by #infobox.
Set a negative z-index for #infobox (e.g. -1)
Its in all in the title.
I'm trying to get a div on the left of the page to a static width 170px; this works fine.
What I'm having issues with is getting a div next to it, that scales to fit the remaining width.
Is there a simple approach I can use here?
On the right-hand div, just set a margin:
style="margin-left: 170px;"
Here's an example page, works here:
<html>
<head>
<title>Jquery Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var right = $("#right");
$("#toggle").click(function() {
$("#left").animate({"width": "toggle"}, {
duration: 250,
step: function() {
right.css("margin-left", $(this).width());
}
}, function() { right.css("margin-left", $("#left").width()); });
});
});
</script>
<style type="text/css">
#left { width: 170px; float: left; border: solid 1px red; }
#right { margin-left: 170px; border: solid 1px green; }
</style>
</head>
<body>
<div id="left">Test</div>
<div id="right">Test Right</div>
<input id="toggle" value="Open/Close" type="button" />
</body>
</html>
You can define your css classes like this:
#left-div {
margin-left: 0px;
width: 170px;
float: left;
}
#right-div {
margin-left: 170px;
margin-right: 0px;
}
This will keep the left margin of the right div next to the left div, and the right margin at the right edge of the window.