javascript変数のマップへのパスへ

Question

マップの緯度と経度をPHP変数に渡したいと思います。それは？ "Mirpur Stadium、Dhaka"のような検索された文字列を、javascriptから取得したphp変数に挿入して、検索した場所の場所URLをデータベースに挿入します私はPHP変数でJS変数を取得することでこれを行うことができます。誰も私のコードの必要な編集を手伝ってくれますか？

// 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] 
    }); 
} 
} 

Answer 1

あなたはPHPに直接Javascriptの変数を渡すことはできませんが、AJAXリクエストを使用してそれを行うことができます。例えば。

insert.phpで

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

、あなたは$ _GETを使用してデータを取得することができますに[ '緯度']、$ _GET [ 'LNG']など、データベースにそれを挿入します。

EDIT

全例：

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();