How to allow the visitor to add any location to the map and how to save it in the database

Question

Actually I working on a website where user can add his business. And I want to give him a functionality to add any location on a map. As he saves his business details along with that map details should go to database so that after posting his business on website it should show that location on a map. In short, I want to allow the user to add his location on a map and on a website for that specific user map should show his location on a map. As I am new to all this I am getting confused how to do this. So please help me out. I searched for it on google but I am not getting any help for my problem. Thanks in advance....

Here is my tried code:

        <script type="text/javascript">
    function initialize() {
      var mapOptions = {
        center: new google.maps.LatLng(-33.8688, 151.2195),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

      var input = /** @type {HTMLInputElement} */(document.getElementById('searchTextField'));
      var autocomplete = new google.maps.places.Autocomplete(input);

      autocomplete.bindTo('bounds', map);

      var infowindow = new google.maps.InfoWindow();
      var marker = new google.maps.Marker({
        map: map
      });

      google.maps.event.addListener(autocomplete, 'place_changed', function() {
        infowindow.close();
        marker.setVisible(false);
        input.className = '';
        var place = autocomplete.getPlace();
        if (!place.geometry) {
          // Inform the user that the place was not found and return.
          input.className = 'notfound';
          return;
        }

        // If the place has a geometry, then present it on a map.
        if (place.geometry.viewport) {
          map.fitBounds(place.geometry.viewport);
        } else {
          map.setCenter(place.geometry.location);
          map.setZoom(17);  // Why 17? Because it looks good.
        }
        marker.setIcon(/** @type {google.maps.Icon} */({
          url: place.icon,
          size: new google.maps.Size(71, 71),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(17, 34),
          scaledSize: new google.maps.Size(35, 35)
        }));
        marker.setPosition(place.geometry.location);
        marker.setVisible(true);

        var address = '';
        if (place.address_components) {
          address = [
            (place.address_components[0] && place.address_components[0].short_name || ''),
            (place.address_components[1] && place.address_components[1].short_name || ''),
            (place.address_components[2] && place.address_components[2].short_name || '')
          ].join(' ');
        }
        var place = autocomplete.getPlace();
                document.getElementById('city2').value = place.name;
                document.getElementById('cityLat').value = place.geometry.location.lat();
                document.getElementById('cityLng').value = place.geometry.location.lng();
    var latitude = place.geometry.location.lat();
    var longitude = place.geometry.location.lng(); 
        infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
        infowindow.open(map, marker);
      });

      // Sets a listener on a radio button to change the filter type on Places
      // Autocomplete.
      function setupClickListener(id, types) {
        var radioButton = document.getElementById(id);
        google.maps.event.addDomListener(radioButton, 'click', function() {
          autocomplete.setTypes(types);
        });
      }

      setupClickListener('changetype-all', []);
      setupClickListener('changetype-establishment', ['establishment']);
      setupClickListener('changetype-geocode', ['geocode']);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

        </script>
    <style>
    #map-canvas, #map_canvas {
      height: 400px;
      width: 900px;
    }

    @media print {
      #map-canvas, #map_canvas {
        height: 400px;
        width: 900px;
      }
    }

    </style>
    </head>
    <body>
    <?php
    /*
     * Smarty plugin
     * -------------------------------------------------------------
     * File:     function.map.php
     * Type:     map
     * Name:     Map
     * Purpose:  Accept the keyword & find it on a map.
     * -------------------------------------------------------------
     */

     function smarty_function_map($params, &$smarty)
    {
        ?>

        <div id="panel">
        <label>Location/Area*</label><input id="searchTextField" type="text" size="50" placeholder="Enter Location/Area">
        <input type="text" id="city2" name="city2" />
        <input type="text" id="cityLat" name="cityLat" />
        <input type="text" id="cityLng" name="cityLng" />
        </div>
        <div id="map-canvas"></div>

        <?php

    }
    ?>
    </body>
    </html>

Answer 1

To allow users to add a marker to the map by clicking on it, you'll need to setup an event listener that will listen for any clicks on the map. Example:

var marker;

google.maps.event.addListener(map, 'click', function(event) {
  if ( marker ) {
    marker.setPosition(event.latLng);
  } else {
    marker = new google.maps.Marker({
      position: event.latLng,
      map: map,
      draggable:true
    });
  }
});

You'll also want to enable the user to drag the marker after they've plotted it. You can do this by setting the marker to draggable (I did this in the above example). You'll also need to listen for any changes by attaching an event listener to the marker in question:

google.maps.event.addListener(marker, 'dragend', function(){
    //Do something because marker has been dragged somewhere...
});

Finally, every time the map is clicked or a marker is dragged, you'll need to save the resulting latitude and longitude values in a hidden field(s) so that you can save the position in your database.