The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Help in Correcting Map on Website, java/ html
Capture
post Sep 5 2017, 08:07 AM
Post #1


Newbie
*

Group: Members
Posts: 14
Joined: 23-November 14
Member No.: 21,845



Hi I have template I am trying to change, I am in putting the map code but its not working properly, I input the code from google maps but when I run the page I get error, any guides is appreciated!


Its the first line that seems to be the problem:


<!-- Begin JavaScript -->
<script type="text/javascript" src='https://goo.gl/maps/PwLdkh2hCvM2></script>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/modernizr-respond.js"></script>
<script type="text/javascript" src="js/cookie.js"></script>
<script type="text/javascript" src="js/retina.js"></script>
<script type="text/javascript" src="js/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/scrollTo-min.js"></script>
<script type="text/javascript" src="js/easing.1.3.js"></script>
<script type="text/javascript" src="js/appear.js"></script>
<script type="text/javascript" src="js/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="js/jflickrfeed.min.js"></script>
<script type="text/javascript" src="js/flexslider/flexslider.min.js"></script>
<script type="text/javascript" src="js/isotope.min.js"></script>
<script type="text/javascript" src="js/queryloader2.min.js"></script>
<script type="text/javascript" src="js/gmap.min.js"></script>
<script type="text/javascript" src="js/nicescroll.min.js"></script>
<script type="text/javascript" src="js/fitvids.js"></script>
<script type="text/javascript" src="js/Magnific-Popup/magnific-popup.min.js"></script>
<script type="text/javascript" src="js/mb.YTPlayer/inc/mb.YTPlayer.js"></script>
<script type="text/javascript" src="js/mousewheel.min.js"></script>
<script type="text/javascript" src="js/lazyload.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<!-- End JavaScript -->
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 5 2017, 08:49 AM
Post #2


.
********

Group: WDG Moderators
Posts: 7,638
Joined: 10-August 06
Member No.: 7



Do you have all those local JS files as well?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Capture
post Sep 6 2017, 05:17 AM
Post #3


Newbie
*

Group: Members
Posts: 14
Joined: 23-November 14
Member No.: 21,845



Hi Christian

Thanks for your help, yes I do have a js, i have made changes to the areas where there is a google link required and to the address sections. When I test it on my html program it all works fine, but as soon as I uploaded it to my website I run into problems. Here the two sections I edit address and then google src

// Contact 1

// Map Initialization
if($(".contact-1 .map").length > 0) {

var height = (win_w < 768)? ($(".contact-1 .content-wrapper").height()+60) : win_h,
add = $(".contact-1 .map").attr('data-address') || 'Attard, Malta';

$(".contact-1 .map").append('<div class="map-wrapper" id="map"></div>');

$(".contact-1 .map-wrapper").width(win_w);
$(".contact-1 .map-wrapper").height(height);

$("#map").gMap({

address: add,
zoom: 12,
scrollwheel: true,
maptype: 'ROADMAP',

controls: {
panControl: false,
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false
},
markers: [
{
address: add
}
]
});
}

// Scrollbar
if($(".contact-1").length > 0){

if(win_w <= 1400) {

$(".contact-1").niceScroll({
mousescrollstep: 60,
cursorcolor: "#959595",
cursorborder: "0px solid #fff",
});
var wrapper_height = $(".contact-1 .content-wrapper").height();
$(".contact-1 .mCSB_inside > .mCSB_container").height(wrapper_height+60);
}
}

// Form Close button
$(".contact-1 .close").click(function(event) {
event.preventDefault();

$(".contact-1 .content-wrapper").fadeOut(300, function() {
$(".contact-1 .form-btn").delay(200).fadeIn(300);
$(".contact-1 .map").addClass('active');
});
});

// Form Open Button
$(".contact-1 .form-btn").click(function(event) {
event.preventDefault();

$(this).fadeOut(300);
$(".contact-1 .map").removeClass('active');
$(".contact-1 .content-wrapper").fadeIn(300);
});

// Contact 2

// Map Initialization
if($(".contact-2 .map").length > 0) {

var add = $(".contact-2 .map").attr('data-address') || 'Attard, Malta';

$(".map-content").gMap({

address: add,
zoom: 12,
scrollwheel: true,
maptype: 'ROADMAP',

controls: {
panControl: false,
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false
},
markers: [
{
address: add
}
]
});
}

// Map Open
$(".contact-2 .map .open").click(function(event) {
event.preventDefault();

$(this).fadeOut(300);
});


______


// On Image Click
$(".gallery-images .img a.img-cont").magnificPopup({

type: 'iframe',
closeOnContentClick: false,
mainClass: 'mfp-fade',
preloader: true,
iframe: {
markup: '<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
'</div>',

patterns: {
youtube: {
index: 'youtube.com/',
id: 'v=',
src: '//www.youtube.com/embed/%id%?autoplay=1'
},
vimeo: {
index: 'vimeo.com/',
id: '/',
src: '//player.vimeo.com/video/%id%?autoplay=1'
},
gmaps: {
index: '//maps.google.',
src: 'https://goo.gl/maps/PwLdkh2hCvM2'
}
},
srcAction: 'iframe_src',
}
});

$(".gallery-images .img .preview").magnificPopup({

type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-fade',
preloader: true,

gallery: {
enabled: true,
navigateByImgClick: true,
arrowMarkup: '<button title="%title%" type="button" class="arrow-%dir%"></button>', // markup of an arrow button
tPrev: 'Previous (Left arrow key)', // title for left button
tNext: 'Next (Right arrow key)', // title for right button
tCounter: '<span class="mfp-counter">%curr% of %total%</span>' // markup of counter
}
});

$(".gallery-images.style-title .img .overlay a:not('.video')").magnificPopup({

type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-fade',
preloader: true,

gallery: {
enabled: true,
navigateByImgClick: true,
arrowMarkup: '<button title="%title%" type="button" class="arrow-%dir%"></button>', // markup of an arrow button
tPrev: 'Previous (Left arrow key)', // title for left button
tNext: 'Next (Right arrow key)', // title for right button
tCounter: '<span class="mfp-counter">%curr% of %total%</span>' // markup of counter
}
});

$(".gallery-images.style-title .img .overlay a.video").magnificPopup({

type: 'iframe',
closeOnContentClick: false,
mainClass: 'mfp-fade',
preloader: true,
iframe: {
markup: '<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
'</div>',

patterns: {
youtube: {
index: 'youtube.com/',
id: 'v=',
src: '//www.youtube.com/embed/%id%?autoplay=1'
},
vimeo: {
index: 'vimeo.com/',
id: '/',
src: '//player.vimeo.com/video/%id%?autoplay=1'
},
gmaps: {
index: '//maps.google.',
src: 'https://goo.gl/maps/PwLdkh2hCvM2'
}
},
srcAction: 'iframe_src',
}
});
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 6 2017, 05:25 AM
Post #4


.
********

Group: WDG Moderators
Posts: 7,638
Joined: 10-August 06
Member No.: 7



I meant, have you uploaded the other 22 javascript files to the correct location on your web server? (I should add that with that many files, there will be delays before all of them have loaded, which may or may not cause problems.)

Can't help with the jQuery, but if you you post the script error or better link to a test page maybe someone else can take a look.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Capture
post Sep 6 2017, 05:45 AM
Post #5


Newbie
*

Group: Members
Posts: 14
Joined: 23-November 14
Member No.: 21,845



Hi, yeah, all javascript files have been uploaded

When I went through google dev on Chrome and this the error, which I have attached screen image of, It tells me 'Google Maps API error: MissingKeyMapError'

I went and follow the instructs to an api and find the code were I need to place it in javascripts , but no code exists. So I don't know what to do now!


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Capture
post Sep 6 2017, 05:46 AM
Post #6


Newbie
*

Group: Members
Posts: 14
Joined: 23-November 14
Member No.: 21,845



and I don't understand why it works on my computer but not on the web
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 6 2017, 08:49 AM
Post #7


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,674
Joined: 9-August 06
Member No.: 6



Did you get the key at this page?
https://developers.google.com/maps/document...ipt/get-api-key

There's an example that shows how to use it there.

CODE
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Capture
post Sep 7 2017, 10:12 PM
Post #8


Newbie
*

Group: Members
Posts: 14
Joined: 23-November 14
Member No.: 21,845



yes
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 26th September 2017 - 04:44 PM