How to shorten the Google Maps code if you need to add multiple placemarks?

  • 0
    Tell me how to shorten the javaScript code so as not to repeat the same thing for each placemark on the map (only the coordinates and content of the placemarks will be different), as well as how to make the icon change to customIconActive when clicked.
    Code:
    // Set coordinates for points
    	var point1 = {lat: 47.649580,	lng: 12.729179};
    	var point2 = {lat: 47.651604,	lng: 12.729351};
    	var point3 = {lat: 47.654408,	lng: 12.733771};
    	var point4 = {lat: 47.652991,	lng: 12.736346};
    	var point5 = {lat: 47.645677,	lng: 12.731711};
    	var point6 = {lat: 47.653396,	lng: 12.734286};
    	var point7 = {lat: 47.648308,	lng: 12.730209};
    	var point8 = {lat: 47.654235,	lng: 12.722398};
    	var point9 = {lat: 47.647903,	lng: 12.712142};
    	var point10 = {lat: 47.644752, lng: 12.718536};
    
    	var customIcon = 'img/map-icon.svg';
    	var customIconActive = 'img/map-icon_active.svg';
    
    	var map = new google.maps.Map(document.getElementById('objectsMap'), {
    		zoom: 15,
    		center: point1,
    		mapTypeControl: false,
    		streetViewControl: false,
    		fullscreenControl: false,
    	});
    	
    	//Associate the styled map with the MapTypeId and set it to display.
    	map.mapTypes.set('styled_map', styledMapType);
    	map.setMapTypeId('styled_map');
    
    	var marker1 = new google.maps.Marker({
    		position: point1,
    		map: map,
    		icon: customIcon,
    	});
    	var contentMarker1 = '<a href="#" class="map__objects-info">' +
    								'<img src="img/project-img1.jpg" alt="">' +
    								'<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
    								'</a>';
    
    	var windowMarker1 = new google.maps.InfoWindow({
    		content: contentMarker1,
    		pixelOffset: new google.maps.Size(0, 205),
    	});
    	marker1.addListener('click', function () {
    		windowMarker1.open(map, marker1);
    		windowMarker2.close(map, marker2);
    		windowMarker3.close(map, marker3);
    		windowMarker4.close(map, marker4);
    		windowMarker5.close(map, marker5);
    		windowMarker6.close(map, marker6);
    		windowMarker7.close(map, marker7);
    		windowMarker8.close(map, marker8);
    		windowMarker9.close(map, marker9);
    		windowMarker10.close(map, marker10);
    	});
    
    	var marker2 = new google.maps.Marker({
    		position: point2,
    		map: map,
    		icon: customIcon,
    	});
    	var contentMarker2 = '<a href="#" class="map__objects-info">' +
    								'<img src="img/project-img2.jpg" alt="">' +
    								'<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
    								'</a>';
    
    	var windowMarker2 = new google.maps.InfoWindow({
    		content: contentMarker2,
    		pixelOffset: new google.maps.Size(0, 205),
    	});
    	marker2.addListener('click', function () {
    		windowMarker2.open(map, marker2);
    		windowMarker1.close(map, marker1);
    		windowMarker3.close(map, marker3);
    		windowMarker4.close(map, marker4);
    		windowMarker5.close(map, marker5);
    		windowMarker6.close(map, marker6);
    		windowMarker7.close(map, marker7);
    		windowMarker8.close(map, marker8);
    		windowMarker9.close(map, marker9);
    		windowMarker10.close(map, marker10);
    	});
    
    	var marker3 = new google.maps.Marker({
    		position: point3,
    		map: map,
    		icon: customIcon,
    	});
    	var contentMarker3 = '<a href="#" class="map__objects-info">' +
    								'<img src="img/project-img3.jpg" alt="">' +
    								'<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
    								'</a>';
    
    	var windowMarker3 = new google.maps.InfoWindow({
    		content: contentMarker3,
    		pixelOffset: new google.maps.Size(0, 205),
    	});
    	marker3.addListener('click', function () {
    		windowMarker3.open(map, marker3);
    		windowMarker1.close(map, marker1);
    		windowMarker2.close(map, marker2);
    		windowMarker4.close(map, marker4);
    		windowMarker5.close(map, marker5);
    		windowMarker6.close(map, marker6);
    		windowMarker7.close(map, marker7);
    		windowMarker8.close(map, marker8);
    		windowMarker9.close(map, marker9);
    		windowMarker10.close(map, marker10);
    	});
    
    	var marker4 = new google.maps.Marker({
    		position: point4,
    		map: map,
    		icon: customIcon,
    	});
    	var contentMarker4 = '<a href="#" class="map__objects-info">' +
    								'<img src="img/project-img4.jpg" alt="">' +
    								'<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
    								'</a>';
    
    	var windowMarker4 = new google.maps.InfoWindow({
    		content: contentMarker4,
    		pixelOffset: new google.maps.Size(0, 205),
    	});
    	marker4.addListener('click', function () {
    		windowMarker4.open(map, marker4);
    		windowMarker1.close(map, marker1);
    		windowMarker2.close(map, marker2);
    		windowMarker3.close(map, marker3);
    		windowMarker5.close(map, marker5);
    		windowMarker6.close(map, marker6);
    		windowMarker7.close(map, marker7);
    		windowMarker8.close(map, marker8);
    		windowMarker9.close(map, marker9);
    		windowMarker10.close(map, marker10);
    	});
    
    	var marker5 = new google.maps.Marker({
    		position: point5,
    		map: map,
    		icon: customIcon,
    	});
    	var contentMarker5 = '<a href="#" class="map__objects-info">' +
    								'<img src="img/project-img5.jpg" alt="">' +
    								'<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
    								'</a>';
    
    	var windowMarker5 = new google.maps.InfoWindow({
    		content: contentMarker5,
    		pixelOffset: new google.maps.Size(0, 205),
    	});
    	marker5.addListener('click', function () {
    		windowMarker5.open(map, marker5);
    		windowMarker1.close(map, marker1);
    		windowMarker2.close(map, marker2);
    		windowMarker3.close(map, marker3);
    		windowMarker4.close(map, marker4);
    		windowMarker6.close(map, marker6);
    		windowMarker7.close(map, marker7);
    		windowMarker8.close(map, marker8);
    		windowMarker9.close(map, marker9);
    		windowMarker10.close(map, marker10);
    	});
    
    	var marker6 = new google.maps.Marker({
    		position: point6,
    		map: map,
    		icon: customIcon,
    	});
    	var contentMarker6 = '<a href="#" class="map__objects-info">' +
    								'<img src="img/project-img6.jpg" alt="">' +
    								'<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
    								'</a>';
    
    	var windowMarker6 = new google.maps.InfoWindow({
    		content: contentMarker6,
    		pixelOffset: new google.maps.Size(0, 205),
    	});
    	marker6.addListener('click', function () {
    		windowMarker6.open(map, marker6);
    		windowMarker1.close(map, marker1);
    		windowMarker2.close(map, marker2);
    		windowMarker3.close(map, marker3);
    		windowMarker4.close(map, marker4);
    		windowMarker5.close(map, marker5);
    		windowMarker7.close(map, marker7);
    		windowMarker8.close(map, marker8);
    		windowMarker9.close(map, marker9);
    		windowMarker10.close(map, marker10);
    	});
    
    	var marker7 = new google.maps.Marker({
    		position: point7,
    		map: map,
    		icon: customIcon,
    	});
    	var contentMarker7 = '<a href="#" class="map__objects-info">' +
    								'<img src="img/project-img7.jpg" alt="">' +
    								'<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
    								'</a>';
    
    	var windowMarker7 = new google.maps.InfoWindow({
    		content: contentMarker7,
    		pixelOffset: new google.maps.Size(0, 205),
    	});
    	marker7.addListener('click', function () {
    		windowMarker7.open(map, marker7);
    		windowMarker1.close(map, marker1);
    		windowMarker2.close(map, marker2);
    		windowMarker3.close(map, marker3);
    		windowMarker4.close(map, marker4);
    		windowMarker5.close(map, marker5);
    		windowMarker6.close(map, marker6);
    		windowMarker8.close(map, marker8);
    		windowMarker9.close(map, marker9);
    		windowMarker10.close(map, marker10);
    	});
    
    	var marker8 = new google.maps.Marker({
    		position: point8,
    		map: map,
    		icon: customIcon,
    	});
    	var contentMarker8 = '<a href="#" class="map__objects-info">' +
    								'<img src="img/project-img8.jpg" alt="">' +
    								'<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
    								'</a>';
    
    	var windowMarker8 = new google.maps.InfoWindow({
    		content: contentMarker8,
    		pixelOffset: new google.maps.Size(0, 205),
    	});
    	marker8.addListener('click', function () {
    		windowMarker8.open(map, marker8);
    		windowMarker1.close(map, marker1);
    		windowMarker2.close(map, marker2);
    		windowMarker3.close(map, marker3);
    		windowMarker4.close(map, marker4);
    		windowMarker5.close(map, marker5);
    		windowMarker6.close(map, marker6);
    		windowMarker7.close(map, marker7);
    		windowMarker9.close(map, marker9);
    		windowMarker10.close(map, marker10);
    	});
    
    	var marker9 = new google.maps.Marker({
    		position: point9,
    		map: map,
    		icon: customIcon,
    	});
    	var contentMarker9 = '<a href="#" class="map__objects-info">' +
    								'<img src="img/project-img5.jpg" alt="">' +
    								'<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
    								'</a>';
    
    	var windowMarker9 = new google.maps.InfoWindow({
    		content: contentMarker9,
    		pixelOffset: new google.maps.Size(0, 205),
    	});
    	marker9.addListener('click', function () {
    		windowMarker9.open(map, marker9);
    		windowMarker1.close(map, marker1);
    		windowMarker2.close(map, marker2);
    		windowMarker3.close(map, marker3);
    		windowMarker4.close(map, marker4);
    		windowMarker5.close(map, marker5);
    		windowMarker6.close(map, marker6);
    		windowMarker7.close(map, marker7);
    		windowMarker8.close(map, marker8);
    		windowMarker10.close(map, marker10);
    	});
    
    	var marker10 = new google.maps.Marker({
    		position: point10,
    		map: map,
    		icon: customIcon,
    	});
    	var contentMarker10 = '<a href="#" class="map__objects-info">' +
    								'<img src="img/project-img6.jpg" alt="">' +
    								'<span class="map__objects-name">Ein zweizeiliger Projektname</span>' +
    								'</a>';
    
    	var windowMarker10 = new google.maps.InfoWindow({
    		content: contentMarker10,
    		pixelOffset: new google.maps.Size(0, 205),
    	});
    	marker10.addListener('click', function () {
    		windowMarker10.open(map, marker10);
    		windowMarker1.close(map, marker1);
    		windowMarker2.close(map, marker2);
    		windowMarker3.close(map, marker3);
    		windowMarker4.close(map, marker4);
    		windowMarker5.close(map, marker5);
    		windowMarker6.close(map, marker6);
    		windowMarker7.close(map, marker7);
    		windowMarker8.close(map, marker8);
    		windowMarker9.close(map, marker9);
    	});
    JavaScript Anonymous, Jan 26, 2019

  • 1 Answers
  • 0
    We add the marker data into an array of objects - each contains the coordinates and content of the popup:



    const markersData = [
    { position: { lat: ..., lng: ... }, content: '...' },
    { position: { lat: ..., lng: ... }, content: '...' },
    ...
    ];


    Popup - one for all:



    const infoWindow = new google.maps.InfoWindow ();



    Create an array of markers:



    const markers = markersData.map(({ position, content }) => {
    const marker = new google.maps.Marker({ position, map });

    marker.addListener('click', () => {
    infoWindow.setContent(content);
    infoWindow.open(map, marker);
    });

    return marker;
    });


    Changing the icon - we will make a method that will set the active one for the specified marker, and the default for the rest (if you need to reset the current active one, pass null ):



    const setActiveIcon = marker => markers.forEach(n => n.setIcon(n === marker ? iconActive : icon));


    Everything .
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!