Canvas Support

v7 Google Maps, multiple instances

8 replies · opened Mar 15, 2023

PpardthemonsterMar 15, 2023

I am trying to replicate prior behavior here https://www.owlhollowbakery.com/contact.html

With v7 it appears I must use functions.js for API key?

What should my html file look like at bottom with respect to Javascripts? Also, trying to ensure I can still use 2 different maps, also need ability for custom styling. Styling was done like this:

	
	jQuery(window).on( 'pluginGmapReady', function(){
		$('#google-map1').gMap({
			styles:
				[
					{
						"featureType": "all",
						"elementType": "labels.text",

v7
https://www.owlhollowbakery.com/v7/contact.html

SSemicolon WebSTAFFMar 15, 2023

Hello,

Everything remains same. You will just need to remove the following code from HTML:
[ch_pre][/ch_pre]

And simply move the API Key in the js/functions.js File. Find gmapAPI:"" and replace it with: gmapAPI:"your-api-key". This way you will not need to include this in every Page you plan to use Google Maps on. All other codes remain same.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

PpardthemonsterMar 15, 2023

I was able to get this to work using API key in the functions.js, however only with having jquery.js after functions.js. I have also seen other instances of jQuery not functioning properly unless it is after functions.js.

Is something else wrong as documentation says jquery.js should be before functions.js?

SSemicolon WebSTAFFMar 16, 2023

Hello,

Apologies for the Inconveniences caused!

If jQuery is used on the Page, the js/jquery.js must be added to the Page but before the js/functions.js File. We have tested this and it appears to be working for us. But clearly we are missing something, so it would be great if you can point us to an existing Template you are facing issues on so that we can check this and fix this for you. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

PpardthemonsterMar 16, 2023

One instance where jquery.js MUST be after functions.js (for maps) to work is the following:
https://www.owlhollowbakery.com/v7/contact.html

Another instance where jquery.js MUST be after functions.js is anytime I have portfolio pages with titles on items and don't want mouse hover/pause to show all the text so I use this script:

 // fix hover title tooltip via https://stackoverflow.com/questions/43625545/hide-the-title-attribute-tooltip-on-hover
	jQuery(document).ready(function() {
	  $("a").mouseenter(function() {
		  var title = $(this).attr("title");
		  $(this).attr("save_title", title);
		  $(this).attr("title", "");
		})
		.mouseleave(function() {
		  var title = $(this).attr("save_title");
		  $(this).attr("title", title);
		})
		.click(function() {
		  var title = $(this).attr("save_title");
		  $(this).attr("title", title);
		});
	});
SSemicolon WebSTAFFMar 17, 2023

Hello,

Okay we now know what the issue is. Upon checking your codes we noticed that you are using $ to initialize the jQuery related functions instead of using jQuery in your codes. In previous versions of Canvas, when jQuery was included by default, we used to escape jQuery by using noConflict in the js/functions.js, so you could use $. But now since Canvas runs on VanillaJS, we have since removed this code.

We would recommend using jQuery instead of $ henceforth to avoid unnecessary issues with other plugins as well.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

PpardthemonsterMar 17, 2023

Thanks for response. If you can just point me in one instance here as I need this to make my portfolio html titles to not show on hover. What would this be changed to?

 // fix hover title tooltip via https://stackoverflow.com/questions/43625545/hide-the-title-attribute-tooltip-on-hover
	jQuery(document).ready(function() {
	  $("a").mouseenter(function() {
		  var title = $(this).attr("title");
		  $(this).attr("save_title", title);
		  $(this).attr("title", "");
		})
		.mouseleave(function() {
		  var title = $(this).attr("save_title");
		  $(this).attr("title", title);
		})
		.click(function() {
		  var title = $(this).attr("save_title");
		  $(this).attr("title", title);
		});
	});

Or if there is a more optimal method to make my portfolio html titles to not show on hover, that would also work. Example where needed (hover over plus sign):
https://www.aaronbonine.com/v7/portfolio-birds.html

SSemicolon WebSTAFFMar 17, 2023

Hello,

Simply include the js/jquery.js JS Linking before js/functions.js File and then the following code:
[ch_pre] // fix hover title tooltip via https://stackoverflow.com/questions/43625545/hide-the-title-attribute-tooltip-on-hover
jQuery(document).ready(function() {
jQuery("a").mouseenter(function() {
var title = jQuery(this).attr("title");
jQuery(this).attr("save_title", title);
jQuery(this).attr("title", "");
})
.mouseleave(function() {
var title = jQuery(this).attr("save_title");
jQuery(this).attr("title", title);
})
.click(function() {
var title = jQuery(this).attr("save_title");
jQuery(this).attr("title", title);
});
});
[/ch_pre]

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

PpardthemonsterMar 17, 2023

Thank you. Solved!

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard