Jump to content

Google maps implementation


dodo213141
 Share

Recommended Posts

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

Link to comment
Share on other sites

Very unlikely that anyone would download a zip file.

 

When you set up google map using JavaScript you define the centre location.

 

var latlng = new google.maps.LatLng(16.436085,-87.694702);

 

Then you setup initial default options when google map loads like zoom

 

var myOptions = {

zoom: 7,
center: latlng,
}
it will now centre to coordinates attached to latlng.
Link to comment
Share on other sites

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
Link to comment
Share on other sites

Did you create separate containing element div for each?

jQuery('#googlemaps').gMap({maptype: 'ROADMAP',scrollwheel: false,zoom: 13,markers: [{address: 'New York, NY, United States', // Your Adress Herehtml: '',popup: false,}],});jQuery('#googlemaps2').gMap({maptype: 'ROADMAP',scrollwheel: false,zoom: 13,markers: [{address: 'New York, NY, United States', // Your Adress Herehtml: '',popup: false,}],});jQuery('#googlemaps3').gMap({maptype: 'ROADMAP',scrollwheel: false,zoom: 13,markers: [{address: 'New York, NY, United States', // Your Adress Herehtml: '',popup: false,}],});

As in

 

<div id="googlemaps"></div>

 

<div id="googlemaps2"></div>

 

<div id="googlemaps3"></div>

 

else they will overwrite the previous map.

Link to comment
Share on other sites

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:
Link to comment
Share on other sites

You only need to reference jquery, and jquery google map libraries once, in this quick example

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>Document Title</title>        <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="http://maps.google.com/maps/api/js?sensor=true"></script>        <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                        }                    ]                });                //map2                jQuery('#googlemaps2').gMap({                    maptype: 'ROADMAP',                    scrollwheel: false,                    zoom: 13,                    markers: [                        {                            address: 'Liberty Science Center', // Your Adress Here                            html: '',                            popup: false                        }                    ]                });                //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>    </head>    <body>        <!-- 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>        <!-- 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>        <!-- 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>    </body></html>
Edited by dsonesuk
Link to comment
Share on other sites

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!
Link to comment
Share on other sites

That is nothing like the example i gave you! Look where the jquery code is placed in the example.

 

Inline css styles, links to external css files should be placed between <head> and </head>, js/jquery is optional but is better to place in <head> as well, even better to place in external file and link to that, these files should only be linked to once only.

 

VALIDATE:

You must validate your pages at http://validator.w3.org/ this will point the errors you have which are

 

stray closing div tags,

 

<p></p> elements within <UL>

 

open, closing script tags ALL over the place, not closed properly and encircling html, generally a real mess.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...