Customizing Google Map

[tonypalazzo]

I am currently upgrading our site from the BS2 version of Porto to the BS3 version of Porto. While I’m at it, I wanted to customize the Google map. For some reason, adding the styles in where I believe they should go has no effect. I have tried adding a new line under “zoom:” in var mapSettings called style: [code] as well as creating a new area called var mapOptions (what I’ve used on other sites that has worked) but neither are working. Do you have an example you could show of the proper place to put these styles?

---

[Support]

Hello, please try to use the following code:

/*
			Map Settings

				Find the Latitude and Longitude of your address:
					- http://universimmedia.pagesperso-orange.fr/geo/loc.htm
					- http://www.findlatitudeandlongitude.com/find-address-from-latitude-and-longitude/

			*/

			// Map Markers
			var mapMarkers = [{
				address: "54 East 41st Street, New York, NY 10017",
				html: "<strong>New York Office</strong><br>New York, NY 10017",
				icon: {
					image: "img/pin-logo.png",
					iconsize: [154, 65],
					iconanchor: [77, 65]
				}
			}];

			// Map Initial Location
			var initLatitude = 40.75213;
			var initLongitude = -73.98200;

			// Map Extended Settings
			var mapSettings = {
				controls: {
					panControl: true,
					zoomControl: true,
					mapTypeControl: true,
					scaleControl: true,
					streetViewControl: true,
					overviewMapControl: true
				},
				scrollwheel: false,
				markers: mapMarkers,
				latitude: initLatitude,
				longitude: initLongitude,
				zoom: 17
			};

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

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

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

			var styles = [{
				stylers: [{
					hue: mapColor
				}]
			}, {
				featureType: "road",
				elementType: "geometry",
				stylers: [{
					lightness: 0
				}, {
					visibility: "simplified"
				}]
			}, {
				featureType: "road",
				elementType: "labels",
				stylers: [{
					visibility: "off"
				}]
			}];

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

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

I hope it helps.

Kind Regards,

Jonas

---

[tonypalazzo]

Thanks Jonas, perfect!!!

---

[Author]

Posts