Help in Correcting Map on Website, java/ html |
Help in Correcting Map on Website, java/ html |
Capture |
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 --> |
Christian J |
Sep 5 2017, 08:49 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
Do you have all those local JS files as well?
|
Capture |
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', } }); } |
Christian J |
Sep 6 2017, 05:25 AM
Post
#4
|
. Group: WDG Moderators Posts: 9,656 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. |
Capture |
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) |
Capture |
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
|
pandy |
Sep 6 2017, 08:49 AM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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> |
Capture |
Sep 7 2017, 10:12 PM
Post
#8
|
Newbie Group: Members Posts: 14 Joined: 23-November 14 Member No.: 21,845 |
yes
|
Lo-Fi Version | Time is now: 24th April 2024 - 05:51 AM |