Jump to content

dodo213141

Members
 View Profile  See their activity

  • Posts

    5

  • Joined

  • Last visited

 Content Type 

Posts posted by dodo213141

    Google maps implementation

    in JavaScript

    Posted

    Thanks again for your patience. I guess that now I did a mess!!! Now none map is running!

     

    That is what I got:

     

    <!DOCTYPE html>
    <!--[if IE 7 ]><html class="ie ie7" lang="en"><![endif]-->
    <!--[if IE 8 ]><html class="ie ie8" lang="en"><![endif]-->
    <!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
    <head>
    <!-- Basic Page Needs
    ================================================== -->
    <meta charset="utf-8">
    <title>AAA</title>
    <!-- Mobile Specific
    ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- CSS
    ================================================== -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/boxed.css" id="layout">
    <link rel="stylesheet" type="text/css" href="css/colors/green.css" id="colors">
    <!-- Java Script
    ================================================== -->
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script src="js/custom.js"></script>
    <script src="js/selectnav.js"></script>
    <script src="js/flexslider.js"></script>
    <script src="js/twitter.js"></script>
    <script src="js/tooltip.js"></script>
    <script src="js/effects.js"></script>
    <script src="js/fancybox.js"></script>
    <script src="js/carousel.js"></script>
    <script src="js/isotope.js"></script>
    <script src="js/jquery-easing-1.3.js"></script>
    <script src="js/jquery-transit-modified.js"></script>
    <script src="js/layerslider.transitions.js"></script>
    <script src="js/layerslider.kreaturamedia.jquery.js"></script>
    </head>
    <body>
    <!-- Wrapper Start -->
    <div id="wrapper">
    <!-- Header
    ================================================== -->
    <!-- 960 Container -->
    <div class="container ie-dropdown-fix">
    <!-- Header -->
    <div id="header">
    <!-- Logo -->
    <div class="eight columns">
    <div id="logo">
    <a href="index.html"><img src="Logo1" alt="logo" /></a>
    <div id="tagline">Name</div>
    <div class="clear"></div>
    </div>
    </div>
    <!-- Social / Contact -->
    <div class="eight columns">
    <!-- Social Icons -->
    <div class="clear"></div>
    <!-- Contact Details --></div>
    </div>
    <!-- Header / End -->
    <!-- Navigation -->
    <div class="sixteen columns">
    <div id="navigation">
    <ul id="nav">
    <li><a id="current" href="contact.html">Contact</a></li>
    </ul>
    <!-- Search Form -->
    <div class="search-form">
    <form method="get" action="#">
    </form>
    </div>
    </div>
    <div class="clear"></div>
    </div>
    <!-- Navigation / End -->
    </div>
    <!-- 960 Container / End -->
    <!-- Content
    ================================================== -->
    <!-- 960 Container -->
    <div class="container">
    <div class="sixteen columns">
    <!-- Page Title -->
    <div id="page-title">
    <h2>Contact</h2>
    <div id="bolded-line"></div>
    </div>
    <!-- Page Title / End -->
    </div>
    </div>
    <!-- 960 Container / End -->
    <!-- 960 Container Start -->
    <div class="container">
    <!-- Text -->
    <div class="sixteen columns">
    <ul class="project-info">
    <li><strong>Where find me</strong></li>
    <li>Address 1 </li>
    </ul>
    <ul class="project-info">
    <li>Address 2</li>
    <li></li>
    <li> </li>
    </ul>
    <ul class="project-info">
    <p> Address 3 </p>
    <p><strong>Tel: </strong></p>
    <li><strong>Email: </strong></li>
    <p> </p>
    <p><br />
    </p>
    </ul>
    </div>
    <!-- Contact Form -->
    <div class="twelve columns">
    <div class="headline no-margin">
    <h4>Contact me</h4></div>
    <div class="form-spacer"></div>
    <!-- Success Message -->
    <div class="success-message">
    <div class="notification success closeable">
    <p><span>Grazie!</span> Il messaggio è stato inviato correttamente.</p>
    </div>
    </div>
    <!-- Form -->
    <div id="contact-form">
    <form method="post" action="contact.php">
    <div class="field">
    <label>Nome:</label>
    <input type="text" name="name" class="text" />
    </div>
    <div class="field">
    <label>Email: <span>*</span></label>
    <input type="text" name="email" class="text" />
    </div>
    <div class="field">
    <label>Messaggio: <span>*</span></label>
    <textarea name="message" class="text textarea" ></textarea>
    </div>
    <div class="field">
    <input type="button" id="send" value="Invia messaggio"/>
    <div class="loading"></div>
    </div>
    </form>
    </div>
    </div>
    <!-- Contact Details -->
    <div class="one-third column google-map">
    <div class="headline no-margin">
    <h4>Where I am</h4></div>
    <!-- Google Maps -->
    <div id="googlemaps1" class="google-map google-map-full" style="height:250px"></div>
    </div>
    <script src="js/jquery.gmap.min.js"></script>
    <script type="text/javascript">
    jQuery.noConflict();
    jQuery(function() {
    //map1
    jQuery('#googlemaps1').gMap({
    maptype: 'ROADMAP',
    scrollwheel: false,
    zoom: 11,
    /// force to centre at this lat and long NOT to first marker
    latitude: 40.708566,
    longitude: -74.054650,
    // insert multiple markers
    markers: [
    {
    address: 'New York, NY, United States', // Your Adress Here
    html: '',
    popup: false
    }, {
    address: 'Liberty Science Center', // Your Adress Here
    html: '',
    popup: false
    }, {
    address: 'Washington Square Park', // Your Adress Here
    html: '',
    popup: false
    }
    ]
    });
    <!-- Contact Details -->
    <div class="one-third column google-map">
    <div class="headline no-margin">
    <h4>Where I am</h4></div>
    <!-- Google Maps -->
    <div id="googlemaps2" class="google-map google-map-full" style="height:250px"></div>
    </div>
    //map2
    jQuery('#googlemaps2').gMap({
    maptype: 'ROADMAP',
    scrollwheel: false,
    zoom: 13,
    markers: [
    {
    address: 'Liberty Science Center', // Your Adress Here
    html: '',
    popup: false
    }
    ]
    });
    <!-- Contact Details -->
    <div class="one-third column google-map">
    <div class="headline no-margin">
    <h4>Where I am</h4></div>
    <!-- Google Maps -->
    <div id="googlemaps3" class="google-map google-map-full" style="height:250px"></div>
    </div>
    //map3
    jQuery('#googlemaps3').gMap({
    maptype: 'ROADMAP',
    scrollwheel: false,
    zoom: 13,
    markers: [
    {
    address: 'Washington Square Park', // Your Adress Here
    html: '',
    popup: false
    }
    ]
    });
    });
    </script>
    <style type="text/css">
    .google-map {width: 300px;}
    </style>
    </div>
    <!-- Contact Details -->
    <div class="four columns">
    <div id="social" class="tooltips"></div>
    </div>
    </div>
    <!-- End 960 Container -->
    </div>
    <!-- Wrapper / End -->
    <!-- Footer
    ================================================== -->
    <!-- Footer Start -->
    <div id="footer">
    <!-- 960 Container -->
    <div class="container">
    <!-- About -->
    <!-- About -->
    <!-- Footer / Bottom -->
    <div class="sixteen columns">
    <div id="footer-bottom"> © Copyright 2014 by <a href="#">A</a>. All rights reserved
    <div id="scroll-top-top"><a href="#"></a></div>
    </div>
    </div>
    </div>
    <!-- 960 Container / End -->
    </div>
    <!-- Footer / End -->
    <!-- Styles Switcher
    ================================================== -->
    <link rel="stylesheet" type="text/css" href="css/switcher.css">
    <script src="js/switcher.js"></script>
    <div id="style-switcher">
    <h2>Style Switcher <a href="#"></a></h2>
    <div><h3>Predefined Colors</h3>
    <ul class="colors" id="color1">
    <li><a href="#" class="green" title="Green"></a></li>
    <li><a href="#" class="blue" title="Blue"></a></li>
    <li><a href="#" class="orange" title="Orange"></a></li>
    <li><a href="#" class="navy" title="Navy"></a></li>
    <li><a href="#" class="yellow" title="Yellow"></a></li>
    <li><a href="#" class="peach" title="Peach"></a></li>
    <li><a href="#" class="beige" title="Beige"></a></li>
    <li><a href="#" class="purple" title="Purple"></a></li>
    <li><a href="#" class="red" title="Red"></a></li>
    <li><a href="#" class="pink" title="Pink"></a></li>
    <li><a href="#" class="celadon" title="Celadon"></a></li>
    <li><a href="#" class="brown" title="Brown"></a></li>
    <li><a href="#" class="cherry" title="Cherry"></a></li>
    <li><a href="#" class="gray" title="Gray"></a></li>
    <li><a href="#" class="dark" title="Dark"></a></li>
    <li><a href="#" class="cyan" title="Cyan"></a></li>
    <li><a href="#" class="olive" title="Olive"></a></li>
    <li><a href="#" class="dirty-green" title="Dirty Green"></a></li>
    </ul>
    <h3>Layout Style</h3>
    <div class="layout-style">
    <select id="layout-switcher">
    <option value="css/boxed">Boxed</option>
    <option value="css/wide">Wide</option>
    </select>
    </div>
    <h3>Background Image</h3>
    <ul class="colors bg" id="bg">
    <li><a href="#" class="bg1"></a></li>
    <li><a href="#" class="bg2"></a></li>
    <li><a href="#" class="bg3"></a></li>
    <li><a href="#" class="bg4"></a></li>
    <li><a href="#" class="bg5"></a></li>
    <li><a href="#" class="bg6"></a></li>
    <li><a href="#" class="bg7"></a></li>
    <li><a href="#" class="bg8"></a></li>
    <li><a href="#" class="bg9"></a></li>
    <li><a href="#" class="bg10"></a></li>
    <li><a href="#" class="bg11"></a></li>
    <li><a href="#" class="bg12"></a></li>
    <li><a href="#" class="bg13"></a></li>
    <li><a href="#" class="bg14"></a></li>
    <li><a href="#" class="bg15"></a></li>
    <li><a href="#" class="bg16"></a></li>
    <li><a href="#" class="bg17"></a></li>
    <li><a href="#" class="bg18"></a></li>
    </ul>
    <h3>Background Color</h3>
    <ul class="colors bgsolid" id="bgsolid">
    <li><a href="#" class="green-bg" title="Green"></a></li>
    <li><a href="#" class="blue-bg" title="Blue"></a></li>
    <li><a href="#" class="orange-bg" title="Orange"></a></li>
    <li><a href="#" class="navy-bg" title="Navy"></a></li>
    <li><a href="#" class="yellow-bg" title="Yellow"></a></li>
    <li><a href="#" class="peach-bg" title="Peach"></a></li>
    <li><a href="#" class="beige-bg" title="Beige"></a></li>
    <li><a href="#" class="purple-bg" title="Purple"></a></li>
    <li><a href="#" class="red-bg" title="Red"></a></li>
    <li><a href="#" class="pink-bg" title="Pink"></a></li>
    <li><a href="#" class="celadon-bg" title="Celadon"></a></li>
    <li><a href="#" class="brown-bg" title="Brown"></a></li>
    <li><a href="#" class="cherry-bg" title="Cherry"></a></li>
    <li><a href="#" class="gray-bg" title="Gray"></a></li>
    <li><a href="#" class="dark-bg" title="Dark"></a></li>
    <li><a href="#" class="cyan-bg" title="Cyan"></a></li>
    <li><a href="#" class="olive-bg" title="Olive"></a></li>
    <li><a href="#" class="dirty-green-bg" title="Dirty Green"></a></li>
    </ul></div>
    <div id="reset"><a href="#" class="button color green boxed">Reset</a></div>
    </div>
    </body>
    </html>
    What I did wrong? :fool: I'm start to thinking that .js is not for me!

    Google maps implementation

    in JavaScript

    Posted

    Super thanks for your help, I tried to do what you told me... But now is just working the third one! This is the code that I got:

     

    (Furthermore I guess that the first </div> is not essential)

     

    </div>
    <!-- Contact Details -->
    <div class="one-third column google-map">
    <div class="headline no-margin">
    <h4>Where I am</h4></div>
    <!-- Google Maps -->
    <div id="googlemaps1" class="google-map google-map-full" style="height:250px"></div>
    <script src="js/jquery.gmap.min.js"></script>
    <script type="text/javascript">
    jQuery('#googlemaps1').gMap({
    maptype: 'ROADMAP',
    scrollwheel: false,
    zoom: 13,
    markers: [
    {
    address: 'New York, NY, United States', // Your Adress Here
    html: '',
    popup: false,
    }
    ],
    });
    </script>
    </div>
    <!-- Contact Details -->
    <div class="one-third column google-map">
    <div class="headline no-margin">
    <h4>Where I am</h4></div>
    <!-- Google Maps -->
    <div id="googlemaps2" class="google-map google-map-full" style="height:250px"></div>
    <script src="js/jquery.gmap.min.js"></script>
    <script type="text/javascript">
    jQuery('#googlemaps2').gMap({
    maptype: 'ROADMAP',
    scrollwheel: false,
    zoom: 13,
    markers: [
    {
    address: 'New York, NY, United States', // Your Adress Here
    html: '',
    popup: false,
    }
    ],
    });
    </script>
    </div>
    <!-- Contact Details -->
    <div class="one-third column google-map">
    <div class="headline no-margin">
    <h4>Where I am</h4></div>
    <!-- Google Maps -->
    <div id="googlemaps3" class="google-map google-map-full" style="height:250px"></div>
    <script src="js/jquery.gmap.min.js"></script>
    <script type="text/javascript">
    jQuery('#googlemaps3').gMap({
    maptype: 'ROADMAP',
    scrollwheel: false,
    zoom: 13,
    markers: [
    {
    address: 'New York, NY, United States', // Your Adress Here
    html: '',
    popup: false,
    }
    ],
    });
    </script>
    </div>
    What is it wrong now? :facepalm:

    Google maps implementation

    in JavaScript

    Posted

    Actually thats what I have as code!

     

    </div>
    <!-- Contact Details -->
    <div class="one-third column google-map">
    <div class="headline no-margin">
    <h4>Where I am</h4></div>
    <!-- Google Maps -->
    <div id="googlemaps" class="google-map google-map-full" style="height:250px"></div>
    <script src="js/jquery.gmap.min.js"></script>
    <script type="text/javascript">
    jQuery('#googlemaps').gMap({
    maptype: 'ROADMAP',
    scrollwheel: false,
    zoom: 13,
    markers: [
    {
    address: 'New York, NY, United States', // Your Adress Here
    html: '',
    popup: false,
    }
    ],
    });
    </script>
    </div>
    But if i try to copy and paste it (in my final code I have three same copy of this above here), in order to make a second and third map... The second one won't be visible and neither the third one! Is it not enough doing in this way? I'm really stuck and I cannot figure out why! I thought it was quite easy!
    • Like 1

    Google maps implementation

    in JavaScript

    Posted

    Hello to everyone,
    I'm Edoardo, I'm new of this forum and I'm learning html,css,js... I'm at the beginning! I download this pre-configured theme and I'm trying to work on it! I figure out a problem when I try to make, in the contact page, three google maps location with a different geolocalisation. As if I had three different places to set up.
    As u can see in the attached file is just running the first geolocalisation the others two are not working and, furthermore, they are not properly centered.
    How can I solve it? I really spent a lot of time in it and a lot of efforts... But I cannot understand where is the mistake, and I think thats quite a silly issue!
    I attached the file.
    Please can someone help me?
    Thankssssss in advance

    Google maps issues.zip

×
×
  • Create New...