search

projectinclude-dexterrivera / HTMLBootcamp2017

Here you will find all of the resources and code you need to complete our HTML Bootcamp!
0 stars 2 forks source link

Map not working... #6

Open Acew0t opened 7 years ago

Acew0t commented 7 years ago

I put 

<div id="map"></div>

but i don't know where to put it

this is my index.html

<head>
  <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
  <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
  <script src="script.js"></script>
  <script async defer
          src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwhwzuYqcXRjqamI5AdLCsl9x77TkLVpE&callback=initMap"></script>
</head>

<div class="ui top inverted blue fixed menu">
  <div class="item">
    <img src="https://yt3.ggpht.com/-wmInpYssKqg/AAAAAAAAAAI/AAAAAAAAAAA/bkyuXcCH-kc/s240-c-k-no-mo-rj-c0xffffff/photo.jpg">
  </div>
  <a class="item" href="#introduction">Introduction</a>
  <a class="item" href="#biography">Biography</a>
  <a class="item" href="#alphabet">The Alphabet</a>
  <a class="item" href="#youtubers">Favorite YouTubers</a>
  <a class="item" href="#subject">Favorite Subjects</a>
  <a class="item" href="#number">Numbers (1-100)</a>
  <a class="item" href="#photos">Photos</a>
  <a class="item" href="#movies">Movie Reviews</a>
  <a class="item" href="#place">Check-Ins</a>
  <a class="item" href="#friend">Friends</a>
  <a class="item" href="#comments">Comments</a>
</div>

<body> 
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
  <div class="banner"></div>
  <div class="website">
<link href="style.css" rel="stylesheet">

<!-- This is a h1 tag. h1 tags are used to make a header really big. -->
<h1>THUGREX's Website</h1>

<div class="ui grid">
  <div class="four wide column">
  <div class="ui fluid card">
    <div class="image">
      <img src="https://yt3.ggpht.com/-wmInpYssKqg/AAAAAAAAAAI/AAAAAAAAAAA/bkyuXcCH-kc/s240-c-k-no-mo-rj-c0xffffff/photo.jpg">
    </div>
    <div class="content">
      <a class="header">THUGREX</a>
      <div class="meta">
        <span class="date">Joined in 2016</span>
      </div>
      <div class="description">
        THUGREX is an amazing youtuber with almost 5K subscribers.
      </div>
      <div class="description">
        <div class="ui list">
          <div class="item"><i class="Canada flag"></i>Born in Canada</div>
          <div class="item"><i class="Birthday icon"></i>Birthday on October 25, 2004</div>
          <div class="item"><i class="Home icon"></i>Lives in Toronto, Ontario</div>
          <div class="item"><i class="Calendar icon"></i>12 years old</div>
          <div class="item"><i class="Book icon"></i>Attends Upper Canada College</div>
        </div>
    </div>
    <div class="extra content">
        <i class=" user icon"></i>
        5,010 Subscribers
      </div>
      <div class="extra content">
        <i class="blue thumbs up icon"></i>
        47,395 Likes
      </div>
      <div class="extra content">
        <i class="red like icon"></i>
        32,395 Loves
      </div>
  </div>
    </div>

    <div class="ui fluid buttons">

      <button class="ui blue button"><i class="lightblue thumbs up icon"></i>Like</button>
      <button class="ui red button"><i class="lightred like icon"></i>Love</button>
    </div>

    <div class="ui raised segments">
      <div class="ui blue inverted segment">
        <h2 id='photos'>Photos</h2>
      </div>

      <div class="ui segment"> 
        <div class="ui small images">
          <img class="ui image" src="https://i.ytimg.com/vi/s5y-4EpmfRQ/maxresdefault.jpg">
          <img class="ui image" src="https://dudeperfect.com/wp-content/themes/DudePerfect/assets/images/backgrounds/dude-perfect-team.jpg">
          <img class="ui image" src="http://images.huffingtonpost.com/2016-05-09-1462819580-1765342-thumbnail_videogamecontrollers640.jpg">
          <img class="ui image" src="http://s3.amazonaws.com/vnn-aws-sites/6261/files/2017/04/94cb7b87c444a1ed-Tennis2.jpg">
        </div>
      </div>  
    </div>
  </div>

  <div class="nine wide column">
<iframe width="406" height="230"
        src="https://www.youtube.com/embed/Fo6-273pzgo">
</iframe>

  <div class="ui raised segments">
  <div class="ui blue inverted segment">
  <!-- This is a h2 tag. h2 tags are used to make subheadders, a little bit smaller than h1. -->
  <h2 id='introduction'>Introduction</h2>
  </div>

  <div class="ui segment">
  <!-- p tags are used to write paragraphs -->
  <p>Hello Internet! Welcome to my website!! :)
    Please Subscribe To My Youtube Channel By  <a href= "http://www.youtube.com/thugasaurusrex" title="Please Subscribe!">Clicking Here</a>!</p>
    </div>
  </div>  

  <div class="ui raised segments">
    <div class="ui blue inverted segment">
      <h2 id='biography'><i class="book icon"></i>Biography</h2>
  <!-- stong tag is used to make text bold and em tag for italics. -->
    </div>

  <div class="ui segment">    
  <p>Hello! My name is <strong>Thuginthan Thurai</strong>. I was born in <strong>Toronto, Ontario, Canada</strong> on <strong>October 25, 2004</strong>. Currently, I am <strong>12</strong> years old. I go to <strong>Upper Canada College</strong>. I live in <strong>Toronto</strong>, Ontario</p>
    </div>
  </div>    

  <div class="ui raised segments">
  <div class="ui blue inverted segment">
  <ul></ul> <!-- for unordered lists -->
  <ol></ol> <!-- for ordered lists -->

  <h2 id='alphabet'>The Alphabet</h2>
</div>

  <div class="ui segment sport">
  <p>These are the 26 letters of the alphabet:</p>

  <ul>

    <li>Aa (apple)</li> <!-- each of the bullets points must be in in li tags -->
    <li>Bb (ball)</li>
    <li>Cc (cat)</li>
    <li>Dd (dog)</li>
    <li>Ee (egg)</li>
    <li>Ff (fish)</li>
    <li>Gg (girl)</li>
    <li>Hh (hat)</li>
    <li>Ii (igloo)</li>
    <li>Jj (jam)</li>
    <li>Kk (kettle)</li>
    <li>Ll (lion)</li>
    <li>Mm (moon)</li>
    <li>Nn (nut)</li>
    <li>Oo (orange)</li>
    <li>Pp (pan)</li>
    <li>Qq (queen)</li>
    <li>Rr (rocket)</li>
    <li>Ss (snake)</li>
    <li>Tt (tree)</li>
    <li>Uu (unicorn)</li>
    <li>Vv (vase)</li>
    <li>Ww (witch)</li>
    <li>Xx (xylophone)</li>
    <li>Yy (yarn)</li>
    <li>Zz (zebra)</li>

    </ul>
  </div>
</div>

  <div class="ui raised segments">
  <div class="ui blue inverted segment">
    <h2 id='youtubers'><i class="play icon"></i>My Top 5 Most Favourite YouTubers</h2>
</div>

  <div class="ui segment">
  <p>Here is a list of my favourite YouTubers: </p>

  <ol>

    <li id="jacksfilms">Jacksfilms</li>
    <li>Smosh</li>
    <li>Logan Paul Vlogs</li>
    <li>Dude Perfect</li>
    <li>PewDiePie</li>

    </ol>
  </div> 
</div>    

  <div class="ui raised segments">
  <div class="ui blue inverted segment">
    <h2 id='subject'><i class="calculator icon"></i>My Top 5 Most Favourite Subjects</h2>
</div>

  <div class="ui segment"> 
  <p>Here is a list of my favourite Subjects: </p>

  <ol>

    <li id="math">Math</li>
    <li>Science</li>
    <li>English</li>
    <li>French</li>
    <li>History</li>

    </ol>
  </div>  
</div>    

  <div class="ui raised segments">
  <div class="ui blue inverted segment">
    <h2 id='number'>1 to 100</h2>
</div>

<div class="ui segment numz">
  <p>These are the numbers from 1 to 100:</p>

<ul>

  <li>1 (one)</li>
  <li>2 (two)</li>
  <li>3 (three)</li>
  <li>4 (four)</li>
  <li>5 (five)</li>
  <li>6 (six)</li>
  <li>7 (seven)</li>
  <li>8 (eight)</li>
  <li>9 (nine)</li>
  <li>10 (ten)</li>
  <li>11 (eleven)</li>
  <li>12 (twelve)</li>
  <li>13 (thirteen)</li>
  <li>14 (fourteen)</li>
  <li>15 (fifteen)</li>
  <li>16 (sixteen)</li>
  <li>17 (seventeen)</li>
  <li>18 (eighteen)</li>
  <li>19 (nineteen)</li>
  <li>20 (twenty)</li>
  <li>21 (twenty-one)</li>
  <li>22 (twenty-two)</li>
  <li>23 (twenty-three)</li>
  <li>24 (twenty-four)</li>
  <li>25 (twenty-five)</li>
  <li>26 (twenty-six)</li>
  <li>27 (twenty-seven)</li>
  <li>28 (twenty-eight)</li>
  <li>29 (twenty-nine)</li>
  <li>30 (thirty)</li>
  <li>31 (thirty-one)</li>
  <li>32 (thirty-two)</li>
  <li>33 (thirty-three)</li>
  <li>34 (thirty-four)</li>
  <li>35 (thirty-five)</li>
  <li>36 (thirty-six)</li>
  <li>37 (thirty-seven)</li>
  <li>38 (thirty-eight)</li>
  <li>39 (thirty-nine)</li>
  <li>40 (fourty)</li>
  <li>41 (fourty-one)</li>
  <li>42 (fourty-two)</li>
  <li>43 (fourty-three)</li>
  <li>44 (fourty-four)</li>
  <li>45 (fourty-five)</li>
  <li>46 (fourty-six)</li>
  <li>47 (fourty-seven)</li>
  <li>48 (fourty-eight)</li>
  <li>49 (fourty-nine)</li>
  <li id="fifty">50 (fifty)</li>
  <li>51 (fifty-one)</li>
  <li>52 (fifty-two)</li>
  <li>53 (fifty-three)</li>
  <li>54 (fifty-four)</li>
  <li>55 (fifty-five)</li>
  <li>56 (fifty-six)</li>
  <li>57 (fifty-seven)</li>
  <li>58 (fifty-eight)</li>
  <li>59 (fifty-nine)</li>
  <li>60 (sixty)</li>
  <li>61 (sixty-one)</li>
  <li>62 (sixty-two)</li>
  <li>63 (sixty-three)</li>
  <li>64 (sixty-four)</li>
  <li>65 (sixty-five)</li>
  <li>66 (sixty-six)</li>
  <li>67 (sixty-seven)</li>
  <li>68 (sixty-eight)</li>
  <li>69 (sixty-nine)</li>
  <li>70 (seventy)</li>
  <li>71 (seventy-one)</li>
  <li>72 (seventy-two)</li>
  <li>73 (seventy-three)</li>
  <li>74 (seventy-four)</li>
  <li>75 (seventy-five)</li>
  <li>76 (seventy-six)</li>
  <li>77 (seventy-seven)</li>
  <li>78 (seventy-eight)</li>
  <li>79 (seventy-nine)</li>
  <li>80 (eighty)</li>
  <li>81 (eighty-one)</li>
  <li>82 (eighty-two)</li>
  <li>83 (eighty-three)</li>
  <li>84 (eighty-four)</li>
  <li>85 (eighty-five)</li>
  <li>86 (eighty-six)</li>
  <li>87 (eighty-seven)</li>
  <li>88 (eighty-eight)</li>
  <li>89 (eighty-nine)</li>
  <li>90 (ninety)</li>
  <li>91 (ninety-one)</li>
  <li>92 (ninety-two)</li>
  <li>93 (ninety-three)</li>
  <li>94 (ninety-four)</li>
  <li>95 (ninety-five)</li>
  <li>96 (ninety-six)</li>
  <li>97 (ninety-seven)</li>
  <li>98 (ninety-eight)</li>
  <li>99 (ninety-nine)</li>
  <li id="hundred">100 (one-hundred)</li>
      </ul>
    </div>
</div>  

    <div class="ui raised segments">
      <div class="ui blue inverted segment">
        <h2 id='movies'><i class="video icon"></i>Movie Reviews</h2>
      </div>

      <div class="ui segment"> 
        <div class="ui items">
          <div class="item">
            <div class="image">
              <img src="https://images-na.ssl-images-amazon.com/images/I/91Ui-tX4RRL._SY445_.jpg">
            </div>
            <div class="content">
              <a class="header">Dumb & Dumber To</a>
              <div class="meta">
                <i class=" yellow Star icon"></i>
                <i class=" yellow Star icon"></i>
                <i class=" yellow Star icon"></i>
                <i class=" yellow Star icon"></i>
                <i class=" yellow Star icon"></i>
              </div>
              <div class="description">
                <p></p>
              </div>
              <div class="extra">
                "This was an amazing movie! My most favorite movie by far! The 2 main characters, Harry & Lloyd were really stupid and funny!"
              </div>
            </div>
          </div>

          <div class="item">
            <div class="image">
              <img src="https://res-4.cloudinary.com/dostuff-media/image/upload//c_fill,g_faces,f_auto,w_800/v1436346017/event-poster-4340397.jpg">
            </div>
            <div class="content">
              <a class="header">Minions</a>
              <div class="meta">
                <i class=" yellow Star icon"></i>
                <i class=" yellow Star icon"></i>
                <i class=" yellow Star icon"></i>
                <i class=" yellow Star icon"></i>
                <i class=" half yellow Star icon"></i>
              </div>
              <div class="description">
                <p></p>
              </div>
              <div class="extra">
                "This was a great movie! The minions were so funny! The main characters were Kevin, Stewart & Bob! I recommend anyone under 13 to watch it!"
              </div>
            </div>
          </div>

          <div class="item">
            <div class="image">
              <img src="https://images-na.ssl-images-amazon.com/images/I/71RzdzWioFL.jpg">
            </div>
            <div class="content">
              <a class="header">The Boss Baby</a>
              <div class="meta">
                <i class=" yellow Star icon"></i>
                <i class=" yellow Star icon"></i>
                <i class=" yellow Star icon"></i>
                <i class=" yellow Star icon"></i>
              </div>
              <div class="description">
                <p></p>
              </div>
              <div class="extra">
                "This was a great movie! The baby is the CEO of Baby Corp and the dogs are getting cuter than the babies so they are trying to get the babies to get cuter than the dogs! It is a movie that I really enjoyed watching!"
              </div>        
            </div>
      </div>
    </div>  
    </div>
  </div>

    <div class="ui raised segments">
      <div class="ui blue inverted segment">
        <h2 id='place'><i class="marker  icon"></i>Check-Ins</h2>
      </div>

  <div class="ui segment"> 
    <div class="ui items">
      <div class="item">
        <div class="image">
          <img src="https://c8234d680a5ae618106c-6b3bd0826ac1075e2d1b52b94a2e0f63.ssl.cf1.rackcdn.com/639_39add803.jpg">
        </div>
        <div class="content">
          <a class="header">The Gardiner Museum</a>
          <div class="meta"><i class="red marker icon"></i>
            <span>111 Queens Park, Toronto, ON M5S 2C7</span>
          </div>
          <div class="description">
            <p>This museum is a must see! There are loads of exhibits from different religions and cultures! I enjoyed visiting the museum a lot!!! </p>
          </div>
        </div>
      </div>

      <div class="item">
        <div class="image">
          <img src="https://media-cdn.tripadvisor.com/media/photo-s/05/bc/35/68/bata-shoe-museum.jpg">
        </div>
        <div class="content">
          <a class="header">The Bata Shoe Museum</a>
          <div class="meta"><i class="red marker icon"></i>
            <span>327 Bloor St W, Toronto, ON M5S 1W7</span>
          </div>
          <div class="description">
            <p>This place is filled with shoes, literally! With hundreds of shoes the 4,500-year history of footwear is brilliant! I would recomment anyone to go here!!!</p>
          </div>
        </div>
      </div>
    </div>
    </div>
    </div>

    <div class="ui raised segments">
      <div class="ui blue inverted segment">
        <h2 id='comments'><i class="comments  icon"></i>Comments</h2>
      </div>
      <div class="ui segment"> 
        <div class="fb-comments" data-href="https://thugrex.ml" data-width="100%" data-numposts="5"></div>
      </div>
    </div>
  </div>
  <div class="ui three wide column">
    <div class="ui raised segments">
      <div class="ui blue inverted segment">
        <h2 id='friend'><i class="user  icon"></i>Friends</h2>
      </div>
      <div class="ui segment"> 
      <div class="column">
        <div class="ui fluid card">
          <div class="image">
            <img src="https://yt3.ggpht.com/-jSd4K94lD0w/AAAAAAAAAAI/AAAAAAAAAAA/NgfghqqcGUw/s900-c-k-no-mo-rj-c0xffffff/photo.jpg">
          </div>
          <div class="content">
            <a class="header" href= "http://www.thuvarakan.ml">Thuvarakan Thurai</a>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="ui fluid card">
          <div class="image">
            <img src="https://maxcdn.icons8.com/Share/icon/Logos//google_logo1600.png">
          </div>
          <div class="content">
            <a class="header" href= "http://www.google.ca">Google</a>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="ui fluid card">
          <div class="image">
            <img src="https://www.productionattic.com/blog/wp-content/uploads/2014/06/youtubelogo1-1024x1024.jpg">
          </div>
          <div class="content">
            <a class="header" href= "http://www.youtube.com">YouTube</a>
          </div>
        </div>
      </div>
    </div>
    </div>
  </div>
    </div>
  </div>
</body>

and this is my script.js

//initialize Google Maps
function initMap() {
  var location = {lat:  43.668350, lng: -79.393062};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: location
  });
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
}
projectinclude-dexterrivera commented 7 years ago

@thugrex you can put the map wherever you want to on your page, it's up to you

Acew0t commented 7 years ago

yes, but where in the code? I want it under the description...

On Fri, Aug 18, 2017 at 3:16 PM, Project Include U of T < notifications@github.com> wrote:

@THUGREX https://github.com/thugrex you can put the map wherever you want to on your page, it's up to you

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/projectinclude-dexterrivera/HTMLBootcamp2017/issues/6#issuecomment-323438712, or mute the thread https://github.com/notifications/unsubscribe-auth/AcnVmWXpryhW3_kYm7ihT93-XeaH_8eEks5sZeMegaJpZM4O1wDm .

projectinclude-dexterrivera commented 7 years ago

Then put the tag for the map right underneath the tag for the description

Acew0t commented 7 years ago

but it isn't working... i tried again