Using Google Maps to make multiple markers on address input and button click

Question

I've looked at similar questions and can't quite figure this out, though I think I'm close.

The goal is to have a form which allows address input, and upon submit button click the address should be added as a marker on the already loaded map.

I've got garbled sample code all over the place, but here is what I've been working with(refactored from a Laravel 4 view):

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key="> // Placeholder API Key
    </script>
    <script type="text/javascript">
        function initialize() {
          var mapOptions = {
            center: new google.maps.LatLng(29.428459, -98.492433), // Centered on downtown SA by default
            zoom: 11
          };
          var map = new google.maps.Map(document.getElementById("map-canvas"),
              mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
        </script>
  </head>
  <body>
    <br>
        <div id="user-input-form" style="width: 500px; height: 200px; margin-left: 20px;">
            <input id="user-input" class="form-group form-control" name="user-input" type="text" value="112 E. Pecan St San Antonio TX 78205" placeholder="">
            <button id="user-input-btn" class="btn btn-default" action="">Submit</button>

            <p id="address-text"></p>
        </div>

        </div>
        <div id="map-canvas" style="width: 500px; height: 400px;"></div>


    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <script type="text/javascript">
      function addMarker() {        // Function to add markers on button click
          var marker = new google.maps.Marker({
              position: latlng,  // set to location which corresponds with user input?  Don't want to recenter map each time.
              map: map,
                draggable:false,
                animation: google.maps.Animation.DROP,
              title:"Marker #",
            icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
          });
      }

      $('#user-input-btn').click(function () {
            var address = $('#user-input').val();  // Grab value of input field above
            console.log(address);

            $('#address-text').text('You entered: ' + address);
            $('#address').text(address);

            // Call addMarker function?

      }); // end event from button click

    </script>
  </body>
</html>

Can anyone help me step through this? I'm trying to do something more complicated, but being able to:

Add markers via address submit through a form/button click.
Reset the map with a reset button to clear all the overlays.

Would be an awesome step forward.

Thank you

Answer 1

Okay thanks to kinakuta I was able to outline the following and implement it:

<script type="text/javascript">
    $('#addr-btn').click(function () {
        // Set variable address equal to user input
        var address = $('#addr-value').val();

        // Geocode address to get lat/lng
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'address': address }, function(result, status) {

            if (status == google.maps.GeocoderStatus.OK) {
              // console.log(result);

              var latLngObj = result[0]["geometry"]["location"];
              console.log(latLngObj);
            }

        // Create new marker based on lat/lng
        var marker = new google.maps.Marker({
            position: latLngObj,
            map: map,
            title:"Hello World!"
        });

            // Store marker in array to keep all markers on the page, and allow easy reset

        });
    });
</script>

Thanks!

Using Google Maps to make multiple markers on address input and button click

Question

1 answers

solution1
0 2014-07-19 02:26:12

Using Google Maps to make multiple markers on address input and button click

Question

1 answers

solution1 0 2014-07-19 02:26:12

solution1
0 2014-07-19 02:26:12