Link to home
Start Free TrialLog in
Avatar of B O
B O

asked on

How do I use the Google maps api for my contact page and display a map with a custom pointer, I unfortunately have issues with applying it in my project

I keep having issues trying to use Google maps Api,
( https://developers.google.com/maps/documentation/javascript/overview?hl=nl#Inline )
I tried installing with npm but I got a error saying : "cannot use import statement outside a module"

import { Loader } from "@googlemaps/js-api-loader";

const loader = new Loader({
    apiKey: "YOUR_API_KEY",
    version: "weekly",
    ...additionalOptions,
  });

  loader.load().then(() => {
    map = new google.maps.Map(document.getElementById("map"), {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    });
  });

I tried finding solution but couldnt find one that works for my project,

Then i tried a manual install and also got a error: "google_maps.js:15 Uncaught ReferenceError: google is not defined"

// Create the script tag, set the appropriate attributes
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap';
script.async = true;

// Attach your callback function to the `window` object
window.initMap = function() {
  // JS API is loaded and available
};

// Append the 'script' element to 'head'
document.head.appendChild(script);

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8
});


I even tried inline loading and got a error like the first one:
"google_maps.js:15 Uncaught ReferenceError: google is not defined"
footer.php
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFBxRSFCvV7DFSwp2LWkXCkvA5DDXW848&callback=initMap">
</script>


js/javascript
map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8
});

---------------------------------------- overal HTML---------------------------------------------------
                                          <div id="map"></div>
     ==============================================================
using npm
User generated image
using manual 
Avatar of Scott Fell
Scott Fell
Flag of United States of America image
it looks like you are trying to run the example. code from https://developers.google.com/maps/documentation/javascript/overview?hl=nl#all and they point to a fiddle here https://jsfiddle.net/api/post/library/pure/

The full code is
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <style type="text/css">
      /* 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: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script>
      let map;

      function initMap() {
        map = new google.maps.Map(document.getElementById("map"), {
          center: { lat: -34.397, lng: 150.644 },
          zoom: 8,
        });
      }
    </script>
  </head>
  <body>
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
      async
    ></script>
  </body>
</html>

Open in new window

If I run this and replace "YOUR_API_KEY" with the one you have in your code above, it works but shows for development purpose only.

User generated image
The Console reads,
"You must enable Billing on the Google Cloud Project at https://console.cloud.google.com/project/_/billing/enable Learn more at https://developers.google.com/maps/gmp-get-started"

Make sure you go to the console, https://console.cloud.google.com/home and update your API key to only work on your domain or local IP. 
Avatar of leakim971
leakim971
Flag of Guadeloupe image
as you can see from @Scott post, you need to put :
map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8
});

Open in new window

inside the following block :
window.initMap = function() {
  // JS API is loaded and available
};

Open in new window

so like that :
window.initMap = function() {
  // JS API is loaded and available
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
};

Open in new window

here an example with markers : https://www.experts-exchange.com/questions/26841371/Google-Maps-V3-multiple-custom-markers.html#a34960336
<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        /* 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: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFBxRSFCvV7DFSwp2LWkXCkvA5DDXW848&callback=initMap"></script>
<script>
    // Attach your callback function to the `window` object
    window.initMap = function() {
        var myOptions = {
            zoom: 10,
            center: new google.maps.LatLng(-33.9, 151.2),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById('map'), myOptions);
        setMarkers(map, beaches);
    };

    var beaches = [
        ['Bondi Beach', -33.890542, 151.274856, 4,"picType1"],
        ['Coogee Beach', -33.923036, 151.259052, 5, "picType2"],
        ['Cronulla Beach', -34.028249, 151.157507, 3, "picType1"],
        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2, "picType1"],
        ['Maroubra Beach', -33.950198, 151.259302, 1, "picType2"]
    ];

    function setMarkers(map, locations) {
        var customIcons = {
            "picType1": {
                icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
                shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            "picType2": {
                icon: 'http://labs.google.com/ridefinder/images/mm_20_orange.png',
                shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            "picType3": {
                icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
                shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            }
        };
        // Add markers to the map

        // Marker sizes are expressed as a Size of X,Y
        // where the origin of the image (0,0) is located
        // in the top left of the image.

        // Origins, anchor positions and coordinates of the marker
        // increase in the X direction to the right and in
        // the Y direction down.
        var image = new google.maps.MarkerImage('images/beachflag.png',
            // This marker is 20 pixels wide by 32 pixels tall.
            new google.maps.Size(20, 32),
            // The origin for this image is 0,0.
            new google.maps.Point(0,0),
            // The anchor for this image is the base of the flagpole at 0,32.
            new google.maps.Point(0, 32));
        var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
            // The shadow image is larger in the horizontal dimension
            // while the position and offset are the same as for the main image.
            new google.maps.Size(37, 32),
            new google.maps.Point(0,0),
            new google.maps.Point(0, 32));
        // Shapes define the clickable region of the icon.
        // The type defines an HTML &lt;area&gt; element 'poly' which
        // traces out a polygon as a series of X,Y points. The final
        // coordinate closes the poly by connecting to the first
        // coordinate.
        var shape = {
            coord: [1, 1, 1, 20, 18, 20, 18 , 1],
            type: 'poly'
        };debugger;
        for (var i = 0; i < beaches.length; i++) {
            var beach = beaches[i];
            var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                shadow: shadow,
                icon: beach[4],
                shape: shape,
                title: beach[0],
                zIndex: beach[3]
            });
        }
    }

    /* Create the script tag, set the appropriate attributes
    var script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyAFBxRSFCvV7DFSwp2LWkXCkvA5DDXW848&callback=initMap';
    script.async = true;
    document.head.appendChild(script);
     */
</script>
</body>
</html>

Open in new window


Avatar of leakim971
leakim971
Flag of Guadeloupe image
right click on the page, choose view source, copy/paste content here
Avatar of B O
B O

ASKER

I have a error saying initmap is not a function

User generated image

Avatar of leakim971
leakim971
Flag of Guadeloupe image
it's initMap not initmap
Avatar of B O
B O

ASKER

<script 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFBxRSFCvV7DFSwp2LWkXCkvA5DDXW848&callback=initMap&libraries=&v=weekly"
    async defer >
</script>

Open in new window


javascript

let map;


function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

Open in new window


.php file where it loads
<div class="container">
    <div class="row justify-content-center">
        <section class="col-sm-10" style="display: inline-flex; flex-direction: row; flex-wrap: wrap; justify-content:center">
                
            <div id="map" style="height: 100%;"></div>
            
        </section>
    </div>
</div>

Open in new window




Avatar of leakim971
leakim971
Flag of Guadeloupe image
also waiting your full page source
Avatar of B O
B O

ASKER

haha yeah I a lil mistake initMap

<?php
    require "header.php";   
    include "functions.php";
?>
<?php
                             // BackGround Image




    $sql = ("SELECT * FROM contact WHERE idContact = 1 LIMIT 1");
    $stmt = mysqli_stmt_init($conn);
            if (!mysqli_stmt_prepare($stmt, $sql)) {
                echo "SQL statement gefaald!";
            } else {
                mysqli_stmt_execute($stmt);
                $result = mysqli_stmt_get_result($stmt);


                while ($pageItem = mysqli_fetch_assoc($result)) {           
                    echo '<div  style="background-image: url(img/contact/' . $pageItem['imgContact'] . ');" type="image/jpg" class="imgPosition2"></div>';
                    
                }
} ?>


<main class="container">


<?php 
                                // Page Content


            $sql = ("SELECT * FROM contact WHERE idContact = 1 LIMIT 1");
            $stmt = mysqli_stmt_init($conn);
                    if (!mysqli_stmt_prepare($stmt, $sql)) {
                        echo "SQL statement gefaald!";
                    } else {
                        mysqli_stmt_execute($stmt);
                        $result = mysqli_stmt_get_result($stmt);


                        while ($pageItem = mysqli_fetch_assoc($result)) {
                            echo '<section class="col-sm-8 my-3" style="display: flex; flex-direction: column; margin: 0 auto;
                            padding: 10px;
                            position: relative;">
                                    <div class="pb-5 my-5 " 
                                    style=" height: 5rem; max-width: 80rem; text-align: center; justify-content: center;">
                                            <h5 class="card-title ">' . $pageItem['titleContact'] . '</h5>
                                            <div class="font-weight-normal" style="diplay: flexl max-width: 22rem;" 
                                            >
                                            ' . nl2br($pageItem['descContact']) . '</div>
                                            <br>
                                    </div>                                      
                                </section>';
                        }
        }
?>
</main>
<div style="background-image: linear-gradient(
180deg
,#f3f3f3,#fff);">
    <main class="container">
        <div class="row justify-content-center">
            <section class="col-sm-8 my-5" style="display: inline-flex; flex-direction: row; flex-wrap: wrap; justify-content: center;">
                
                    <form action="">
                    <p>Neem contact op via onderstaand formulier</p>


                    <div style="postition: relative; display: block; margin-top:-30px;">
                        <label for="full_name" style="position: relative; display: block; top:32px; left: 10px; padding: 5px; background-color: #F5F5F5; width:82px;">Full Name</label>
                        <input type="text" id="full_name" name="full_name" placeholder="First- and last name" style="border-radius: 10px; background-color: #F5F5F5;">                    
                    </div>


                    <div style="postition: relative; display: block; margin-top:-30px;">
                        <label for="email_adress" style="position: relative;display: block; top:32px; left: 10px; padding: 5px; background-color: #F5F5F5; width:104px;">E-mail adress</label>
                        <input type="text" id="email_adress" name="email_adress" placeholder="Example. john@mail.com" style="border-radius: 10px; background-color: #F5F5F5;">
                    </div>
                    
                    <div style="postition: relative; display: block; margin-top:-30px;">
                        <label for="phone_number" style="position: relative;display: block; top:32px; left: 10px; padding: 5px;  background-color: #F5F5F5; width:115px;">Phone number</label>
                        <input type="text" id="phone_number" name="phone_number" placeholder="Example. 0612345678" style="border-radius: 10px; background-color: #F5F5F5;">
                    </div>
                    
                    <div style="postition: relative; display: block; margin-top:-30px;">
                        <label for="user_question" style="position: relative;display: block;top:32px; left: 10px; padding: 5px; background-color: #F5F5F5; width:108px;">Your question</label>
                        <textarea name="user_question" id="user_question"  cols="32" rows="8" placeholder="Share your question or comment" style="border-radius: 10px; background-color: #F5F5F5;"></textarea>  
                    </div>


                    <div>
                        <input type="checkbox" name="privacy_policy">
                        <label for="privacy_policy">I agree with the <a href="#">privacy policy</a></label>
                    </div>
                    <br>
                    <button name="upload_quesition" style="border-radius: 30px; padding: 10px 15px;">Submit</button>
                    
                    </form>
            
        </section>
</div>      `
</main>
</div>
<main class="container">
<div class="container">
    <div class="row justify-content-center">
        <section class="col-sm-10" style="display: inline-flex; flex-direction: row; flex-wrap: wrap; justify-content:center">
                
            <div id="map" style="height: 100%;"></div>
            
        </section>
    </div>
</div>
</main>




<?php
    require 'footer.php';
?>
<!-- textarea code -->
<script>
$('textarea').autoResize();
</script>

Open in new window



Avatar of leakim971
leakim971
Flag of Guadeloupe image
you're posting your php code, I want the HTML code produced present in your browser
right click on the page, choose view source, copy/paste content here
Avatar of B O
B O

ASKER

Thank you for correcting me, here it is

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   <link rel="stylesheet" href="css/style.css" type="text/css">
   <title>Home Page</title>
</head>








<body>








   <!-- <header> -->
      <header class="navbar navbar-light navbar-expand-sm fixed-navbar bg-transparent" style="display: inline-flex;">   
         
         <nav class="row front-nav" style="width:100%;">   
         <div class="sidebar-brand-text mx-2">
            <a class="navbar-brand fixImg" href="index.php">
            
               <!--      Upload logo Image      -->
               <img src="img/gallery/Logo.5f1fec26e25021.47960543.png"class="fixImg" alt="logo" style="width:40px;">            </a>               
         </div>
         
         <!--   Upload menu links   -->
         <section style="margin-left: auto; margin-right:0px; width:calc(100%/1.12);justify-content: flex-end;">
            <ul class="nav">
               <div class="collapse navbar-collapse" id="navbarToggleExternalContent">   
                  <li class="nav-item"><a class="nav-link changeColor" href="category-page.php?pageId=3">Behandelingen</a></li><li class="nav-item"><a class="nav-link changeColor" href="category-page.php?pageId=2">Tarieven</a></li><li class="nav-item"><a class="nav-link changeColor" href="category-page.php?pageId="></a></li>         <hr>
         <section class="nav-link ml-auto">
         <!--   If user logged in show 'logout' button if not show log in and register button   -->
         <a style="color: grey; line-height: 2rem;" id="btn">Log in</a>         </section>
         <a class="nav-link" style="color: grey;" href="signup.php">Registreer</a>               </div>
            </ul>
         </section>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" style="position:fixed; right:10px; top:10px;" id="btn-collapse">
        <span class="navbar-toggler-icon"></span>
      </button>         
   </nav>
</header>
<div id="modal-wrapper" class="modal modal-respons" style="z-index:7;">
   <form class="modal-content animate" action="includes/login.incl.php" method="post" style="z-index:10;">
      <input type="text" name="emailUid" placeholder="Username/ Email..">
      <input type="password" name="pwd" placeholder="Password..">
      <div class="row mx-4"><button class="response-btn" type="submit" name="login-submit">Inloggen</button> <a class="mt-3 list-inline-item:not" style="margin-left:50%;color:red;" href="index.php">sluit</a></div>
   </form>
</div><div  style="background-image: url(img/contact/wachtkamer.jpg);" type="image/jpg" class="imgPosition2"></div>
<main class="container">








<section class="col-sm-8 my-3" style="display: flex; flex-direction: column; margin: 0 auto;
                     padding: 10px;
                     position: relative;">
                           <div class="pb-5 my-5 "
                           style=" height: 5rem; max-width: 80rem; text-align: center; justify-content: center;">
                                 <h5 class="card-title ">Contact</h5>
                                 <div class="font-weight-normal" style="diplay: flexl max-width: 22rem;"
                                 >
                                 Neem vrijblijvend contact met ons op via de mail, telefoon of kom langs in de kliniek. We helpen je graag verder!</div>
                                 <br>
                           </div>                              
                        </section></main>
<div style="background-image: linear-gradient(
180deg
,#f3f3f3,#fff);">
    <main class="container">
        <div class="row justify-content-center">
            <section class="col-sm-8 my-5" style="display: inline-flex; flex-direction: row; flex-wrap: wrap; justify-content: center;">
            
               <form action="">
                    <p>Neem contact op via onderstaand formulier</p>








                    <div style="postition: relative; display: block; margin-top:-30px;">
                        <label for="full_name" style="position: relative; display: block; top:32px; left: 10px; padding: 5px; background-color: #F5F5F5; width:82px;">Full Name</label>
                        <input type="text" id="full_name" name="full_name" placeholder="First- and last name" style="border-radius: 10px; background-color: #F5F5F5;">                    
                    </div>








                    <div style="postition: relative; display: block; margin-top:-30px;">
                        <label for="email_adress" style="position: relative;display: block; top:32px; left: 10px; padding: 5px; background-color: #F5F5F5; width:104px;">E-mail adress</label>
                        <input type="text" id="email_adress" name="email_adress" placeholder="Example. john@mail.com" style="border-radius: 10px; background-color: #F5F5F5;">
                    </div>
                   
                    <div style="postition: relative; display: block; margin-top:-30px;">
                        <label for="phone_number" style="position: relative;display: block; top:32px; left: 10px; padding: 5px;  background-color: #F5F5F5; width:115px;">Phone number</label>
                        <input type="text" id="phone_number" name="phone_number" placeholder="Example. 0612345678" style="border-radius: 10px; background-color: #F5F5F5;">
                    </div>
                   
                    <div style="postition: relative; display: block; margin-top:-30px;">
                        <label for="user_question" style="position: relative;display: block;top:32px; left: 10px; padding: 5px; background-color: #F5F5F5; width:108px;">Your question</label>
                        <textarea name="user_question" id="user_question"  cols="32" rows="8" placeholder="Share your question or comment" style="border-radius: 10px; background-color: #F5F5F5;"></textarea>  
                    </div>








                    <div>
                        <input type="checkbox" name="privacy_policy">
                        <label for="privacy_policy">I agree with the <a href="#">privacy policy</a></label>
                    </div>
                    <br>
                    <button name="upload_quesition" style="border-radius: 30px; padding: 10px 15px;">Submit</button>
                   
                    </form>
         
      </section>
</div>      `
</main>
</div>
<main class="container">
<div class="container">
   <div class="row justify-content-center">
      <section class="col-sm-10" style="display: inline-flex; flex-direction: row; flex-wrap: wrap; justify-content:center">
            
         <div id="map" style="height: 100%;"></div>
         
      </section>
   </div>
</div>
</main>
















<script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFBxRSFCvV7DFSwp2LWkXCkvA5DDXW848&callback=initMap&libraries=&v=weekly"
    async defer >
</script>
<!-- <script src="js/google_maps.js"></script> -->
<script src="https://use.fontawesome.com/releases/v5.15.2/js/all.js" data-auto-replace-svg="nest"></script>
<script src="https://ajax.googleapis.com/ajax/libs/d3js/6.5.0/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="js/preview-image.js"></script>
<script src="js/compare-images.js"></script>
<script src="js/compare_thumbnails.js"></script>
<script src="js/compare.js"></script>
<script src="js/youtube_api.js"></script>
<script src="js/header.js"></script>
<script src="js/category.js"></script>
<script src="js/textKeyPressConversion.js"></script>
<script src="js/louisLazeris.js"></script>
























<footer>
</footer>
   










</body>
</html><!-- textarea code -->
<script>
$('textarea').autoResize();
</script>

Open in new window

Avatar of leakim971
leakim971
Flag of Guadeloupe image
I can't locate the javascript code

Avatar of B O
B O

ASKER

Here is the javascript code 

// // Create the script tag, set the appropriate attributes
// var script = document.createElement('script');
// script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap';
// script.async = true;




// // Attach your callback function to the `window` object
// window.initMap = function() {
//   // JS API is loaded and available
// };




// // Append the 'script' element to 'head'
// document.head.appendChild(script);




let map;




function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

Open in new window

Avatar of leakim971
leakim971
Flag of Guadeloupe image
I said I can't locate it, I know what is the code BUT I don't see it in your page
Avatar of B O
B O

ASKER

Hahah excuse me man,
I load i thru <script src="js/google_maps.js"></script>

<script 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFBxRSFCvV7DFSwp2LWkXCkvA5DDXW848&callback=initMap&libraries=&v=weekly"
    async defer >
</script>
<script src="js/google_maps.js"></script>
<script src="https://use.fontawesome.com/releases/v5.15.2/js/all.js" data-auto-replace-svg="nest"></script>
<script src="https://ajax.googleapis.com/ajax/libs/d3js/6.5.0/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="js/preview-image.js"></script>
<script src="js/compare-images.js"></script>
<script src="js/compare_thumbnails.js"></script>
<script src="js/compare.js"></script>
<script src="js/youtube_api.js"></script>
<script src="js/header.js"></script>
<script src="js/category.js"></script>
<script src="js/textKeyPressConversion.js"></script>
<script src="js/louisLazeris.js"></script>






<footer>
    
</footer>


</body>
</html>

Open in new window



Avatar of leakim971
leakim971
Flag of Guadeloupe image
ok so what is the current "error" ?
Avatar of B O
B O

ASKER

The current error is:

[DOM] Input elements should have autocomplete attributes (suggested: "current-password"): (More info: https://goo.gl/9p2vKq) <input type=​"password" name=​"pwd" placeholder=​"Password..">​


Avatar of leakim971
leakim971
Flag of Guadeloupe image
this is not related... what do you have on the screen ? what is missing?
Avatar of B O
B O

ASKER

That is the whole thing that bugs me out because it not clear why I dont see anything

User generated image
Avatar of leakim971
leakim971
Flag of Guadeloupe image
be sure to add the following CSS :
    <style type="text/css">
        /* 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: 100%;
            margin: 0;
            padding: 0;
        }
    </style>

Open in new window

Avatar of B O
B O

ASKER

I tried it but unfortunately



<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   <link rel="stylesheet" href="css/style.css" type="text/css">
   <title>Home Page</title>
   <style type="text/css">
        /* 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: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>


<body>


   <!-- <header> -->
      <header class="navbar navbar-light navbar-expand-sm fixed-navbar bg-transparent" style="display: inline-flex;">   
         
         <nav class="row front-nav" style="width:100%;">   
         <div class="sidebar-brand-text mx-2">
            <a class="navbar-brand fixImg" href="index.php">
            
               <!--      Upload logo Image      -->
               <img src="img/gallery/Logo.5f1fec26e25021.47960543.png"class="fixImg" alt="logo" style="width:40px;">            </a>               
         </div>
         
         <!--   Upload menu links   -->
         <section style="margin-left: auto; margin-right:0px; width:calc(100%/1.12);justify-content: flex-end;">
            <ul class="nav">
               <div class="collapse navbar-collapse" id="navbarToggleExternalContent">   
                  <li class="nav-item"><a class="nav-link changeColor" href="category-page.php?pageId=3">Behandelingen</a></li><li class="nav-item"><a class="nav-link changeColor" href="category-page.php?pageId=2">Tarieven</a></li><li class="nav-item"><a class="nav-link changeColor" href="category-page.php?pageId="></a></li>         <hr>
         <section class="nav-link ml-auto">
         <!--   If user logged in show 'logout' button if not show log in and register button   -->
         <a style="color: grey; line-height: 2rem;" id="btn">Log in</a>         </section>
         <a class="nav-link" style="color: grey;" href="signup.php">Registreer</a>               </div>
            </ul>
         </section>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" style="position:fixed; right:10px; top:10px;" id="btn-collapse">
        <span class="navbar-toggler-icon"></span>
      </button>         
   </nav>
</header>
<div id="modal-wrapper" class="modal modal-respons" style="z-index:7;">
   <form class="modal-content animate" action="includes/login.incl.php" method="post" style="z-index:10;">
      <input type="text" name="emailUid" placeholder="Username/ Email..">
      <input type="password" name="pwd" placeholder="Password..">
      <div class="row mx-4"><button class="response-btn" type="submit" name="login-submit">Inloggen</button> <a class="mt-3 list-inline-item:not" style="margin-left:50%;color:red;" href="index.php">sluit</a></div>
   </form>
</div><div  style="background-image: url(img/contact/wachtkamer.jpg);" type="image/jpg" class="imgPosition2"></div>
<main class="container">


<section class="col-sm-8 my-3" style="display: flex; flex-direction: column; margin: 0 auto;
                     padding: 10px;
                     position: relative;">
                           <div class="pb-5 my-5 "
                           style=" height: 5rem; max-width: 80rem; text-align: center; justify-content: center;">
                                 <h5 class="card-title ">Contact</h5>
                                 <div class="font-weight-normal" style="diplay: flexl max-width: 22rem;"
                                 >
                                 Neem vrijblijvend contact met ons op via de mail, telefoon of kom langs in de kliniek. We helpen je graag verder!</div>
                                 <br>
                           </div>                              
                        </section></main>
<div style="background-image: linear-gradient(
180deg
,#f3f3f3,#fff);">
    <main class="container">
        <div class="row justify-content-center">
            <section class="col-sm-8 my-5" style="display: inline-flex; flex-direction: row; flex-wrap: wrap; justify-content: center;">
            
               <form action="includes/send_mail.incl.php" method="post" enctype="multipart/form-data">
                    <p>Neem contact op via onderstaand formulier</p>


                    <div style="postition: relative; display: block; margin-top:-30px;">
                        <label for="full_name" style="position: relative; display: block; top:32px; left: 10px; padding: 5px; background-color: #F5F5F5; width:82px;">Full Name</label>
                        <input type="text" id="full_name" name="full_name" placeholder="First- and last name" style="border-radius: 10px; background-color: #F5F5F5;">                    
                    </div>


                    <div style="postition: relative; display: block; margin-top:-30px;">
                        <label for="email_adress" style="position: relative;display: block; top:32px; left: 10px; padding: 5px; background-color: #F5F5F5; width:104px;">E-mail adress</label>
                        <input type="text" id="email_adress" name="email_adress" placeholder="Example. john@mail.com" style="border-radius: 10px; background-color: #F5F5F5;">
                    </div>
                   
                    <div style="postition: relative; display: block; margin-top:-30px;">
                        <label for="phone_number" style="position: relative;display: block; top:32px; left: 10px; padding: 5px;  background-color: #F5F5F5; width:115px;">Phone number</label>
                        <input type="text" id="phone_number" name="phone_number" placeholder="Example. 0612345678" style="border-radius: 10px; background-color: #F5F5F5;">
                    </div>
                   
                    <div style="postition: relative; display: block; margin-top:-30px;">
                        <label for="user_question" style="position: relative;display: block;top:32px; left: 10px; padding: 5px; background-color: #F5F5F5; width:108px;">Your question</label>
                        <textarea name="user_question" id="user_question"  cols="32" rows="8" placeholder="Share your question or comment" style="border-radius: 10px; background-color: #F5F5F5;"></textarea>  
                    </div>


                    <div>
                        <input type="checkbox" name="privacy_policy">
                        <label for="privacy_policy">I agree with the <a href="#">privacy policy</a></label>
                    </div>
                    <br>
                    <button name="submit_question" style="border-radius: 30px; padding: 10px 15px;">Submit</button>
                   
                    </form>
         
      </section>
</div>      `
</main>
</div>
<main class="container">
<div class="container">
   <div class="row justify-content-center">
      <section class="col-sm-10" style="display: inline-flex; flex-direction: row; flex-wrap: wrap; justify-content:center">
            
         <div id="map" style="height: 100%;"></div>
         
      </section>
   </div>
</div>
</main>




<script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFBxRSFCvV7DFSwp2LWkXCkvA5DDXW848&callback=initMap&libraries=&v=weekly"
    async defer >
</script>
<script src="js/google_maps.js"></script>
<script src="https://use.fontawesome.com/releases/v5.15.2/js/all.js" data-auto-replace-svg="nest"></script>
<script src="https://ajax.googleapis.com/ajax/libs/d3js/6.5.0/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="js/preview-image.js"></script>
<script src="js/compare-images.js"></script>
<script src="js/compare_thumbnails.js"></script>
<script src="js/compare.js"></script>
<script src="js/youtube_api.js"></script>
<script src="js/header.js"></script>
<script src="js/category.js"></script>
<script src="js/textKeyPressConversion.js"></script>
<script src="js/louisLazeris.js"></script>






<footer>
   
</footer>


</body>
</html><!-- textarea code -->
<script>
$('textarea').autoResize();
</script>

Open in new window

Avatar of leakim971
leakim971
Flag of Guadeloupe image
add this random CSS too :
div.container {
    height: 900px;
}
.col-sm-10 {
    height:900px;
}

Open in new window


Avatar of B O
B O

ASKER

 I see a blank space under my form now

User generated image
Avatar of leakim971
leakim971
Flag of Guadeloupe image
put the google_maps.js script before the google plugin just like this :

<script src="js/google_maps.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFBxRSFCvV7DFSwp2LWkXCkvA5DDXW848&callback=initMap&libraries=&v=weekly" async defer ></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

Open in new window


Avatar of B O
B O

ASKER

hm I tried it but still nothing on the screen

<script src="js/google_maps.js"></script>
<script 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFBxRSFCvV7DFSwp2LWkXCkvA5DDXW848&callback=initMap&libraries=&v=weekly"
    async defer >
</script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

Open in new window


<script src="js/google_maps.js"></script>
<script 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFBxRSFCvV7DFSwp2LWkXCkvA5DDXW848&callback=initMap&libraries=&v=weekly"
    async defer >
</script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

User generated image
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial