Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Adding CSS on HTML – Facebook api

I already did a HTML page which is pretty simple and shows a google map with some coordinates on places. However, i was trying to add a css style from w3 schools to it to make something more appealing.
When i add the style to the page, the google map from my HTML site doesnt show…
It probably is an easy solution, but can someone help me figure what is wrong with my code?
Thanks!

<!DOCTYPE html>
<html>
<title>Project</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
    <title>Movies</title>
body,h1 {font-family: "Raleway", Arial, sans-serif}
h1 {letter-spacing: 6px}
.w3-row-padding img {margin-bottom: 12px}
</style>
<body>
<!-- !PAGE CONTENT! -->
<div class="w3-content" style="max-width:1500px">
<!-- Header -->
<header class="w3-panel w3-center w3-opacity" style="padding:128px 16px">
  <h1 class="w3-xlarge">Movies</h1>
  <h1>Description</h1>
  <div class="w3-padding-32">
    <div class="w3-bar w3-border">
      <a href="#" class="w3-bar-item w3-button">Home</a>
      <a href="#" class="w3-bar-item w3-button w3-light-grey">Twitter</a>
      <a href="#" class="w3-bar-item w3-button">News</a>
      <a href="#" class="w3-bar-item w3-button w3-hide-small">Admin</a>
    </div>
  </div>
      <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 85%;
        margin: 10;
        padding: 10;
      }
    </style>
</header>
<!-- Map -->
<div class="w3-row-padding w3-grayscale" style="margin-bottom:128px">
  <div class="w3-half">
        <div id="map"></div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 6,
          center: {lat: 38.723556, lng: -9.139277}
        });
        // Create an array of alphabetical characters used to label the markers.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        // Add some markers to the map.
        // Note: The code uses the JavaScript Array.prototype.map() method to
        // create an array of markers based on a given "locations" array.
        // The map() method here has nothing to do with the Google Maps API.
        var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });
        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }
      var locations = [
        {lat: 38.754358, lng: -9.144509},
        {lat: 38.742448, lng: -9.145887},
      ]
    </script>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCfSGO2ktpqFZwhBVMM4skuMm8SHqeL_0s&callback=initMap">
    </script>
  </div>
  <div class="w3-half"> 
  </div>
</div>  
<!-- End Page Content -->
</div>
<!-- Footer -->
<footer class="w3-container w3-padding-64 w3-light-grey w3-center w3-large"> 
  <i class="fa fa-facebook-official w3-hover-opacity"></i>
  <i class="fa fa-instagram w3-hover-opacity"></i>
  <i class="fa fa-snapchat w3-hover-opacity"></i>
  <i class="fa fa-pinterest-p w3-hover-opacity"></i>
  <i class="fa fa-twitter w3-hover-opacity"></i>
  <i class="fa fa-linkedin w3-hover-opacity"></i>
  <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank" class="w3-hover-text-green">w3.css</a></p>
</footer>
</body>
</html>
Tags:

4

Answers


  1. 0

    Try loading google map api js file before your inlnie js (initMap). And, why are putting style tags inside body? You should move that to head tag, and preferably put all styles under one style tag.

    Login or Signup to reply.
  2. 0

    I recommand you to use an external CSS file, and import it in your HTML.

    <head>
    <link rel="stylesheet" type="text/css" href="yourFile.css">
</head>

    CSS file :

      /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 85%;
    margin: 10;
    padding: 10;
  }

    Follow the structure mentionned here.

    Login or Signup to reply.
  3. 0

    You must be write internal style block inside head section.

    You may visit: https://www.w3schools.com/css/css_howto.asp

    Here you learn how to write css in html.

    Login or Signup to reply.
  4. 0

    If you’re writing CSS in an actual HTML file it must be placed in the style tag and be placed at the top of the document in the head. As follows (Also, you need to remove the title tag from this).

    <body>
    <head>
        <title></title>
        <style>
            // your css
        </style>
    </head>
</body>

    Alternatively, you can just create a separate css file and link it by placing the following in the head tag

    <link rel="stylesheet" href="/assets/css/main.css" type="text/css" />

    Just another point, I would also add all of your script tags to the very bottom of your document (below your footer) as this well aid in decreasing load times.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search