saving marker data into db

Question

How to save a google maps marker data into mysql DB ? using php . And is it possible to prevent dragging that marker out of a certain country ? or maybe validating if the data is out of the wanted country when clicking on submit for example.

Answer 1

Yes, no problem.

The database part, you will have to do yourself. I provide you 'ajax.php'; where you receive the POST data. All I do, is print the SQL-string.

The country is Belgium, feel free to change this (now on line 39). When ever the client drops the marker anywhere but in Belgium, the marker is sent back to the position where the client started dragging

ajax.php

<?php
if($_SERVER['REQUEST_METHOD'] === 'POST') {
  $sql = "INSERT INTO markers (lat, lng) VALUES (". (float) $_POST['lat'] .", ". (float) $_POST['lng'] .");";
  echo $sql;
}
?>

index.php

<div id="map-canvas"></div>
<div class="controls">
  <input type="button" value="SAVE" id="save_marker">
</div>
<div id="display"></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>
<script>
///////////////////////
// Ajax / upload part
$(document).ready(function() {
  // initialize Google Maps
  initialize();
  // save marker to database
  $('#save_marker').click(function() {
    // we read the position of the marker and send it via AJAX
    var position = marker.getPosition();
    $.ajax({
      url: 'ajax.php',
      type: 'post',
      data: {
        lat: position.lat(),
        lng: position.lng()
      },
      success: function(response) {
        // we print the INSERT query to #display
        $('#display').html(response);
      }
    });
  });

});

///////////////////////
//Google Maps part
var map = null;
var marker = null;
var country = 'BE';  // Belgium.  Feel free to use this script on any other country

// Google Maps
function initialize() {
  var startDragPosition = null;
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(50.5, 4.5),  // Over Belgium
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  // set the new marker
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(50.5, 4.5),
    map: map,
    draggable: true
  });

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

  // set a callback for the start and end of dragging
  google.maps.event.addListener(marker,'dragstart',function(event) {
    // we remember the position from which the marker started.  
    // If the marker is dropped in an other country, we will set the marker back to this position
    startDragPosition = marker.getPosition();
  });
  google.maps.event.addListener(marker,'dragend',function(event) {
    // now we have to see if the country is the right country.  
    myGeocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK && results[1]) {
        var countryMarker = addresComponent('country', results[1], true);
        if (country != countryMarker) {
          // we set the marker back
          marker.setPosition(startDragPosition);
        }
      }
      else {
        // geocoder didn't find anything.  So let's presume the position is invalid
        marker.setPosition(startDragPosition);
      }
    });
  });
}

/**
*   geocodeResponse is an object full of address data.  
*   This function will "fish" for the right value
*   
*   example: type = 'postal_code' => 
*   geocodeResponse.address_components[5].types[1] = 'postal_code'
*   geocodeResponse.address_components[5].long_name = '1000'
* 
*   type = 'route' => 
*   geocodeResponse.address_components[1].types[1] = 'route'
*   geocodeResponse.address_components[1].long_name = 'Wetstraat'
*/
function addresComponent(type, geocodeResponse, shortName) {
  for(var i=0; i < geocodeResponse.address_components.length; i++) {
    for (var j=0; j < geocodeResponse.address_components[i].types.length; j++) {
      if (geocodeResponse.address_components[i].types[j] == type) {
        if (shortName) {
          return geocodeResponse.address_components[i].short_name;
        }
        else {
          return geocodeResponse.address_components[i].long_name;
        }
      }
    }
  }
  return '';
}
</script>
<style>
#map-canvas {
  height:400px;
}
</style>