Adding multiple markers with Google Maps API

Question

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.

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.

I can see that Google has multiple locations giving a quick description of what they are.

PS: I already have a key I just need to know how to include "X" number of markers with a description attached.

Attached is the link to googles example:

Google Maps API

Here is the code:

 <!DOCTYPE html>
<html>
  <head>
    <title>Place searches</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* 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;
      }
    </style>
    <script>
      // This example requires the Places library. Include the libraries=places
      // parameter when you first load the API. For example:
      // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

      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 < 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);
        });
      }
    </script>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" async defer></script>
  </body>
</html>

score 1 · Accepted Answer · answered Mar 06 '18 at 19:03

You need to try this:

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
    /* 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;
    }
</style>
</head>

<body>
<div id="map"></div>
<script>
    function initMap() {
        var myLatLng = {
            lat: -25.363,
            lng: 131.044
        };

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 4,
            center: myLatLng
        });

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: 'Hello World!'
        });
    }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Now I hope you got it, Source: https://developers.google.com/maps/documentation/javascript/examples/marker-simple — Neel Rathod, Mar 06 '18 at 19:04
What do I need to do to incorporate multiple markers that have descriptions? — alex_fields1, Mar 06 '18 at 19:16
You can pass multiple marker as an object in this : `var marker = new google.maps.Marker({ position: myLatLng, map: map, title: 'Hello World!' });` — Neel Rathod, Mar 06 '18 at 19:18

Adding multiple markers with Google Maps API

1 Answers1