Google Maps API - Custom info windows for different markers

[oli_d111]

Using the Google Maps API, I’m trying to add another field to the window so that i can list the address.

I’m using place name as the company title but i need another field for the address and another field for the phone number. I tried adding another variable but it just crashed the whole map

After a lot of googling I can’t seem to find the answer that fits my code. Any help would be much appreciated.

var map;
            var InforObj = [];
            var centerCords = {
                lat: 52.7991657, 
                lng: -0.6153754
            };
            var markersOnMap = [{
                    placeName: "Distributor One",
                    LatLng: [{
                        lat: 51.7045719, 
                        lng: -0.5266157
                    }]
                },
                {
                    placeName: "Distributor Two",
                    LatLng: [{
                        lat: 51.8062958,
                        lng: 0.6089589
                    }]
                },
                {
                    placeName: "Distributor Three",
                    LatLng: [{
                        lat: 50.9332505,
                        lng: -2.6623158
                    }]
                },
                {
                    placeName: "Distributor Four",
                    LatLng: [{
                        lat: 54.0127617,
                        lng: -1.0813549
                    }]
                },


            ];

            window.onload = function () {
                initMap();
            };

            function addMarker() {
                for (var i = 0; i < markersOnMap.length; i++) {
                    var contentString = '<div id="content text-center"><h4>' + markersOnMap[i].placeName +
                        '</h4><p></p></div>';

                    const marker = new google.maps.Marker({
                        position: markersOnMap[i].LatLng[0],
                        map: map,
                        icon: {                             
                          url: "./uploads/markersm.png"                           }
                    });

                    const infowindow = new google.maps.InfoWindow({
                        content: contentString,
                        maxWidth: 200
                    });

                    marker.addListener('click', function () {
                        closeOtherInfo();
                        infowindow.open(marker.get('map'), marker);
                        InforObj[0] = infowindow;
                    });

                }
            }

            function closeOtherInfo() {
                if (InforObj.length > 0) {
                    InforObj[0].set("marker", null);
                    /* and close it */
                    InforObj[0].close();
                    /* blank the array */
                    InforObj.length = 0;
                }
            }

            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 6,
                    center: centerCords,

                });
                addMarker();
            }

[Rubble]

You can add an info window: https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

I would use php and a database as you can dynamically create the data rather than having to modify the JavaScript on the page every time you add or remove a marker.

[oli_d111]

Hi Rubble

Thanks for your message.

Great idea on the PHP, I’ll give it a go.

In regards to the info window. Currently each marker has an info window pop up that shows the company name.

I was wondering how to add another class in JS such as placeName so that I could put the company details in.

[Rubble]

I suppose you want a pop up for the company name which opens when you mouse over and a info box when you click on the marker.

Popup example from the Googlemap API site using the Title option: https://developers.google.com/maps/documentation/javascript/examples/marker-simple

[oli_d111]

Thanks Rubble. I probably should have looked deeper in the google docs.

Appreciate your help