CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-maps
digitale
digitale

Reputation: 41

Can not load google map with jquery

I want to load google maps with jquery. The map i want to load is in the kontakt.html file which i want to load from my index.html inside a div, i load the text content, but the map wont initialize. I tried everything, I've put the initialize function on several different spots, but still no result. What am I doing wrong? Please help!

Here is the link to the page: The page

Here is the index.html

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="apple-touch-icon" href="images/appleicon.jpg"/>    
    <link rel="stylesheet" href="css/bjqs.css">
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="js/bjqs-1.3.min.js"></script>

        <meta charset="UTF-8">
        <title>Viva d.o.o.</title>
        <link rel="stylesheet" href="css/style.css" type="text/css">
        <link rel="stylesheet" href="css/button.css" type="text/css">

    <script>

    $(document).ready(function(){

      $("#tajna button").click(function(){
        $("#tekst").load("tajnavode.html", function() {
        $(this).hide().fadeIn('slow');
        });
      });
      $("#onama button").click(function(){
        $("#tekst").load("onama.html", function() {
        $(this).hide().fadeIn('slow');
        });
      });
      $("#proizvodi button").click(function(){
        $("#tekst").load("proizvodi.html", function() {
        $(this).hide().fadeIn('slow');
        });
      });

//here I call the page containing the map
      $("#kontakt button").click(function(){
        $("#tekst").load("kontakt.html", function() {
        $(this).hide().fadeIn('slow');
        });
      });

    });


    $(document).ready(function() {

    function initialize()
    {

    var myCenter=new google.maps.LatLng(42.519306,18.362231);
    var mapProp = {
      center:myCenter,
      zoom:18,
      mapTypeId:google.maps.MapTypeId.HYBRID
      };

    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

    var marker=new google.maps.Marker({
      position:myCenter,
      icon:'images/marker.png',
      animation: google.maps.Animation.BOUNCE
      });

    marker.setMap(map);
    }

    function loadScript()
    {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize";
      document.body.appendChild(script);
    }

    window.onload = loadScript;

    google.maps.event.addDomListener(window, 'load', initialize);

    });
    </script>  

    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
    </script>




    </head>
    <body>

    <div class="body">
      <div class="home">


            <div class="screen" style="text-align: center; margin: 0 auto;"><div style="width:850px; height:300px; 
            background-position:left; background-repeat:no-repeat; margin:0 auto;">

            <div id="banner-fade">

            <ul class="bjqs">
              <li><img src="images/header.png"></li>
              <li><img src="images/header1.png"></li>
              <li><img src="images/header2.png"></li>
            </ul> 
            </div>

                  <script class="secret-source">
            jQuery(document).ready(function($) {

              $('#banner-fade').bjqs({

                height      : 300,
                width       : 850,
                responsive  : true,
                showcontrols : false, // show next and prev controls
                centercontrols : false, // center controls verically
                showmarkers : false, // Show individual slide markers
                centermarkers : false, // Center markers horizontally

                // interaction values
                keyboardnav : false, // enable keyboard navigation
                hoverpause : false, // pause the slider on hover

                // presentational options
                usecaptions : false, // show captions for images using the image title tag
                randomstart : false, // start slider at random slide

              });

            });
          </script>
            </div>
            </div>
            <div class="nav" style="width:700px; height:50px; padding-left:150px; margin:0 auto;">

              <div id="onama"><button>O nama</button></div>
              <div id="tajna"><button>Tajna vode</button></div>
              <div id="proizvodi"><button>Proizvodi</button></div>
              <div id="kontakt"><button>Kontakt</button></div>

            </div>



//here is the div where the map sould be loaded 

        <div id="tekst" class="section" >
                <h1>O nama</h1>
                  <p>Viva d.o.o. nalazi se na jugu Republike Hrvatske u blizini Dubrovnika, točnije u srcu Konavala. Ime Konavala potječe od latinske riječi canalis, što znači kanal (kanali za navodnjavanje). I danas se vide ostaci tih kanala (vodovoda) iz Rimskog doba koji su vodu iz istočnog dijela Konavala vodili do povijesnog Epidaurusa.</p>
                  <p>Kako svoju plodnost konavosko polje zahvaljuje bogatsvu vode, nije čudo da Viva d.o.o. nastavje upravo ovdje, pogotovo ako se zna da je ovdašnja voda po kvaliteti visoko rangirana.</p>
                  <p>Viva d.o.o. nastaje polako. Nakon dugotrajnog čekanja potrebne dokumentacije za izgradnju punionice, prvi bageri i prve mine krenule su u rasčišćavanje terena na proljeće 2001. godine, da bi se gradnja objekta završila 2003., proizvodnja započinje 2004. godine. Prve boce vode Viva svoj put do krajnjeg konzumenta započele su krajem proljeća 2004. godine. U početku su to bile samo PET boce od 1,5L i 0,5L, a danas, tu su i PET bidoni od 5L, galoni od 18,9L, te staklene boce od 0,25L i 0,75L.</p>
                  <p>Daljnji tijek razvoja Viva-e teško je sa sigurnošću prognozirati, no s razlogom se s puno optimizma gleda na budućnost jer se konstantno bilježi zavidan rast prodaje.</p>
        </div>
      </div>
    </div>
        <div class="footer1" style="color: white; font-family: Verdana, Geneva, sans-serif; font-size: 14px;">
        <div class="footer" style="width: 850px; margin: 0 auto; text-align: center;">
          <div style="float:left;margin-top:15px; width:220px">
         <a href="http://www.vivawater.hr"> <img src="images/logotrans.png" alt="Viva d.o.o." width="111" height="39" style="border:0px;" /></a>
          <br />
          Viva d.o.o.<br />
          20215 Gruda<br />
    Dubrovnik - Croatia<br /><br />
          </div>
          <div style="float: left; width: 190px; margin-top: 15px;"> Gruda bb
    <br />
     20215 Gruda<br />
     <br />

    Tel: + 385 20 791 044<br />
    Tel: + 385 20 791 043<br /> 
    Fax: +385 20 791 043<br />
    E-Mail: [email protected]<br />
    <br />
          </div>

            <div style="float: left; margin-top: 15px; width: 220px;">


    Trgovački sud u Dubrovniku<br />
    OIB: 98746761193<br />IBAN: HR7223600001101654846<br /> MBS: 090002886<br /> 
    Temeljni kapital: 22.200,00kn<br /><br />
    <br />

          </div>


            <div style="float: left; width: 70px; margin-top: 15px; text-align: center;">



    <a target="_blank" href="https://www.facebook.com/vivawater"><img style="border:0px;"  src="images/face.png" alt="Viva facebook page" /></a> &nbsp;&nbsp;&nbsp; </div>


          </div>

    </div>

    </body>
    </html>

And here is the kontakt.html

//this page works if you open it separately, but if called through the jquery load the map does not show
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Kontakt</title>


    <script>




    function initialize()
    {

    var myCenter=new google.maps.LatLng(42.519306,18.362231);
    var mapProp = {
      center:myCenter,
      zoom:18,
      mapTypeId:google.maps.MapTypeId.HYBRID
      };

    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

    var marker=new google.maps.Marker({
      position:myCenter,
      icon:'images/marker.png',
      animation: google.maps.Animation.BOUNCE
      });

    marker.setMap(map);
    }

    function loadScript()
    {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize";
      document.body.appendChild(script);
    }

    window.onload = loadScript;

    google.maps.event.addDomListener(window, 'load', initialize);


    </script>


    </head>

    <body>
     <h1>Kontakt</h1>
                  <p>Gruda bb</p>
                  <div id="googleMap" style="width:500px;height:380px;"></div>

    </body>
    </html>

Upvotes: 0

Views: 1593

Answers (1)

Anto Jurković
Anto Jurković

Reputation: 11258

Description of what I did:

I deleted the code for map handling from index.html (the 1st page) and moved

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

I had to comment out function loadScript() because there was message that google apis were included two times. Code from kontakt.html was not started, so I changed that file to:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Kontakt</title>

</head>

<body>
<h1>Kontakt</h1>
<p>Gruda bb</p>
<div id="googleMap" style="width:500px;height:380px;"></div>

<script>

function initialize() {
    console.log('init...');
    //loadScript();

    var myCenter = new google.maps.LatLng(42.519306,18.362231);
    var mapProp = {
        center:myCenter,
        zoom:18,
        mapTypeId:google.maps.MapTypeId.HYBRID
    };

    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

    var marker=new google.maps.Marker({
        position:myCenter,
        icon:'images/marker.png',
        animation: google.maps.Animation.BOUNCE
    });

    marker.setMap(map);
}

function loadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize";
    document.body.appendChild(script);
}

initialize();
//window.onload = loadScript;

//google.maps.event.addDomListener(window, 'load', initialize);

</script>

</body>
</html>

Now map appears but there are some strange lines over it. It seems that some styling from css/style.css file influence that. You can see that if you comment out that css link.

Update: header and footer section seems ok. Body part seems ok until 

.body .home   .section div {
    float:right;
    width:460px;
}

After that becomes weird with lines over map.

Hope this helps.

Upvotes: 1

Related Questions