1

さて、Googleマップを背景などに利用しようとしましたが、V3アップデートのためにすべて失敗しました. 誰でも私の問題を解決できますか?

とにかく、幅が 900 ピクセルで、Web ページの中央に配置された中央の Web ページが必要です。スクロールすると、より多くのマップが表示されます。

索引.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0                                                              Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head>

    <title>test</title> 

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
    <meta property="og:description" content="test." />
    <meta property="og:image" content="http://wadehammes.com/dewey-beach/map-thumb.JPG" />



    <link href="main.css" rel="stylesheet" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css' />
    <link href='http://fonts.googleapis.com/css?family=Share:700' rel='stylesheet' type='text/css'> 

    <script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=false" type="text/javascript"></script>
    <script language="Javascript" type="text/javascript" src="map.js"></script>
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

    <style type="text/css" media="screen">
        iframe { vertical-align: top; }
    </style>
</head>



<body onload="initialize()" onunload="GUnload()">
    <!-- Using the Little Web Things jQuery Countdown -     http://www.littlewebthings.com/2010/02/jquery-countdown-script/ -->

    <div class="content">
        <h1>Test</h1>   
        <p>Welcome</p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam         molestie, purus eu euismod semper, tellus dolor placerat erat, eu egestas tortor justo eget elit. Sed dolor orci, gravida nec lacinia eu, bibendum vitae lectus. Phasellus luctus interdum malesuada. Sed in nibh a felis mattis euismod fermentum eu lectus. Donec non risus diam, in ullamcorper orci. Fusce pulvinar sapien nec turpis aliquet pellentesque. Nunc id nisl vel est ultrices sollicitudin. Cras tempor posuere condimentum. Aenean viverra, mauris a volutpat congue, sem urna placerat mi, eu ultricies sem nunc sed metus. In vel nibh enim. Suspendisse lacinia dui ac nisl placerat at pulvinar ipsum aliquet.
        <br />
        <br />
        Aenean vitae purus elit, at mattis elit. Suspendisse odio massa, tempus ac dignissim eu, pretium in lectus. Nullam sed diam ipsum, nec mollis urna. Cras vestibulum ante et tortor hendrerit eget consequat mi sollicitudin. Duis porttitor tempus mi, eget pharetra nunc facilisis at. In ipsum risus, ullamcorper in accumsan non, porttitor quis sem. Donec nibh libero, porta vel tincidunt ut, congue semper eros. Nulla facilisi. Praesent vitae urna ut diam laoreet tincidunt. Quisque vestibulum pulvinar ipsum, quis consequat metus porta sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dignissim sem nec nulla tempus imperdiet.
        <br />
        <br />
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque non nisl purus, nec adipiscing sem. Etiam commodo augue et tortor egestas tempus. Sed a felis sapien. Ut et orci vel elit rutrum consectetur sed sed elit. Etiam vel turpis velit, non luctus nisl. Donec in purus sed sem suscipit posuere. Praesent laoreet scelerisque fringilla. Etiam blandit vehicula sem, quis consequat dui auctor sodales. Phasellus varius, elit sed tincidunt egestas, leo velit ultrices diam, quis ullamcorper enim nisi sed arcu. Duis magna nulla, tempor id faucibus nec, volutpat vitae leo. Donec mattis velit in tortor laoreet ornare. Nullam facilisis tortor sit amet dui scelerisque fermentum. Nam augue sem, suscipit vitae tincidunt in, auctor aliquam tortor. Vestibulum vel est et mi porta sollicitudin.
        <br />
        <br />
        Proin lectus magna, viverra eu scelerisque non, accumsan adipiscing purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus ut nulla turpis. Etiam convallis mi et nibh faucibus ullamcorper. Nunc eu metus consequat nunc laoreet convallis. Praesent purus augue, sodales sed rutrum quis, facilisis vel sapien. Curabitur sed risus sapien. Suspendisse sagittis, nulla at semper lacinia, metus augue lacinia ipsum, ut fermentum tellus est in magna. Morbi consectetur dolor mi.
        <br />
        <br />
        Vestibulum vitae lacus non nisi viverra ultricies non in magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non quam id libero porttitor semper rhoncus quis justo. Phasellus tincidunt aliquet quam vel faucibus. Aliquam blandit sapien dapibus enim tempus viverra. Nunc eget risus id neque venenatis suscipit. Donec interdum augue fringilla nibh vulputate dignissim. Cras sollicitudin massa ullamcorper sem accumsan eu auctor dolor scelerisque. Sed iaculis dictum risus ut rutrum. Aliquam erat volutpat. Sed interdum dictum sapien at pulvinar.
        <br />
    </div>


    <!--Map Background-->
    <div id="map_canvas" style="position: absolute; top: 0; bottom: 0; left: 0;     right: 0; z-index: 100;"></div> 



</body>



</html>

Map.js:

/*Google Maps API V3  */
function initialize() {
var centerLng = new google.maps.LatLng(38.693482,-75.057564);
var myOptions = {
  zoom: 8,
  center: centerLng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

var markerLng = new google.maps.LatLng(38.693281,-75.075159);
var marker = new google.maps.Marker({
  position: markerLng, 
  map: map, 
  title:"Hello World!"
}

Main.css:

/* CSS FOR DEWEY BEACH SITE */
body:before {
      content: "";
      position: fixed;
      top: -10px;
      left: 0;
      width: 100%;
      height: 10px;

      -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
                     box-shadow: 0px 0px 10px rgba(0,0,0,.8);

      z-index: 102;
}


div#map_canvas {  
position: absolute;
position: fixed; 
height:1300px;
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
z-index: 0;
}

iframe { vertical-align: top; }

.content{

font-family: 'Helvetica Neue' Helvetica, arial, sans-serif; 
z-index: 101;
    background-color: black;
color: white;
padding: 25px;
position: absolute; left: 50%;
    width: 900px;
    height: 1200px;
    margin: auto;
margin-left: -475px; /* half the value of the width */

};
}

.little {
font-size: 11pt;
font-family: 'Helvetica Neue' Helvetica, arial, sans-serif;
text-shadow: none;
color: #2e4352;
text-shadow: 0px 1px 1px #77a0bc;
line-height: 1.4em;
}

.little a {
text-decoration: none;
color: #2e4352;
text-shadow: 0px 1px 1px #77a0bc;
}

.little a:hover {
color: #212121;
}

#wh-app {
position: absolute;
left: 0;
top: 0;
z-index: 4000;
}

#top_right{
background-color: white;
}

どれも機能しないことを確認してください:/ ずさんなコードで申し訳ありませんが、正しく表示できませんでした。

http://blog.wadehammes.com/post/3837158298を試してみましたが、まだ機能しません。

4

0 に答える 0