Advertisements

How to make custom google map design in javascript?

Advertisements

In this article we will teach you how to make custom google map design in javascript, how to add multiple markers in google map javascript and how to draw polylines or curve polylines in google map.

First of all you can read our article how to create google map in javascript.

Add Multiple Markers in Google Map Javascript

A marker identifies a location on a map. By default, a marker uses a standard image. Markers can display custom images, in which case they are usually referred to as “icons.” Markers and icons are objects of type Marker.

To add multiple markers on google map use the code given below.

<!DOCTYPE html>
<html lang="en-US">
<head>

	<!-- google map -->
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry&sensor=false"></script>
	<!-- google map -->

	<style type="text/css">
	#map{
		width: 100%;
		height: 500px;
	}
</style>

</head>

<body>

	<div class="map" id="map"></div>

	<script type="text/javascript">

		google.maps.event.addDomListener(window, 'load', init);

		var latLngs = [
		{
			lat: 20.049159, lng: 64.4018361, title: 'Title 1', address: 'Address 1'
		},
		{
			lat: 36.2408038, lng: -113.7584948, title: 'Title 2', address: 'Address 2'
		},
		{
			lat: 51.096745, lng: 5.9659499, title: 'Title 3', address: 'Address 3'
		},
		{
			lat: 33.2196462, lng: 40.1217543, title: 'Title 4', address: 'Address 4'
		}
		];

		function init() {

			var mapOptions = {

				zoom: 2,

				center: new google.maps.LatLng(33.2196462, 40.1217543),

				streetViewControl: false,

				heading: 90,

				tilt: 90,

			};

			var mapElement = document.getElementById('map');

			var map = new google.maps.Map(mapElement, mapOptions);

			latLngs.forEach(function(value, index){

				/*marker*/

				var contentString = '<div id="content">'+
				'<div id="siteNotice">'+
				'</div>'+
				'<center><h3>'+value.title+'</h3><a href="https://maps.google.com/?q='+value.address+'" target="_blank">See Directions</a></center>'+
				'</div>';

				var infowindow = new google.maps.InfoWindow({
					content: contentString
				});

				var marker = new google.maps.Marker({
					position: new google.maps.LatLng(value.lat,value.lng),
					map: map,
					title: value.title,
						 		//icon: 'your_image_path_icon',
						 		clickable:true
						 	});

				marker.addListener('click', function() {
					infowindow.open(map, marker);
				});

				/*marker*/

			});

		}

	</script>

</body>

</html>

For more options about google map markers read Google Map Markers.

If you want google maps api key free or want to create your own google map javascript api key then read our article how to create google map in javascript.

Add Custom Style in Google Map Javascript

We can style our google map in many different ways and we can add any colors to our google maps.

There are some popular google maps designs:

  • Grayscale Style Google Map
  • Night Mode Style Google Map
  • Silver Style Google Map
  • Retro Style Google Map
  • Dark Style Google Map
  • Aubergine Style Google Map

Use the code given below to create styled google map.

<!DOCTYPE html>
<html lang="en-US">
<head>

	<!-- google map -->
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry&sensor=false"></script>
	<!-- google map -->

	<style type="text/css">
	#map{
		width: 100%;
		height: 500px;
	}
</style>

</head>

<body>

	<div class="map" id="map"></div>

	<script type="text/javascript">

		google.maps.event.addDomListener(window, 'load', init);

		var latLngs = [
		{
			lat: 20.049159, lng: 64.4018361, title: 'Title 1', address: 'Address 1'
		},
		{
			lat: 36.2408038, lng: -113.7584948, title: 'Title 2', address: 'Address 2'
		},
		{
			lat: 51.096745, lng: 5.9659499, title: 'Title 3', address: 'Address 3'
		},
		{
			lat: 33.2196462, lng: 40.1217543, title: 'Title 4', address: 'Address 4'
		}
		];

		function init() {

			var mapOptions = {
				zoom: 2,

				center: new google.maps.LatLng(33.2196462, 40.1217543),

				styles: [
				{
					"featureType": "all",
					"elementType": "labels.text.fill",
					"stylers": [
					{
						"saturation": 36
					},
					{
						"color": "#FFFFFF"
					},
					{
						"lightness": 100
					}
					]
				},
				{
					"featureType": "all",
					"elementType": "labels.text.stroke",
					"stylers": [
					{
						"visibility": "on"
					},
					{
						"color": "#000000"
					},
					{
						"lightness": 16
					}
					]
				},
				{
					"featureType": "all",
					"elementType": "labels.icon",
					"stylers": [
					{
						"visibility": "off"
					}
					]
				},
				{
					"featureType": "administrative",
					"elementType": "geometry.fill",
					"stylers": [
					{
						"color": "#000000"
					},
					{
						"lightness": 20
					}
					]
				},
				{
					"featureType": "administrative",
					"elementType": "geometry.stroke",
					"stylers": [
					{
						"color": "#000000"
					},
					{
						"lightness": 17
					},
					{
						"weight": 1.2
					}
					]
				},
				{
					"featureType": "landscape",
					"elementType": "geometry",
					"stylers": [
					{
						"color": "#000000"
					},
					{
						"lightness": 10
					}
					]
				},
				{
					"featureType": "poi",
					"elementType": "geometry",
					"stylers": [
					{
						"color": "#000000"
					},
					{
						"lightness": 21
					}
					]
				},
				{
					"featureType": "road.highway",
					"elementType": "geometry.fill",
					"stylers": [
					{
						"color": "#000000"
					},
					{
						"lightness": 100
					}
					]
				},
				{
					"featureType": "road.highway",
					"elementType": "geometry.stroke",
					"stylers": [
					{
						"color": "#000000"
					},
					{
						"lightness": 29
					},
					{
						"weight": 0.2
					}
					]
				},
				{
					"featureType": "road.arterial",
					"elementType": "geometry",
					"stylers": [
					{
						"color": "#000000"
					},
					{
						"lightness": 18
					}
					]
				},
				{
					"featureType": "road.local",
					"elementType": "geometry",
					"stylers": [
					{
						"color": "#000000"
					},
					{
						"lightness": 16
					}
					]
				},
				{
					"featureType": "transit",
					"elementType": "geometry",
					"stylers": [
					{
						"color": "#000000"
					},
					{
						"lightness": 19
					}
					]
				},
				{
					"featureType": "water",
					"elementType": "geometry",
					"stylers": [
					{
						"color": "#000000"
					},
					{
						"lightness": 1
					}
					]
				}
				], 
				streetViewControl: false,
				heading: 90,
				tilt: 90,

			};

			var mapElement = document.getElementById('map');

			var map = new google.maps.Map(mapElement, mapOptions);

			latLngs.forEach(function(value, index){

				/*marker*/

				var contentString = '<div id="content">'+
				'<div id="siteNotice">'+
				'</div>'+
				'<center><h3>'+value.title+'</h3><a href="https://maps.google.com/?q='+value.address+'" target="_blank">See Directions</a></center>'+
				'</div>';

				var infowindow = new google.maps.InfoWindow({
					content: contentString
				});

				var marker = new google.maps.Marker({
					position: new google.maps.LatLng(value.lat,value.lng),
					map: map,
					title: value.title,
						 		//icon: 'your_image_path_icon',
						 		clickable:true
						 	});

				marker.addListener('click', function() {
					infowindow.open(map, marker);
				});

				/*marker*/

			});

		}

	</script>

</body>

</html>

For More styles visit style 1, style 2, style 3 or add your custom colors in the style array given above.

Draw Polylines in Google Map or Draw Curve Polylines in Google Map

A polyline is a list of points, where line segments are drawn between consecutive points. A polyline has the following properties:

  • Points
  • Width
  • Color
  • Start/end cap
  • Joint type
  • Stroke pattern
  • Z-Index
  • Visibility
  • Geodesic status
  • Tag

You can read the details here about polylines.

To draw polylines on google map use the code given below.

<!DOCTYPE html>
<html lang="en-US">
<head>

	<!-- google map -->
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry&sensor=false"></script>
	<!-- google map -->

	<style type="text/css">
	#map{
		width: 100%;
		height: 500px;
	}
</style>

</head>

<body>

	<div class="map" id="map"></div>

	<script type="text/javascript">

		var strokeColor='#000000',
		strokeSize=2,
		strokeOpacity=1;

		google.maps.event.addDomListener(window, 'load', init);

		var latLngs = [
		{
			lat: 20.049159, lng: 64.4018361, title: 'Title 1', address: 'Address 1'
		},
		{
			lat: 36.2408038, lng: -113.7584948, title: 'Title 2', address: 'Address 2'
		},
		{
			lat: 51.096745, lng: 5.9659499, title: 'Title 3', address: 'Address 3'
		},
		{
			lat: 33.2196462, lng: 40.1217543, title: 'Title 4', address: 'Address 4'
		}
		];

		function drawCurve(P1, P2, map) {

			var lineLength = google.maps.geometry.spherical.computeDistanceBetween(P1, P2);
			var lineHeading = google.maps.geometry.spherical.computeHeading(P1, P2);
			if (lineHeading < 0) {
				var lineHeading1 = lineHeading + 45;
				var lineHeading2 = lineHeading + 135;
			} else {
				var lineHeading1 = lineHeading + -45;
				var lineHeading2 = lineHeading + -135;
			}
			var pA = google.maps.geometry.spherical.computeOffset(P1, lineLength / 2.2, lineHeading1);
			var pB = google.maps.geometry.spherical.computeOffset(P2, lineLength / 2.2, lineHeading2);

			var curvedLine = new GmapsCubicBezier(P1, pA, pB, P2, 0.01, map);
		}

		function init() {

			var mapOptions = {
				zoom: 2,
				center: new google.maps.LatLng(33.2196462, 40.1217543),
				streetViewControl: false,
				heading: 90,
				tilt: 90,
			};

			var mapElement = document.getElementById('map');

			var map = new google.maps.Map(mapElement, mapOptions);

			latLngs.forEach(function(value, index){

				var jsonobj = latLngs[index];

				var nextInd = parseInt(index)+parseInt(1);

				if (nextInd >= latLngs.length) {
					nextInd = 0;
				}

				var jsonobj2 = latLngs[nextInd];

				var post1 = new google.maps.LatLng(jsonobj.lat,jsonobj.lng);

				var post2 = new google.maps.LatLng(jsonobj2.lat,jsonobj2.lng);

				drawCurve(post1, post2, map);

				/*marker*/

				var contentString = '<div id="content">'+
				'<div id="siteNotice">'+
				'</div>'+
				'<center><h3>'+value.title+'</h3><a href="https://maps.google.com/?q='+value.address+'" target="_blank">See Directions</a></center>'+
				'</div>';

				var infowindow = new google.maps.InfoWindow({
					content: contentString
				});

				var marker = new google.maps.Marker({
					position: new google.maps.LatLng(value.lat,value.lng),
					map: map,
					title: value.title,
					clickable:true
				});

				marker.addListener('click', function() {
					infowindow.open(map, marker);
				});

				/*marker*/

			});

		}

		var GmapsCubicBezier = function(latlong1, latlong2, latlong3, latlong4, resolution, map) {
			var lat1 = latlong1.lat();
			var long1 = latlong1.lng();
			var lat2 = latlong2.lat();
			var long2 = latlong2.lng();
			var lat3 = latlong3.lat();
			var long3 = latlong3.lng();
			var lat4 = latlong4.lat();
			var long4 = latlong4.lng();

			var points = [];

			for (var it = 0; it <= 1; it += resolution) {
				points.push(this.getBezier({
					x: lat1,
					y: long1
				}, {
					x: lat2,
					y: long2
				}, {
					x: lat3,
					y: long3
				}, {
					x: lat4,
					y: long4
				}, it));
			}
			var path = [];
			for (var i = 0; i < points.length - 1; i++) {
				path.push(new google.maps.LatLng(points[i].x, points[i].y));
				path.push(new google.maps.LatLng(points[i + 1].x, points[i + 1].y, false));
			}

			var FlightLine = new google.maps.Polyline({
				path: path,
				geodesic: true,
				strokeColor:strokeColor,
				strokeOpacity:0,
				strokeWeight:strokeSize, 

				icons:  [{
					icon: {
						path: 'M 0,-1 0,1',
						strokeOpacity: strokeOpacity,
						scale: strokeSize
					},
					offset: '0',
					repeat: '16px'
				}], 
			});

			FlightLine.setMap(map);

			return FlightLine;
		};

		GmapsCubicBezier.prototype = {

			B1: function(t) {
				return t * t * t;
			},
			B2: function(t) {
				return 3 * t * t * (1 - t);
			},
			B3: function(t) {
				return 3 * t * (1 - t) * (1 - t);
			},
			B4: function(t) {
				return (1 - t) * (1 - t) * (1 - t);
			},
			getBezier: function(C1, C2, C3, C4, percent) {
				var pos = {};
				pos.x = C1.x * this.B1(percent) + C2.x * this.B2(percent) + C3.x * this.B3(percent) + C4.x * this.B4(percent);
				pos.y = C1.y * this.B1(percent) + C2.y * this.B2(percent) + C3.y * this.B3(percent) + C4.y * this.B4(percent);
				return pos;
			}
		};

	</script>

</body>

</html>

Now you can make custom google map design in javascript with multiple markers, polylines and custom styles.

And if you want more tutorials and tricks about javascript then visit our Javascript page and follow us on facebooktwittertumblrlinkdedin and if you like this article then share this.

5 thoughts on “How to make custom google map design in javascript?”

  1. Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You obviously know what youre talking about, why waste your intelligence on just posting videos to your site when you could be giving us something enlightening to read?

  2. excellent put up, very informative. I’m wondering why the opposite specialists of this sector don’t notice this. You should continue your writing. I am sure, you have a great readers’ base already!

Comments are closed.