Google Maps API - Custom info windows for different markers

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 () {

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

                    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 () {
              'map'), marker);
                        InforObj[0] = infowindow;


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

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


You can add an info window:

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.

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.

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:

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

Appreciate your help :+1:t2:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.