CMS Made Simple Forums

Posted: **Wed Feb 08, 2017 12:18 am**

hi,

i'm making a multilingual website with a list of companies, that go in different categories.
Therefore i use the LISE module.

in the summary template i place a google map with a marker for each companie (if gps coordinates are given).

therefore i list the companies in a array

Code: Select all

var locations = [ 
		['Restaurant Oude Slavenhuis', -33.9138592, 19.1235733, 'http://example.com/restaurant-oude-slavenhuis'],
		['Chippa’s restaurant', -33.674854, 18.99512, 'http://example.com/chippa-s-restaurant'],
		['Island of Hope', -33.73181, 18.968473, 'http://example.com/island-of-hope']
];

Next i use some javascript to display a map and cycle trough the array to put the markers on the map.
the script is based on http://stackoverflow.com/a/42084403/2699569

Code: Select all

function initMap() {
		var map = new google.maps.Map(document.getElementById('gmap'), {
			center: {lat: -33.8132248, lng: 18.9981119},
			disableDefaultUI: true,
			draggable: false,
			zoomControl: false,
			scrollwheel: false,
			disableDoubleClickZoom: true,
			zoom: 10,
			styles: [
			{
				featureType: 'all',
				stylers: [
					{ saturation: -80 }
				]
			},
			{
				featureType: 'road.arterial',
				elementType: 'geometry',
				stylers: [
					{ hue: '#00ffee' },
					{ saturation: 50 }
				]
			},
			{
				featureType: 'poi',
				elementType: 'labels',
				stylers: [
					{ visibility: 'off' }
				]
			}
			]
		});


		for (i = 0; i < locations.length; i++) {  

			lat = locations[i][1];
			lng = locations[i][2];
			name = locations[i][0];

			marker = new google.maps.Marker({
				position: new google.maps.LatLng(lat,lng),
				name:name,
				map: map
			});

			google.maps.event.addListener( marker, 'click', function(e){
				infowindow.setContent( this.name );
				infowindow.open( map, this );
			}.bind( marker ) );
		}
	}

the only problem i have is that the infowindow does not open.
my temporary link for dev: http://sb.ws.rezium.eu/en/businesses/food-drinks/5/8

Posted: **Wed Feb 08, 2017 8:18 am**

My browser complains about 'infowindow' not being defined (you can see it too in the console).

I think you didn't do everything which is mentioned in the StackOverflow post.

Posted: **Wed Feb 08, 2017 8:57 am**

wauw,
it was late last night, i just didn't see that!

After defining the var infowindow, all worked.

Thanks for the feedback velden, lifesaver!

final code

Code: Select all

function initMap() {
      var map = new google.maps.Map(document.getElementById('gmap'), {
         center: {lat: -33.8132248, lng: 18.9981119},
         disableDefaultUI: true,
         draggable: false,
         zoomControl: false,
         scrollwheel: false,
         disableDoubleClickZoom: true,
         zoom: 10,
         styles: [
         {
            featureType: 'all',
            stylers: [
               { saturation: -80 }
            ]
         },
         {
            featureType: 'road.arterial',
            elementType: 'geometry',
            stylers: [
               { hue: '#00ffee' },
               { saturation: 50 }
            ]
         },
         {
            featureType: 'poi',
            elementType: 'labels',
            stylers: [
               { visibility: 'off' }
            ]
         }
         ]
      });

      var infowindow = new google.maps.InfoWindow(), marker, lat, lng;

      for (i = 0; i < locations.length; i++) { 

         lat = locations[i][1];
         lng = locations[i][2];
         name = locations[i][0];

         marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat,lng),
            name:name,
            map: map
         });

         google.maps.event.addListener( marker, 'click', function(e){
            infowindow.setContent( this.name );
            infowindow.open( map, this );
         }.bind( marker ) );
      }
   }

CMS Made Simple Forums

Lise + google maps JS API: Mutliple markers

Lise + google maps JS API: Mutliple markers

Re: Lise + google maps JS API: Mutliple markers

Re: Lise + google maps JS API: Mutliple markers