Help in Correcting Map on Website, java/ html Options

[Capture]

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 -->

[Christian J]

Do you have all those local JS files as well?

[Capture]

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',
}
});
}

[Christian J]

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.

[Capture]

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!

[Capture]

and I don't understand why it works on my computer but not on the web

[pandy]

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>

[Capture]

yes