title: Adding multiple markers with Google Maps API
body: <p>I am trying to use Google maps API for a website and I can't seem to get multiple locations to populate like Google has it in their example. </p>
  
  <p>Could anyone please let me know what I need to add to get 11 markers to show up that will give a description of what I want. </p>
  
  <p>I can see that Google has multiple locations giving a quick description of what they are. </p>
  
  <p>PS: I already have a key I just need to know how to include "X" number of markers with a description attached. </p>
  
  <p>Attached is the link to googles example: </p>
  
  <p><a href="https://developers.google.com/maps/documentation/javascript/examples/place-search" rel="nofollow noreferrer">Google Maps API</a></p>
  
  <p>Here is the code:</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Place searches&lt;/title&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;style&gt;
        /* Always set the map height explicitly to define the size of the div
         * element that contains the map. */
        #map {
          height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
          height: 100%;
          margin: 0;
          padding: 0;
        }
      &lt;/style&gt;
      &lt;script&gt;
        // This example requires the Places library. Include the libraries=places
        // parameter when you first load the API. For example:
        // &lt;script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&amp;libraries=places"&gt;
  
        var map;
        var infowindow;
  
        function initMap() {
          var pyrmont = {lat: -33.867, lng: 151.195};
  
          map = new google.maps.Map(document.getElementById('map'), {
            center: pyrmont,
            zoom: 15
          });
  
          infowindow = new google.maps.InfoWindow();
          var service = new google.maps.places.PlacesService(map);
          service.nearbySearch({
            location: pyrmont,
            radius: 500,
            type: ['store']
          }, callback);
        }
  
        function callback(results, status) {
          if (status === google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i &lt; results.length; i++) {
              createMarker(results[i]);
            }
          }
        }
  
        function createMarker(place) {
          var placeLoc = place.geometry.location;
          var marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location
          });
  
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(place.name);
            infowindow.open(map, this);
          });
        }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&amp;libraries=places&amp;callback=initMap" async defer&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>