#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2017
    Posts
    1
    Rep Power
    0

    Embed Google Map


    Hi,

    I am creating my own website for our non-profit. I use kompozer. Everything I know how to do has come from thesitewizard.com, xHTML and CSS for dummies, and W3schools.com. My domain is Centro de Recursos Familiares HOPE. I am trying to put up a map of our location and have not been able to figure it out. The exact address for the page is Centro de Recursos Familiares HOPE. If you want to see what I've currently got up.
    The iframe that google gave me is <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d1965.1776294767983!2d-84.05749673656011!3d9.90434056341472!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v14981 52111883" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>.

    I also have an API number.

    I am attaching the code I tried to this post. Even though I use kompozer, I generally write my own code in the source tab instead of using the WYSIWYG functions. I have no javascript abilities. I have tried to learn some from W3 Schools, but I haven't been able to understand it yet.

    My webpage is designed almost entirely with CSS. I need help understanding where to put the iframe, and why kompozer tries to find a local html file as the src. Any recommendations or help correcting the code would be appreciated. Thanks in advance.




    <html>
    <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>Centro de Recursos Familiares HOPE</title>
    <style type="text/css">
    body {
    margin: 0;
    padding:0;
    height: 100%;
    }
    #wrapper {
    min-height: 100%;
    position: relative;
    }

    #content {
    position: relative;
    height: 1000px;
    }

    #footer {
    position: relative;
    bottom: 0;
    width: 1000px;
    height: 75px;
    margin: 0 auto;
    }

    #page-wrap {
    margin: 0 auto;
    width: 1000px;
    }

    .boxed {
    background-color:#ffdf80;
    border: 1px solid brown;
    width: 1000px;
    left: auto;
    height: 75px;
    padding: 10px;
    margin: 0 auto;
    word-wrap: break-word;
    color: dark brown;
    column-count: 2;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-gap: 100px;
    -webkit-column-gap: 100px;
    -moz-column-gap: 100px;
    text-decoration: none;
    font-size:12px;


    }

    .frame {
    width: 1000px;
    left: auto;
    height: 1000px
    padding: 10px;
    margin: 0 auto;
    word-wrap: break-word;

    }
    ul {
    margin: 0;
    padding: 5px;
    overflow: auto;
    position: static;
    left: auto;
    list-style-type: none;
    height: 30px;
    background-color: #996600;
    width: 990px;
    right: auto;

    }
    li {
    float: left;
    margin-left: 50px;
    }

    li a, .dropdown {
    padding: 10;
    display: block;
    text-align: center;
    color: white;
    word-spacing: 5px;
    font-size: 20px;
    text-decoration: none;
    }
    li a:hover, .dropdown:hover {
    color: #cc9933;
    }

    li.dropdown {
    display: block;
    }

    .dropdown-content {
    padding: 12px 16px;
    display: none;
    position: absolute;
    background-color: #cc9933;
    min-width: 150px;
    z-index: 1;
    }

    .dropdown-content a {
    color: black;
    padding: 12px 16 px;
    text-decoration: none;
    display: block;
    text-align: left;
    word-spacing: 2px;
    }

    .dropdown-content a:hover {color: #faebd7}

    .dropdown:hover .dropdown-content {
    display: block;
    }

    </style>
    </head>
    <body>
    <div id="page-wrap">
    <div id="wrapper">
    <div id="header"><img style="width: 1000px; height: 200px;"
    alt="HOPE Banner Image" src="Images/portadaTop.jpg">
    <ul>
    <li><a href="http://www.centrohope.org">Inicio</a></li>
    <li class="dropdown">
    <div class="dropdown"><a
    href="http://www.centrohope.org/acerca.html"> Acerca del centro</a>
    <div class="dropdown-content"> <a
    href="http://www.centrohope.org/acerca.html#hope">Nuestra identidad</a><a
    href="http://www.centrohope.org/acerca.html#mision">Nuestra misión</a>
    <a href="http://www.centrohope.org/fe.html">Nuestra fe</a> <a
    href="http://www.centrohope.org/equipo.html">Nuestro
    equipo</a><a href="http://www.centrohope.org/mapa.html">Nuestra
    ubicación</a> </div>
    </div>
    </li>
    <li class="dropdown">
    <div class="dropdown"><a
    href="http://www.centrohope.org/servicios.html"> Servicios</a>
    <div class="dropdown-content"> <a
    href="http://www.centrohope.org/servicios.html#pruebas">Pruebas de
    embarazo</a> <a
    href="http://www.centrohope.org/servicios.html#ultrasonido">Ultrasonidos</a>
    <a href="http://www.centrohope.org/servicios.html#consejeria">Consejería</a>
    <a href="http://www.centrohope.org/servicios.html#charlas">Charlas</a>
    <a href="http://www.centrohope.org/servicios.html#cursos">Capacitación</a>
    <a href="http://www.centrohope.org/servicios.html#becas">Becas</a></div>
    </div>
    </li>
    <li class="dropdown">
    <div class="dropdown"><a
    href="http://www.centrohope.org/informacion.html"> Información</a>
    <div class="dropdown-content"> <a
    href="http://www.centrohope.org/informacion.html#embarazo">Síntomas de
    embarazo</a> <a
    href="http://www.centrohope.org/informacion.html#elaborto">El aborto</a>
    <a href="http://www.centrohope.org/informacion.html#saludsexual">Salud
    sexual (ETS)</a> </div>
    </div>
    </li>
    <li class="dropdown">
    <div class="dropdown"><a href="http://www.centrohope.org/parte.html">Ser
    parte</a>
    <div class="dropdown-content"> <a
    href="http://www.centrohope.org/parte.html#donaciones">Donaciones</a> <a
    href="http://www.centrohope.org/parte.html#voluntariado">Voluntariado</a>
    <a href="http://www.centrohope.org/parte.html#oracion">Motivos de
    oración</a> </div>
    </div>
    </li>
    <li><a href="http://www.centrohope.org/englishsection.html">English</a></li>
    </ul>
    </div>
    </div>
    <div id="content">
    <iframe
    src="https://www.google.com/maps/embed?pb=%211m14%211m12%211m3%211d1965.1776294767983%212d-84.05749673656011%213d9.90434056341472%212m3%211f0%212f0%213f0%213m2%211i1024%212i768%214f13.1%215e0 %213m2%211sen%212s%214v1498152111883"
    style="border: 0pt none ;" allowfullscreen="" frameborder="0"
    height="450" width="600"></iframe>
    <script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAByTurYXHnsW8jqxOkxQwSI7tcFGbJXno&amp;callback=myMap"></script></div>
    <div style="text-decoration: none;" id="footer">
    <div class="boxed">Centro de Recursos Familiares HOPE <br>
    Asociación Cristiana “Global Hope Ministries”<br>
    Cédula: 3-002-678909<br>
    Teléfono: 8372-2111<br>
    <a href="http://www.centrohope.org/site"><span
    style="color: rgb(0, 0, 153); text-decoration: none;"> Site Index</span></a>
    <p>Dirección: San Francisco de Dos Ríos, Costa Rica<br>
    Diagonal de la esquina suroeste del Parque Okayama<br>
    Portón azul<br>
    Email: info@centrohope.org<br>
    centrohope@outlook.com</p>
    </div>
    </div>
    </div>
    </body>
    </html>
  2. #2
  3. No Profile Picture

    Join Date
    Jun 2017
    Location
    San Diego
    Posts
    3
    Rep Power
    0
    Great, There are many ways that provide a decent solution for embedding Google map onto your website. Apart from using iframe, use Google API and get it placed right.
    Using Google Maps API where you can find Developer guides, API reference and code samples provideed by Google, I here give a sample,

    <html>
    <head>
    <style>
    #map {
    height: 400px;
    width: 100%;
    }
    </style>
    </head>
    <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
    function initMap() {
    var uluru = {lat: -25.363, lng: 131.044};
    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
    });
    var marker = new google.maps.Marker({
    position: uluru,
    map: map
    });
    }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
    </body>
    </html>
    Check this https://developers.google.com/maps/d...g-a-google-map
    Hope this will help you to fix the issue. If you need more support on Website Design, we are the here to help you, as a leading Web Design Company in San Diego, we provide
    best Website design and development solution for worldwide clients.

IMN logo majestic logo threadwatch logo seochat tools logo