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)
Related
I'm trying to set my body's background color to a simple grey background but I am getting a two blocks with different greys like this:
* {
padding: 0px;
margin: 0px;
}
body {
height: 100vmax;
width: 100vmax;
background-color: rgb(23, 23, 23);
}
#menuClosed {
width: 45px;
height: auto;
}
#menuOpen {
width: 45px;
height: auto;
filter: brightness(0) invert(1);
}
#sidebarOpen {
background-color: rgb(23, 23, 23);
display: table;
text-align: center;
height: 100vh;
color: white;
padding: 0px 50px;
font-size: 34px;
font-family: sans-serif;
}
#sidebarOpen button {
padding: inherit;
padding-top: 10px;
padding-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue" defer></script>
<script src="./app.js" defer></script>
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div id="root">
<div id="sidebar">
<img v-show="sidebar.open === false" #click="sidebar.open = true" src="./assets/navi/menu.png" id="menuClosed">
<div v-show="sidebar.open === true" id="sidebarOpen">
<img #click="sidebar.open = false" src="./assets/navi/menu.png" id="menuOpen">
<p>menu</p>
</div>
</div>
</div>
</body>
</html>
this is my js file
Vue.config.devtools = true
var rootvue = new Vue({
el: "#root",
data: {
sidebar: {
open: false
}
}
})
Then when i click the menu button it goes away and turns into this
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>
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 am trying to display element on mouse hover using below codes, this works fine in all browsers except IE.
test_g1.php
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script language="JavaScript">
var HttPRequest = false;
function doCallAjax(ID) {
HttPRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
HttPRequest = new XMLHttpRequest();
if (HttPRequest.overrideMimeType) {
HttPRequest.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!HttPRequest) {
alert('Cannot create XMLHTTP instance');
return false;
}
var url = 'test_g2.php';
var pmeters = "tID="+ID;
HttPRequest.open('POST',url,true);
HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
HttPRequest.setRequestHeader("Content-length", pmeters.length);
HttPRequest.setRequestHeader("Connection", "close");
HttPRequest.send(pmeters);
HttPRequest.onreadystatechange = function() {
if(HttPRequest.readyState == 3) // Loading Request
{
document.getElementById("mySpan").innerHTML = "<div>Now is Loading...</div>";
}
if(HttPRequest.readyState == 4) // Return Request
{
document.getElementById('mySpan').innerHTML = HttPRequest.responseText;
$('#mySpan div').hide();
$('#mySpan div').each(function(index){
$(this).delay(50*index).fadeIn(500);
});
}
}
}
</script>
</head>
<body Onload="JavaScript:doCallAjax('cat');">
<h1>CAT OR FLOWER</h1>
cat<br>
flower<br>
<span id="mySpan"></span>
</body>
</html>
test_g2.php
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<style type="text/css">
<!--
.recent-items {
list-style: none;
margin: 0 auto;
width: 940px;
overflow: hidden;
padding-left: 22px;
padding-top: 360px;
padding-bottom: 11px;
margin-top: -207px;
}
.thumbnail {
float: left;
margin: 7px;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
.imgWrap {
position: relative;
}
.imgDescription1 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(29, 106, 154, 0.72);
color: #fff;
visibility: hidden;
opacity: 0;
}
.imgWrap:hover .imgDescription1 {
visibility: visible;
opacity: 1;
border: 1px solid #000;
background: #333;
padding: 0px 10px 7px;
margin-left: 94px;
width: 201px;
height: 286px;
text-align: center;
position: absolute;
margin-top: -225px;
display: none;
z-index: 999;
padding-top: 10px;
}
-->
</style>
<?PHP
$strID = $_POST["tID"];
if ($strID == "cat")
{
$show[0] = "www.catchannel.com/images/articles/cat-yellow-200px.jpg";
$show[1] = "www.fairydol.com/wp-content/uploads/2013/09/c4-200x200.jpg";
$show[2] = "www.fairydol.com/wp-content/uploads/2013/09/cat3-200x200.jpg";
}
else
{
$show[0] = "www.flowerpicturegallery.com/d/228-4/flowers-rose-pictures.jpg";
$show[1] = "www.no1reviews.com/images/category-images/flower-delivery-usa.jpg";
$show[2] = "images.all-free-download.com/images/graphicmedium/hd_flower_picture_03_hd_pictures_169251.jpg";
}
?>
<ul class="recent-items" style=" width: 940px; ">
<?PHP
for($i=0;$i<3;$i++)
{
?>
<li class="thumbnail" style=" float: left; margin: 7px; width: 80px; ">
<div class="imgWrap">
<div style=" float: left; " >
<a href="aa.php">
<img border="0" src="http://<?PHP echo $show[$i]; ?>" width="80" height="80" />
</a>
</div>
<div class="imgDescription1"><img src="http://<?PHP echo $show[$i]; ?>"/><br>description.........</div>
</div>
</li>
<?PHP
}
?>
</ul>
What could be the possible issue and what am i missing here?
if manupulation is done with visibility 'display:none' is redundant here:
imgWrap:hover .imgDescription1 {
visibility: visible;
opacity: 1;
display: none;
}