TechQA.

Pop-up info box in google maps

2.4k views Asked by At

I have the following code and would like some help adding pop-up info boxes for each custom marker. Currently I can set the coordinates for each marker in my code but I would also like to add additional information in a pop-up info box once the marker is clicked. I cant seem to get a pop-up info box to work 

<!DOCTYPE html>
<html>

<head>
  <title>Cycle Trails Map</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-    scalable=no">
  <meta charset="utf-8">
  <style>
    html,
    body,
    #map_canvas {
      width: 100%;
      height: 1000px;
      background-color: #2D333C;
    }
    #legend {
      font-family: Helvetica;
      color: #FFD900;
      background: rgba(0, 0, 0, 0.6);
      padding: 25px;
      margin: 25px;
      border: 1px solid #FFD900;
    }
    #legend h3 {
      margin-top: 0;
    }
    #legend img {
      vertical-align: middle;
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js"></script>
  <script>
    var map; // google map object
    var markers = []; // we well store the markers here 


    function initialize() {
      map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 6,
        center: new google.maps.LatLng(-41.269954, 174.225516),
        mapTypeId: google.maps.MapTypeId.TERRAIN,



        <!-- Let's style the map with custom colours and opacity -->   

        styles: [{
          featureType: 'poi.business',
          elementType: ' labels.icon',
          stylers: [{
            visibility: 'on'
          }, {
            hue: '#ff00db'
          }, {
            lightness: 0
          }, {
            saturation: 0
          }]
        }]
      });



      <!-- create KML layer -->

      var myKmlOptions = {
        preserveViewport: true,
        suppressInfoWindows: true
      }

      var kmlLayer_1 = new google.maps.KmlLayer("http://private.aatravel.co.nz/accommodation/1038668/proof14/final.kml", myKmlOptions);
      var kmlLayer_2 = new google.maps.KmlLayer("http://private.aatravel.co.nz/accommodation/1038668/proof14/sep.kml", myKmlOptions);
      kmlLayer_1.setMap(map);
      kmlLayer_2.setMap(map);







      <!-- Asynchronous Loading -->
      function loadScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +
          '&signed_in=true&callback=initialize';
        document.body.appendChild(script);
      }

      window.onload = loadScript;











      <!-- Let's create the legend -->


      var iconBase = 'https://i.imgur.com/';
      var icons = {
        travel: {
          name: 'AA Traveller office',
          icon: iconBase + '2BNbLmG.png'
        },
        isite: {
          name: 'I-Site',
          icon: iconBase + 'kx9a1sc.png'
        },

        accommodation: {
          name: 'Accommodation',
          icon: iconBase + 'BJ4o7ad.png'
        },

        camping: {
          name: 'Camping',
          icon: iconBase + 'EIcei8n.png'
        },


        food: {
          name: 'Food and Beverage',
          icon: iconBase + 'c5aaWcb.png'
        },


        toilets: {
          name: 'Toilets',
          icon: iconBase + 'ID2zzXg.png'
        },


        waters: {
          name: 'Drinking Water',
          icon: iconBase + '5u3yvH1.png'
        },


        todo: {
          name: 'Things to do',
          icon: iconBase + 'L3Z9xWv.png'
        },

        viewing: {
          name: 'Viewing points',
          icon: iconBase + 'DTf6oIp.png'
        }
      };
      <!-- Adding the markers now -->
      function addMarker(feature) {
        var marker = new google.maps.Marker({
          position: feature.position,
          icon: icons[feature.type].icon,
          map: map
        });
        markers.push({
          marker: marker,
          type: feature.type
        });
      }

      <!-- Add the legend locations -->


      var features = [
        <!-- AA Travel -->
        {
          position: new google.maps.LatLng(-36.750002, 174.729471),
          type: 'travel'
        },




        <!-- I Site -->
        {
          position: new google.maps.LatLng(-37.226583, 175.335536),
          type: 'isite'
        },





        <!-- Accommodation -->
        {
          position: new google.maps.LatLng(-36.807404, 175.144404),
          type: 'accommodation'
        },


        {
          position: new google.maps.LatLng(-39.808155, 175.474612),
          type: 'accommodation'
        },

        {
          position: new google.maps.LatLng(-41.776782, 171.504106),
          type: 'accommodation'
        },


        {
          position: new google.maps.LatLng(-43.820004, 172.965288),
          type: 'accommodation'
        },

        {
          position: new google.maps.LatLng(-44.626974, 169.317827),
          type: 'accommodation'
        },


        {
          position: new google.maps.LatLng(-46.522343, 168.455400),
          type: 'accommodation'
        },





        <!-- Camping -->
        {
          position: new google.maps.LatLng(-36.556301, 174.693964),
          type: 'camping'
        },






        <!-- Food and Beverage -->
        {
          position: new google.maps.LatLng(-38.368372, 176.847826),
          type: 'food'
        },





        <!-- Water -->
        {
          position: new google.maps.LatLng(-39.241622, 174.782397),
          type: 'waters'
        },







        <!-- Things to do -->
        {
          position: new google.maps.LatLng(-40.339016, 176.298510),
          type: 'todo'
        },






        <!-- Toilets -->
        {
          position: new google.maps.LatLng(-42.788153, 172.497240),
          type: 'toilets'
        },

        {
          position: new google.maps.LatLng(-41.878568, 173.837572),
          type: 'toilets'
        },





        <!-- Viewing spots -->
        {
          position: new google.maps.LatLng(-43.890775, 171.838061),
          type: 'viewing'
        },

        {
          position: new google.maps.LatLng(-37.676004, 178.429858),
          type: 'viewing'
        },

        {
          position: new google.maps.LatLng(-39.278658, 173.763491),
          type: 'viewing'
        }

      ];

      for (var i = 0, feature; feature = features[i]; i++) {
        addMarker(feature);
      }

      var legend = document.getElementById('legend');
      var i = 0;
      for (var key in icons) {
        var type = icons[key];
        var name = type.name;
        var icon = type.icon;
        var div = document.createElement('div');
        div.innerHTML = '<input checked="checked" type="checkbox" onchange="toggleType(this, event, \'' + key + '\')"><img src="' + icon + '"> ' + name;
        legend.appendChild(div);
        i++;
      }
      map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
    }

    function toggleType(elm, event, type) {
      var on = elm.checked;
      for (var i = 0; i < markers.length; i++) {
        if (markers[i].type == type) {
          markers[i].marker.setMap(on ? map : null);
        }
      }
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>

<body>
  <div id="map_canvas"></div>
  <div id="legend">
    <h3>Points of Interest</h3>
  </div>



</body>

</html>

javascript google-maps google-maps-api-3
Original Q&A
2

There are 2 answers

2
Nathanael Smith On BEST ANSWER

You'll want to read this: https://developers.google.com/maps/documentation/javascript/infowindows

Steps below with comments:

  1. Construct an infoWindow object new google.maps.InfoWindow()

  2. In the creation of each marker bind a click event to that marker. Pass at a minimum, the marker you created to that callback through a closure.

  3. The callback will setContent of the infoWindow. You'll probably want to dynamically create an html string and send it to setContent

  4. The callback will then open the info on the map over the clicked marker 

<!DOCTYPE html>
<html>

<head>
  <title>Cycle Trails Map</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-    scalable=no">
  <meta charset="utf-8">
  <style>
    html,
    body,
    #map_canvas {
      width: 100%;
      height: 1000px;
      background-color: #2D333C;
    }
    #legend {
      font-family: Helvetica;
      color: #FFD900;
      background: rgba(0, 0, 0, 0.6);
      padding: 25px;
      margin: 25px;
      border: 1px solid #FFD900;
    }
    #legend h3 {
      margin-top: 0;
    }
    #legend img {
      vertical-align: middle;
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js"></script>
  <script>
    var map; // google map object
    var markers = []; // we well store the markers here 


    function initialize() {
      map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 6,
        center: new google.maps.LatLng(-41.269954, 174.225516),
        mapTypeId: google.maps.MapTypeId.TERRAIN,



        <!-- Let's style the map with custom colours and opacity -->   

        styles: [{
          featureType: 'poi.business',
          elementType: ' labels.icon',
          stylers: [{
            visibility: 'on'
          }, {
            hue: '#ff00db'
          }, {
            lightness: 0
          }, {
            saturation: 0
          }]
        }]
      });



      <!-- create KML layer -->

      var myKmlOptions = {
        preserveViewport: true,
        suppressInfoWindows: true
      }

      var kmlLayer_1 = new google.maps.KmlLayer("http://private.aatravel.co.nz/accommodation/1038668/proof14/final.kml", myKmlOptions);
      var kmlLayer_2 = new google.maps.KmlLayer("http://private.aatravel.co.nz/accommodation/1038668/proof14/sep.kml", myKmlOptions);
      kmlLayer_1.setMap(map);
      kmlLayer_2.setMap(map);







      <!-- Asynchronous Loading -->
      function loadScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +
          '&signed_in=true&callback=initialize';
        document.body.appendChild(script);
      }

      window.onload = loadScript;











      <!-- Let's create the legend -->


      var iconBase = 'https://i.imgur.com/';
      var icons = {
        travel: {
          name: 'AA Traveller office',
          icon: iconBase + '2BNbLmG.png'
        },
        isite: {
          name: 'I-Site',
          icon: iconBase + 'kx9a1sc.png'
        },

        accommodation: {
          name: 'Accommodation',
          icon: iconBase + 'BJ4o7ad.png'
        },

        camping: {
          name: 'Camping',
          icon: iconBase + 'EIcei8n.png'
        },


        food: {
          name: 'Food and Beverage',
          icon: iconBase + 'c5aaWcb.png'
        },


        toilets: {
          name: 'Toilets',
          icon: iconBase + 'ID2zzXg.png'
        },


        waters: {
          name: 'Drinking Water',
          icon: iconBase + '5u3yvH1.png'
        },


        todo: {
          name: 'Things to do',
          icon: iconBase + 'L3Z9xWv.png'
        },

        viewing: {
          name: 'Viewing points',
          icon: iconBase + 'DTf6oIp.png'
        }
      };
      // make one infoWindow
      var infoWindow = new google.maps.InfoWindow();
      <!-- Adding the markers now -->
      function addMarker(feature) {
        var marker = new google.maps.Marker({
          position: feature.position,
          icon: icons[feature.type].icon,
          map: map
        });
        // bind a to the marker
        google.maps.event.addListener(marker, 'click', function() {
            openInfoWindow(marker, feature) // pass in feature as closure
        });
        markers.push({
          marker: marker,
          type: feature.type
        });
      }

      // generic callback whenever an info window is clicked
      function openInfoWindow(marker, feature) {
         // i'm unsure of where you're data will come to populate the infoWindow, it could come from the `feature` object (the same thing that you used to create the marker)
         infoWindow.setContent('<h3>Type: ' + feature.type + '<h3>');
         infoWindow.open(map, marker); // open the infoWindow above the marker. the maps API will bind the close button click for you. 
      
      }

      <!-- Add the legend locations -->


      var features = [
        <!-- AA Travel -->
        {
          position: new google.maps.LatLng(-36.750002, 174.729471),
          type: 'travel'
        },




        <!-- I Site -->
        {
          position: new google.maps.LatLng(-37.226583, 175.335536),
          type: 'isite'
        },





        <!-- Accommodation -->
        {
          position: new google.maps.LatLng(-36.807404, 175.144404),
          type: 'accommodation'
        },


        {
          position: new google.maps.LatLng(-39.808155, 175.474612),
          type: 'accommodation'
        },

        {
          position: new google.maps.LatLng(-41.776782, 171.504106),
          type: 'accommodation'
        },


        {
          position: new google.maps.LatLng(-43.820004, 172.965288),
          type: 'accommodation'
        },

        {
          position: new google.maps.LatLng(-44.626974, 169.317827),
          type: 'accommodation'
        },


        {
          position: new google.maps.LatLng(-46.522343, 168.455400),
          type: 'accommodation'
        },





        <!-- Camping -->
        {
          position: new google.maps.LatLng(-36.556301, 174.693964),
          type: 'camping'
        },






        <!-- Food and Beverage -->
        {
          position: new google.maps.LatLng(-38.368372, 176.847826),
          type: 'food'
        },





        <!-- Water -->
        {
          position: new google.maps.LatLng(-39.241622, 174.782397),
          type: 'waters'
        },







        <!-- Things to do -->
        {
          position: new google.maps.LatLng(-40.339016, 176.298510),
          type: 'todo'
        },






        <!-- Toilets -->
        {
          position: new google.maps.LatLng(-42.788153, 172.497240),
          type: 'toilets'
        },

        {
          position: new google.maps.LatLng(-41.878568, 173.837572),
          type: 'toilets'
        },





        <!-- Viewing spots -->
        {
          position: new google.maps.LatLng(-43.890775, 171.838061),
          type: 'viewing'
        },

        {
          position: new google.maps.LatLng(-37.676004, 178.429858),
          type: 'viewing'
        },

        {
          position: new google.maps.LatLng(-39.278658, 173.763491),
          type: 'viewing'
        }

      ];

      for (var i = 0, feature; feature = features[i]; i++) {
        addMarker(feature);
      }

      var legend = document.getElementById('legend');
      var i = 0;
      for (var key in icons) {
        var type = icons[key];
        var name = type.name;
        var icon = type.icon;
        var div = document.createElement('div');
        div.innerHTML = '<input checked="checked" type="checkbox" onchange="toggleType(this, event, \'' + key + '\')"><img src="' + icon + '"> ' + name;
        legend.appendChild(div);
        i++;
      }
      map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
    }

    function toggleType(elm, event, type) {
      var on = elm.checked;
      for (var i = 0; i < markers.length; i++) {
        if (markers[i].type == type) {
          markers[i].marker.setMap(on ? map : null);
        }
      }
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>

<body>
  <div id="map_canvas"></div>
  <div id="legend">
    <h3>Points of Interest</h3>
  </div>



</body>

</html>

0
Dimple On

Just declared variable infoWindow above addMarker and in its actionListener opened and set the content for infowindow

 google.maps.event.addListener(marker, 'click', function() {
           infoWindow.setContent('Hi');
           infoWindow.open(map,this);
        });

check out:

    var map; // google map object
    var markers = []; // we well store the markers here 


    function initialize() {
      map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 6,
        center: new google.maps.LatLng(-41.269954, 174.225516),
        mapTypeId: google.maps.MapTypeId.TERRAIN,



        <!-- Let's style the map with custom colours and opacity -->   

        styles: [{
          featureType: 'poi.business',
          elementType: ' labels.icon',
          stylers: [{
            visibility: 'on'
          }, {
            hue: '#ff00db'
          }, {
            lightness: 0
          }, {
            saturation: 0
          }]
        }]
      });



      <!-- create KML layer -->

      var myKmlOptions = {
        preserveViewport: true,
        suppressInfoWindows: true
      }

      var kmlLayer_1 = new google.maps.KmlLayer("http://private.aatravel.co.nz/accommodation/1038668/proof14/final.kml", myKmlOptions);
      var kmlLayer_2 = new google.maps.KmlLayer("http://private.aatravel.co.nz/accommodation/1038668/proof14/sep.kml", myKmlOptions);
      kmlLayer_1.setMap(map);
      kmlLayer_2.setMap(map);







      <!-- Asynchronous Loading -->
      function loadScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +
          '&signed_in=true&callback=initialize';
        document.body.appendChild(script);
      }

      window.onload = loadScript;











      <!-- Let's create the legend -->


      var iconBase = 'https://i.imgur.com/';
      var icons = {
        travel: {
          name: 'AA Traveller office',
          icon: iconBase + '2BNbLmG.png'
        },
        isite: {
          name: 'I-Site',
          icon: iconBase + 'kx9a1sc.png'
        },

        accommodation: {
          name: 'Accommodation',
          icon: iconBase + 'BJ4o7ad.png'
        },

        camping: {
          name: 'Camping',
          icon: iconBase + 'EIcei8n.png'
        },


        food: {
          name: 'Food and Beverage',
          icon: iconBase + 'c5aaWcb.png'
        },


        toilets: {
          name: 'Toilets',
          icon: iconBase + 'ID2zzXg.png'
        },


        waters: {
          name: 'Drinking Water',
          icon: iconBase + '5u3yvH1.png'
        },


        todo: {
          name: 'Things to do',
          icon: iconBase + 'L3Z9xWv.png'
        },

        viewing: {
          name: 'Viewing points',
          icon: iconBase + 'DTf6oIp.png'
        }
      };
      // make one infoWindow
      var infoWindow = new google.maps.InfoWindow();
      <!-- Adding the markers now -->
      function addMarker(feature) {
        var marker = new google.maps.Marker({
          position: feature.position,
          icon: icons[feature.type].icon,
          map: map
        });
        // bind a to the marker
        google.maps.event.addListener(marker, 'click', function() {
           infoWindow.setContent('Hi');
           infoWindow.open(map,this);
        });
        markers.push({
          marker: marker,
          type: feature.type
        });
      }

      // generic callback whenever an info window is clicked
      function openInfoWindow(marker, feature) {
         // i'm unsure of where you're data will come to populate the infoWindow
         infoWindow.setContent('ADD CONTENT HERE');
         infoWindow.open(map, marker); // open the infoWindow above the marker. the maps API will bind the close button click for you. 
      
      }

      <!-- Add the legend locations -->


      var features = [
        <!-- AA Travel -->
        {
          position: new google.maps.LatLng(-36.750002, 174.729471),
          type: 'travel'
        },




        <!-- I Site -->
        {
          position: new google.maps.LatLng(-37.226583, 175.335536),
          type: 'isite'
        },





        <!-- Accommodation -->
        {
          position: new google.maps.LatLng(-36.807404, 175.144404),
          type: 'accommodation'
        },


        {
          position: new google.maps.LatLng(-39.808155, 175.474612),
          type: 'accommodation'
        },

        {
          position: new google.maps.LatLng(-41.776782, 171.504106),
          type: 'accommodation'
        },


        {
          position: new google.maps.LatLng(-43.820004, 172.965288),
          type: 'accommodation'
        },

        {
          position: new google.maps.LatLng(-44.626974, 169.317827),
          type: 'accommodation'
        },


        {
          position: new google.maps.LatLng(-46.522343, 168.455400),
          type: 'accommodation'
        },





        <!-- Camping -->
        {
          position: new google.maps.LatLng(-36.556301, 174.693964),
          type: 'camping'
        },






        <!-- Food and Beverage -->
        {
          position: new google.maps.LatLng(-38.368372, 176.847826),
          type: 'food'
        },





        <!-- Water -->
        {
          position: new google.maps.LatLng(-39.241622, 174.782397),
          type: 'waters'
        },







        <!-- Things to do -->
        {
          position: new google.maps.LatLng(-40.339016, 176.298510),
          type: 'todo'
        },






        <!-- Toilets -->
        {
          position: new google.maps.LatLng(-42.788153, 172.497240),
          type: 'toilets'
        },

        {
          position: new google.maps.LatLng(-41.878568, 173.837572),
          type: 'toilets'
        },





        <!-- Viewing spots -->
        {
          position: new google.maps.LatLng(-43.890775, 171.838061),
          type: 'viewing'
        },

        {
          position: new google.maps.LatLng(-37.676004, 178.429858),
          type: 'viewing'
        },

        {
          position: new google.maps.LatLng(-39.278658, 173.763491),
          type: 'viewing'
        }

      ];

      for (var i = 0, feature; feature = features[i]; i++) {
        addMarker(feature);
      }

      var legend = document.getElementById('legend');
      var i = 0;
      for (var key in icons) {
        var type = icons[key];
        var name = type.name;
        var icon = type.icon;
        var div = document.createElement('div');
        div.innerHTML = '<input checked="checked" type="checkbox" onchange="toggleType(this, event, \'' + key + '\')"><img src="' + icon + '"> ' + name;
        legend.appendChild(div);
        i++;
      }
      map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
    }

    function toggleType(elm, event, type) {
      var on = elm.checked;
      for (var i = 0; i < markers.length; i++) {
        if (markers[i].type == type) {
          markers[i].marker.setMap(on ? map : null);
        }
      }
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  
 html,
    body,
    #map_canvas {
      width: 100%;
      height: 1000px;
      background-color: #2D333C;
    }
    #legend {
      font-family: Helvetica;
      color: #FFD900;
      background: rgba(0, 0, 0, 0.6);
      padding: 25px;
      margin: 25px;
      border: 1px solid #FFD900;
    }
    #legend h3 {
      margin-top: 0;
    }
    #legend img {
      vertical-align: middle;
    }
 <script src="https://maps.googleapis.com/maps/api/js"></script>
  <div id="map_canvas"></div>
  <div id="legend">
    <h3>Points of Interest</h3>
  </div>

Related Questions in JAVASCRIPT

Related Questions in GOOGLE-MAPS

Related Questions in GOOGLE-MAPS-API-3

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions