Marker on the map jumped around when zooming

[alexpiano]

Hello.
When you zoom a map in a contact form, the marker jumps anywhere. How do you make it stay put?

			function initializeGoogleMaps() {
				// Map Markers
				var mapMarkers = [{
				initLatitude: 48.474184,
				initLongitude: 135.118356,
					html: "<strong>Штаб-квартира компании</strong><br>Хабаровск, Россия 680038",
					icon: {
						image: "img/pin.png",
						iconsize: [26, 46],
						iconanchor: [12, 46]
					},
					popup: true
				}];

				// Map Initial Location
				var initLatitude = 48.474184;
				var initLongitude = 135.118356;

				// Map Extended Settings
				var mapSettings = {
					controls: {
						draggable: (($.browser.mobile) ? false : true),
						panControl: true,
						zoomControl: true,
						mapTypeControl: true,
						scaleControl: true,
						streetViewControl: true,
						overviewMapControl: true
					},
					scrollwheel: false,
					markers: mapMarkers,
					latitude: initLatitude,
					longitude: initLongitude,
					zoom: 16
				};

				var map = $('#googlemaps').gMap(mapSettings),
					mapRef = $('#googlemaps').data('gMap.reference');

				// Create an array of styles.
				var mapColor = "#cfa968";

				var styles = [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}];

				var styledMap = new google.maps.StyledMapType(styles, {
					name: 'Styled Map'
				});

				mapRef.mapTypes.set('map_style', styledMap);
				mapRef.setMapTypeId('map_style');
			}

			// Initialize Google Maps when element enter on browser view
			theme.fn.intObs( '.google-map', 'initializeGoogleMaps()', {} );

			// Map text-center At
			var mapCenterAt = function(options, e) {
				e.preventDefault();
				$('#googlemaps').gMap("centerAt", options);
			}

		</script>

---

[Support]

Hello, you need to set the JS this way:

function initializeGoogleMaps() {
	// Map Markers
	var mapMarkers = [{
		latitude: 48.474184,
		longitude: 135.118356,
		html: "<strong>Штаб-квартира компании</strong><br>Хабаровск, Россия 680038",
		icon: {
			image: "img/pin.png",
			iconsize: [26, 46],
			iconanchor: [12, 46]
		},
		popup: true
	}];

	// Map Initial Location
	var initLatitude = 48.474184;
	var initLongitude = 135.118356;

	// Map Extended Settings
	var mapSettings = {
		controls: {
			draggable: (($.browser.mobile) ? false : true),
			panControl: true,
			zoomControl: true,
			mapTypeControl: true,
			scaleControl: true,
			streetViewControl: true,
			overviewMapControl: true
		},
		scrollwheel: false,
		markers: mapMarkers,
		latitude: initLatitude,
		longitude: initLongitude,
		zoom: 11
	};

	var map = $('#googlemaps').gMap(mapSettings);
}

Kind Regards.

Okler Themes

---

[alexpiano]

Have you lost this line or is it no longer needed? With this new code (which is no different except for zoom and no code), the card completely stopped working.

mapRef = $('#googlemaps').data('gMap.reference');

And isn’t the parenthesis } superfluous?

This code did not solve the problem.
Another problem is that when you move around the map, the marker moves too, it is not fixed in its position.

---

[Support]

Hello,

This is the complete code I used to test:

function initializeGoogleMaps() {
	// Map Markers
	var mapMarkers = [{
	initLatitude: 48.474184,
	initLongitude: 135.118356,
		html: "<strong>Штаб-квартира компании</strong><br>Хабаровск, Россия 680038",
		icon: {
			image: "img/pin.png",
			iconsize: [26, 46],
			iconanchor: [12, 46]
		},
		popup: true
	}];

	// Map Initial Location
	var initLatitude = 48.474184;
	var initLongitude = 135.118356;

	// Map Extended Settings
	var mapSettings = {
		controls: {
			draggable: (($.browser.mobile) ? false : true),
			panControl: true,
			zoomControl: true,
			mapTypeControl: true,
			scaleControl: true,
			streetViewControl: true,
			overviewMapControl: true
		},
		scrollwheel: false,
		markers: mapMarkers,
		latitude: initLatitude,
		longitude: initLongitude,
		zoom: 16
	};

	var map = $('#googlemaps').gMap(mapSettings),
		mapRef = $('#googlemaps').data('gMap.reference');

	// Create an array of styles.
	var mapColor = "#cfa968";

	var styles = [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}];

	var styledMap = new google.maps.StyledMapType(styles, {
		name: 'Styled Map'
	});

	mapRef.mapTypes.set('map_style', styledMap);
	mapRef.setMapTypeId('map_style');
}

// Initialize Google Maps when element enter on browser view
theme.fn.intObs( '.google-map', 'initializeGoogleMaps()', {} );

// Map text-center At
var mapCenterAt = function(options, e) {
	e.preventDefault();
	$('#googlemaps').gMap("centerAt", options);
}

If the problem persists, please send us the URL of your site so we can see that problem and how to fix it.

Kind Regards,

Jonas

---

[alexpiano]

As far as I can tell, you haven’t changed anything, but just copied the code I sent you? What is the meaning of this action?

+ I pointed out to you another problem with the marker, but it seems that you did not pay attention to it.

If I’m wrong, please point me to the line you changed, how is it different from the original?

So far, you haven’t done anything to make your code work.

---

[alexpiano]

If you watch your own demo, you will see that the problem exists.

https://preview.themeforest.net/item/porto-responsive-html5-template/full_screen_preview/4106987?_ga=2.208321618.1933879890.1629152258-1891859897.1629053383

---

[Support]

Hello, sorry but we really could not reproduce that issue here.

In this page: https://www.okler.net/previews/porto/9.1.0/contact-us.html – if you zoom in/out the marker stays in the same point (that marker uses Google Maps API and we just customized the image).

Can you please send more details?

---

[alexpiano]

Perhaps this is an openserver problem, I will later upload the site to the host and if the problem persists, I will send you a link. Thank you for your help and sorry for disturbing you.

---

[Author]

Posts