javascript variable pass to php in map

Question

I want to pass the lat and long of my map or the url of my searched location to a PHP variable and also the searched string in map to a PHP variable.can anyone suggest how to do that?I want to insert the searched string like "Mirpur Stadium,Dhaka" in a php variable that I get from the javascript and also the location url "http://......" of that searched place into my database.I can do this by getting the JS variables in a PHP variable.can anyone help me with necessary edit of my code?

// 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">

function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 23.685, lng: 90.3563},
  zoom: 11,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

google.maps.event.addListener(map, 'idle', savecoordinates);

function savecoordinates() {
  curcoordinates = map.getBounds();
  console.log(curcoordinates);
}

// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
  searchBox.setBounds(map.getBounds());
});

var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
  var places = searchBox.getPlaces();

  if (places.length == 0) {
    return;
  }

  // Clear out the old markers.
  markers.forEach(function(marker) {
    marker.setMap(null);
  });
  markers = [];

  // For each place, get the icon, name and location.
  var bounds = new google.maps.LatLngBounds();
  places.forEach(function(place) {
    var 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(25, 25)
    };

    // Create a marker for each place.
    markers.push(new google.maps.Marker({
      map: map,
      icon: icon,
      title: place.name,
      position: place.geometry.location
    }));

    if (place.geometry.viewport) {
      // Only geocodes have viewport.
      bounds.union(place.geometry.viewport);
    } else {
      bounds.extend(place.geometry.location);
    }
  });
  map.fitBounds(bounds);
});

setMarkers(map);
 }

 // Data for the markers consisting of a name, a LatLng and a zIndex for the
 // order in which these markers should display on top of each other.
 var beaches = [
['Dhaka', 23.777176, 90.399452, 4],
['Mirpur 10', 23.8375, 90.3753, 5],
['Shahbag', 23.7381, 90.3954, 3],
['Dhanmondi 5', 23.7459, 90.3852, 2],
['MIST Mirpur', 23.8383, 90.3606, 1]
];

function setMarkers(map) {
// Adds markers to the map.

// Marker sizes are expressed as a Size of X,Y where the origin of the image
// (0,0) is located in the top left of the image.

// Origins, anchor positions and coordinates of the marker increase in the X
// direction to the right and in the Y direction down.
var image = {
  url: 'map_icon.png',
  // This marker is 20 pixels wide by 32 pixels high.
  size: new google.maps.Size(20, 32),
  // The origin for this image is (0, 0).
  origin: new google.maps.Point(0, 0),
  // The anchor for this image is the base of the flagpole at (0, 32).
  anchor: new google.maps.Point(0, 32)
};
// Shapes define the clickable region of the icon. The type defines an HTML
// <area> element 'poly' which traces out a polygon as a series of X,Y points.
// The final coordinate closes the poly by connecting to the first coordinate.
var shape = {
  coords: [1, 1, 1, 20, 18, 20, 18, 1],
  type: 'poly'
};
for (var i = 0; i < beaches.length; i++) {
  var beach = beaches[i];
  var marker = new google.maps.Marker({
    position: {lat: beach[1], lng: beach[2]},
    map: map,
    icon: image,
    shape: shape,
    title: beach[0],
    zIndex: beach[3]
  });
}
}

Have you tried with AJAX??

Jenson M John
– Jenson M John

2016-05-01 10:20:31 +00:00
Commented May 1, 2016 at 10:20 — Jenson M John
– Jenson M John, Commented May 1, 2016 at 10:20
jenson555[at]gmail[dot]com

Jenson M John
– Jenson M John

2016-05-01 10:25:35 +00:00
Commented May 1, 2016 at 10:25 — Jenson M John
– Jenson M John, Commented May 1, 2016 at 10:25

Raaamy · Accepted Answer · 2016-05-01 10:22:30Z

1

You can't pass a Javascript variable directly to PHP, but you could do it using an AJAX request. E.g.

xhttp.open("GET", "insert.php?lat="+beach[1]+"&lng="+beach[2]+"&url="+encodeURI(input.value), true);
xhttp.send();

In insert.php, you can retrieve the data using $_GET['lat'], $_GET['lng'], etc. and insert it to your database.

EDIT

Full example:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
   if (xhttp.readyState == 4 && xhttp.status == 200) {
       console.log(xhttp.responseText);
   }
};
xhttp.open("GET", "insert.php?lat="+beach[1]+"&lng="+beach[2]+"&url="+encodeURI(input.value), true);
xhttp.send();

answered May 1, 2016 at 10:22

Raaamy

918 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

javascript variable pass to php in map

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related