Google Maps API Geocode & Place markers

Question

I am trying to merge the code of this geocoding api example: https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple

with some previously working code for dropping markers on a map. here is my code:

<!DOCTYPE html>
<html>
  <head>
    <title>Remove 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;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
    </style>
  </head>
  <body>
    <div id="floating-panel">
      <input id="address" type="textbox" value="London, UK">
      <input id="submit" type="button" value="Geocode">
      <input onclick="deleteMarkers();" type=button value="Delete Markers">
    </div>
    <div id="map"></div>
    <p>Click on the map to add markers.</p>
    <script>

      // In the following example, markers appear when the user clicks on the map.
      // The markers are stored in an array.
      // The user can then click an option to hide, show or delete the markers.
      var map;
      var markers = [];

      function initMap() {
        var haightAshbury = {lat: 51.5074, lng: 0.1278};

        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 15,
          center: haightAshbury,
          mapTypeId: 'hybrid'
        });


        // This event listener will call addMarker() when the map is clicked.
        map.addListener('click', function(event) {
          addMarker(event.latLng);
        });

        // Adds a marker at the center of the map.
        //addMarker(haightAshbury);
      }

      // Adds a marker to the map and push to the array.
      function addMarker(location) {
        var marker = new google.maps.Marker({
          position: location,
          map: map
        });
        markers.push(marker);
      }

      // Sets the map on all markers in the array.
      function setMapOnAll(map) {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(map);
        }
      }

      // Removes the markers from the map, but keeps them in the array.
      function clearMarkers() {
        setMapOnAll(null);
      }

      // Shows any markers currently in the array.
      function showMarkers() {
        setMapOnAll(map);
      }

      // Deletes all markers in the array by removing references to them.
      function deleteMarkers() {
        clearMarkers();
        markers = [];
      }
      var geocoder = new google.maps.Geocoder();

        document.getElementById('submit').addEventListener('click', function() {
          geocodeAddress(geocoder, map);
        });
      }

      function geocodeAddress(geocoder, resultsMap) {
        var address = document.getElementById('address').value;
        geocoder.geocode({'address': address}, function(results, status) {
          if (status === 'OK') {
            resultsMap.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
              map: resultsMap,
              position: results[0].geometry.location
            });
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXX&callback=initMap">
    </script>
  </body>
</html>

It was working before i tried to add geocoding, i have removed the API key for obvious reasons, any idea where i have gone wrong? I am relatively new to JavaScript so would love the feedback!

Answer 1

Your code will produce an error. You can solve it by moving these lines of code...

    var geocoder = new google.maps.Geocoder();

    document.getElementById('submit').addEventListener('click', function() {
      geocodeAddress(geocoder, map);
    });

...inside initMap() so that the function will look something like this:

  function initMap() {
    var haightAshbury = {lat: 51.5074, lng: 0.1278};

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: haightAshbury,
      mapTypeId: 'hybrid'
    });


    // This event listener will call addMarker() when the map is clicked.
    map.addListener('click', function(event) {
      addMarker(event.latLng);
    });

    // Adds a marker at the center of the map.
    //addMarker(haightAshbury);

    var geocoder = new google.maps.Geocoder();

    document.getElementById('submit').addEventListener('click', function() {
      geocodeAddress(geocoder, map);
    });
  }

Always remember to check for curly braces that doesn't have pairs.

Google Maps API Geocode & Place markers

Question

1 answers

solution1
1 2017-08-24 16:28:53

Google Maps API Geocode & Place markers

Question

1 answers

solution1 1 2017-08-24 16:28:53

solution1
1 2017-08-24 16:28:53