Googleマップにテキストを配置する

-2

私はGoogle Maps（API）の上にテキストを配置しようとしています。現在、テキストは別のセクションのマップの上に配置されています。私はポジションを試みました：絶対、しかしそれはマップの後ろに置きます。Googleマップにテキストを配置する

これは、今どのように見えるかです：https://jsfiddle.net/uy2jza2k/1/ は、私はそれが次のようになりたい：https://gyazo.com/dbacba06c463c4ec09504a0f62d44a36

HTML

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>onepageskiw</title> 
<link href="styles.css" rel="stylesheet" type="text/css"> 
<script src="js.js"></script> 
</head> 
<body> 

<div id="billede"> 
<div> 
    <nav> 
     <ul id="menu"> 
      <li><a href="#">Top</a></li> 
      <li><a href="#">Om Eventet</a></li> 
      <li><a href="#">Lokation</a></li> 
      <li><a href="#">Kontakt</a></li> 
     </ul> 
    </nav> 
</div> 

<div id="logodiv"> 
<img src="design/logotop.png"> 
</div> 

<div id="overskrift"> 
    <h1>EVENTET STARTER OM</h1> 
</div> 

<div id="countdowner"> 
<table id="table"> 
<tr> 
<div id="countdown"> 
<td id="id1"></td> 
<td id="id2"></td> 
<td id="id3"></td> 
<td id="id4"></td> 
</div> 
<tr> 
<tr> 
<td class="timeLabel">DAGE</td> 
<td class="timeLabel">TIMER</td> 
<td class="timeLabel">MIN</td> 
<td class="timeLabel">SEK</td> 
</tr> 
</tr> 
</tr> 
</table> 
</div> 
</div> 

<h2>Hvad skal der ske?</h2> 
<hr></hr> 
<div id="infoydre"> 
    <div id="information"> 
     <p>Lorem ipsum dolor sit amet, duis facilisis eu, condimentum et mollis risus viverra adipiscing tristique. A ultricies, augue nibh scelerisque turpis consequat. Sapien id dui nulla quam viverra erat, sit sed, purus pulvinar amet justo. Dui nam at justo, ultricies id facilisis est non. Et vitae eget mi, pede sit duis orci eros corrupti. Tellus sem id 
<br><br> 
eget nam vel pede. Sed purus pharetra in sollicitudin suspendisse pellentesque, nec risus arcu nonummy, curabitur hymenaeos eu. Rutrum aliquet, et sit ut integer praesent sit cras, aliquet molestie pellentesque neque quam luctus odio</p> 
     <p>Lorem ipsum dolor sit amet, duis facilisis eu, condimentum et mollis risus viverra adipiscing tristique. A ultricies, augue nibh scelerisque turpis consequat. 
<br><br> 
Sapien id dui nulla quam viverra erat, sit sed, purus pulvinar amet justo. Dui nam at justo, ultricies id facilisis est non. Et vitae eget mi, pede sit duis orci eros corrupti. Tellus sem id. eget nam vel pede. Sed purus pharetra in sollicitudin suspendisse pellentesque, nec risus arcu nonummy, curabitur hymenaeos eu. Rutrum aliquet, et sit ut integer praesent sit cras, aliquet molestie pellentesque neque quam luctus odio</p> 
    </div> 
</div> 

<div id="sikkerydre"> 
    <div id="sikkerindre"> 
     <h2>Sikkerhed</h2> 
     <hr></hr> 
     <p>arrangementet vil være under fuldt opsyn af de lækreste 
babes skive har at tilbyde med.<br> pharetra in sollicitudin suspendisse pellentesque, nec risus </p> 
    </div> 
</div> 

<div class="section group"> 
    <div class="col span_1_of_2"> 
    <h2 id="hvid2">Test</h2> 
     <style type="text/css"> 
      /* Set a size for our map container, the Google Map will take up 100% of this container */ 
      #map { 
       width: 100%; 
       height: 100%; 
      } 
     </style> 

     <!-- 
      You need to include this script tag on any page that has a Google Map. 

      The following script tag will work when opening this example locally on your computer. 
      But if you use this on a localhost server or a live website you will need to include an API key. 
      Sign up for one here (it's free for small usage): 
       https://developers.google.com/maps/documentation/javascript/tutorial#api_key 

      After you sign up, use the following script tag with YOUR_GOOGLE_API_KEY replaced with your actual key. 
       <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY"></script> 
     --> 
     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script> 

     <script type="text/javascript"> 
      // When the window has finished loading create our google map below 
      google.maps.event.addDomListener(window, 'load', init); 

      function init() { 
       // Basic options for a simple Google Map 
       // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions 
       var mapOptions = { 
        // How zoomed in you want the map to start at (always required) 
        scrollwheel: false, 
        navigationControl: false, 
        zoomControlOptions: false, 
        zoomControl: false, 
        mapTypeControl: false, 
        zoom: 15, 

        // The latitude and longitude to center the map (always required) 
        center: new google.maps.LatLng(56.5760701, 9.0522028,591), // New York 

        // How you would like to style the map. 
        // This is where you would paste any style found on Snazzy Maps. 
        styles: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}] 
       }; 

       // Get the HTML DOM element that will contain your map 
       // We are using a div with id="map" seen below in the <body> 
       var mapElement = document.getElementById('map'); 

       // Create the Google Map using our element and options defined above 
       var map = new google.maps.Map(mapElement, mapOptions); 

       // Let's also add a marker while we're at it 
       var marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(56.5760701, 9.0522028,591), 
        map: map, 
        title: 'Surf & Grill Strandvejen' 
       }); 
      } 
     </script> 
     <!-- The element that will contain our Google Map. This is used in both the Javascript and CSS above. --> 
     <div id="map"></div> 

    </div> 
    <div class="col span_1_of_2"> 
    <img width="100%" src="design/squarebox.jpg"> 
    </div> 
</div> 

<div class="section group"> 
    <div class="col span_1_of_2"> 
    <img width="100%" src="design/squarebox2.png"> 
    </div> 
    <div class="col span_1_of_2"> 
    <h2 id="hvid">Besøg vores Facebook</h2> 
    <hr></hr> 
    <p>Hej med dig</p> 
    </div> 
</div> 


</body> 
</html> 

<script> 
    CountDownTimer('06/25/2016 10:00 AM', 'id'); 

    function CountDownTimer(dt, id) 
    { 
     var end = new Date(dt); 

     var _second = 1000; 
     var _minute = _second * 60; 
     var _hour = _minute * 60; 
     var _day = _hour * 24; 
     var timer; 

     function showRemaining() { 
      var now = new Date(); 
      var distance = end - now; 
      if (distance < 0) { 

       clearInterval(timer); 
       document.getElementById(id).innerHTML = 'EXPIRED!'; 

       return; 
      } 
      var days = Math.floor(distance/_day); 
      var hours = Math.floor((distance % _day)/_hour); 
      var minutes = Math.floor((distance % _hour)/_minute); 
      var seconds = Math.floor((distance % _minute)/_second); 

      document.getElementById(id+"1").innerHTML = days; 
      document.getElementById(id+"2").innerHTML = hours; 
      document.getElementById(id+"3").innerHTML = minutes; 
      document.getElementById(id+"4").innerHTML = seconds; 
     } 

     timer = setInterval(showRemaining, 1000); 
    } 
</script>

CSS

@charset "utf-8"; 

@import url(https://fonts.googleapis.com/css?family=Montserrat:400|Raleway:400,500,600,700,800|); 

body { 
margin:0; 
} 

#billede { 
background:url(baggrund.jpg) no-repeat; 
background-size: cover; 
height: 100vh; 
/*background-position: top center;*/ 
} 

#logodiv { 
float: left; 
text-align:center; 
width:100%; 
position: absolute; 
top: 50%; 
left: 50%; 
transform: translateX(-50%) translateY(-220%); 
} 

#logodiv>img { 
width:15em; 

} 

h1 { 
font-family:raleway; 
font-weight:100; 
width:100%; 
text-align:center; 
color:white; 
letter-spacing:11px; 
position: absolute; 
top: 50%; 
left: 50%; 
transform: translateX(-50%) translateY(-230%); 
font-size:2.5em; 
white-space: nowrap; 
} 

#countdowner { 
font-family:sans-serif; 
color:white; 
position:absolute; 
margin:0; 
padding:0; 
width:100%; 
font-size:2em; 
top: 50%; 
left: 50%; 
transform: translateX(-50%) translateY(-20%); 
} 

#id1 { 
font-size:2.5em; 
} 

#id2 { 
font-size:2.5em; 
} 

#id3 { 
font-size:2.5em; 
} 

#id4 { 
font-size:2.5em; 
} 

.timeLabel { 
font-size:0.7em; 
color:#f1a01e; 
font-family:montserrat; 
font-weight:700; 
} 

#table { 
margin:0 auto; 
text-align:center; 
} 

#table td{ 
padding:0px 45px; 
} 

#menu { 
position:absolute; 
padding:0; 
width:100%; 
bottom:0; 
text-align:center; 
float: left; 
} 

#menu>li { 
font-size:20px; 
list-style:none; 
display:inline-block; 
text-transform:uppercase; 
letter-spacing:3px; 
font-family:raleway; 
font-weight:400; 
} 

#menu>li>a { 
padding:0 15px; 
text-decoration:none; 
color:white; 
} 

#menu>li>a:hover { 
color:#f1a01e; 
} 

h2 { 
text-align: center; 
font-size: 2.2em; 
font-family:raleway; 
text-transform: uppercase; 
letter-spacing: 3px; 
font-weight: 700; 
margin: 0; 
padding-top: 70px; 
color: #171717; 
padding-bottom: 10px; 
white-space: nowrap; 
color:black; 
} 

p { 
color: #171717; 
margin: 0; 
line-height: 35px; 
font-size: 23px; 
letter-spacing: 2px; 
font-family: raleway; 
} 

hr { 
width: 160px; 
height: 5px; 
background-color: #4bc9f4; 
border: 0; 
} 

#infoydre { 
width: 100%; 
} 

#information { 
margin: auto; 
width: 80%; 
padding-top: 40px; 
padding-bottom: 90px; 
left:0; 
right: 0; 
top: 0; 
bottom: 0; 
column-count: 2; 
} 

#sikkerydre { 
background:url(sikkerhed.jpg) no-repeat; 
background-size: cover; 
width: 100%; 

} 

#sikkerindre { 
margin: auto; 
width: 80%; 
left:0; 
right: 0; 
top: 0; 
bottom: 0; 
text-align: center; 
} 
#sikkerindre>p { 
padding-top: 40px; 
padding-bottom: 90px; 
} 

/* SECTIONS */ 
.section { 
    clear: both; 
    padding: 0px; 
    margin: 0px; 
} 

/* COLUMN SETUP */ 
.col { 
    display: block; 
    float:left; 
    margin: 0% 0 0% 0%; 
    height:30vw; 
} 
.col:first-child { margin-left: 0; } 

/* GROUPING */ 
.group:before, 
.group:after { content:""; display:table; } 
.group:after { clear:both;} 
.group { zoom:1; /* For IE 6/7 */ } 
/* GRID OF TWO */ 
.span_2_of_2 { 
    width: 100%; 
} 
.span_1_of_2 { 
    width: 50%; 
    background-color:#363636; 
    overflow:hidden; 
} 

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 


#hvid { 
    color:white;  
} 

#hvid2 { 
    color:white; 
    position:relative; 
}

出典

2016-05-30 Thor Kousted

を増やしてみてください：

z-index:99;

これは地図の前に表示されるようにしてください。

出典

2016-05-30 10:06:00

ありがとうございます。 Zインデックスと位置を追加する：絶対に働きました。：o） –

お手伝いします！ –

Googleマップにテキストを配置する

答えて

関連する問題