v5 Google Maps Settings in v6

4 replies · opened Jun 11, 2020

PpardthemonsterJun 11, 2020

Any easy was to migrate gMap settings (footer code) from v5 to v6 without changing to "inline"? For reference, what I mean by "inline" is shown per documentation and not preferred:

The following is what I previously had and although I think it is able to migrate inline to one line of code, it will be rather complex to tweak in future:

JS in HTML Footer:


	$('#google-map').gMap({
		 address: '37.296, -76.644',
		 maptype: 'ROADMAP',
		 zoom: 11,
		 markers: [
			{
				address: "37.296, -76.644",
				icon: {
					image: "images/icons/map-icon-red-dubs.png",
					iconsize: [26, 40],
					iconanchor: [13, 40]
				},
				html: "**New Quarter Park**
1000 Lakeshead Dr, Williamsburg, VA 23185"
			},
			{
				address: "37.315, -76.703",
				icon: {
					image: "images/icons/map-icon-red-dubs.png",
					iconsize: [26, 40],
					iconanchor: [13, 40]
				},					html: "**Waller Mill Park**
901 Airport Rd, Williamsburg, VA 23185"
			}
		 ],
		 doubleclickzoom: true,
		 controls: {
			 panControl: true,
			 zoomControl: true,
			 mapTypeControl: false,
			 scaleControl: false,
			 streetViewControl: false,
			 overviewMapControl: false
		},
		styles:
			[
				{
					"featureType": "administrative",
					"elementType": "labels.text.fill",
					"stylers": [
						{
							"color": "#444444"
						}
					]
				},
				{
					"featureType": "landscape",
					"elementType": "all",
					"stylers": [
						{
							"color": "#f2f2f2"
						}
					]
				},
				{
					"featureType": "poi",
					"elementType": "all",
					"stylers": [
						{
							"visibility": "off"
						}
					]
				},
				{
					"featureType": "road",
					"elementType": "all",
					"stylers": [
						{
							"saturation": -20
						},
						{
							"lightness": 35
						}
					]
				},
				{
					"featureType": "road.highway",
					"elementType": "all",
					"stylers": [
						{
						}
					]
				},
				{
					"featureType": "road.arterial",
					"elementType": "labels.icon",
					"stylers": [
						{
							"visibility": "on"
						}
					]
				},
				{
					"featureType": "water",
					"elementType": "all",
					"stylers": [
						{
							"color": "#6699cc"
						},
						{
							"visibility": "on"
						}
					]
				},
				{
					"featureType": "water",
					"elementType": "labels.text",
					"stylers": [
						{
							"visibility": "on"
						},
						{
							"color": "#333333"
						}
					]
				},    
				{
					"featureType": "poi.park",
					"elementType": "all",
					"stylers": [
						{
							"visibility": "on"
						}
					]
				}
			]
	});
SSemicolon WebSTAFFJun 11, 2020

Hello,

You can simply add the .customjs Class to the .gmap Element and then use the Custom JS Codes at the bottom of the Page like v5.

This will definitely work fine. Hope this Helps!

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

PpardthemonsterJun 11, 2020

I have tried this and note my code (next line) did not execute Custom JS Codes at the bottom of the Page like v5:
``

I have tried a few other things debugging issue and note that I can get Custom JS Codes to work in the following two scenarios (obviously not the long-term solution):

#1: with or without .customjs applied to div, using same Custom JS Codes, and adding the following code under functions.js:

#2: with or without .customjs applied to div, NOT using Custom JS Codes in HTML file, but completely transferred Custom JS Codes to plugins.gmap.js REPLACING these custom code lines starting with this and below (code above this in plugins.gmap.js left as-is):

var SEMICOLON = SEMICOLON || {};

SEMICOLON._gmapInit = function( $gmapEl ){

	$gmapEl = $gmapEl.filter(':not(.customjs)');
.
.
.
.
.
	});

};

Note with this method, it requires I include the following code (API declaration) under functions.js ONLY if .customjs is applied to the div:

My guess from all this is when using .customjs applied to the div, it bypasses the API declaration in its new location (functions.js) and somehow maybe the custom code in plugins.gmap.js when using :not(.customjs) is not working as intended and breaking plugins.gmap.js when executing?

Any other ideas?

SSemicolon WebSTAFFJun 11, 2020

Hello,

Apologies about the Inconveniences! We missed providing you with the following information.

After adding the .customjs Class to the .gmap Element, you must use the JS Codes like this:


jQuery(window).on( 'pluginGmapReady', function(){
	$('#google-map1').gMap({
		address: 'Melbourne, Australia',
		maptype: 'ROADMAP',
		zoom: 14,
		markers: [
			{
				address: "Melbourne, Australia"
			}
		],
		doubleclickzoom: false,
		controls: {
			panControl: true,
			zoomControl: true,
			mapTypeControl: true,
			scaleControl: false,
			streetViewControl: false,
			overviewMapControl: false
		}
	});
});

This will definitely work fine. There is no need to include the js/plugins.gmap.js or the Google Maps API on the Page. Hope this Helps!

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

PpardthemonsterJun 11, 2020

Thank you, that fixed the issue!!

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