将PHP变量传递给javascript以在Google地图上显示IP的位置[关闭]

Here on the same page U am using the php code to return an ip of domain and I would like to pass this php $ip variable to the below javascript code, in the button tag. How can I pass this php $ip variable into the below javascript code.

Here is the php submit part, without google maps:

<form method="post" action="">
    <input type="text"  name="name">
    <input type="submit" name="submit" value="submit">
</form>

<?php 
if(isset($_POST['submit']))
{
    $ip = gethostbyname($_POST['name']);
    echo $ip;
}
?>

Here is the javascript code in this code: I would like to pass above php $ip variable I would like to remove the input tag and button tag in this javascript code because their existing two input and submit button tags on the single page

My goal in this project is to lookup the location of the IP and show it on google maps.

<script type="text/javascript">
    $(function(){
        try{
            IPMapper.initializeMap("map");
            //IPMapper.addIPMarker("111.111.111.111");
        } catch(e){
            //handle error
        }
    });
</script>

<input id="ip" name="ip" type="text" />
    <button onclick="IPMapper.addIPMarker($('#ip').val());">Geocode</button>
    <div id="map" style="height: 500px;width:500px; ">
</div>

For reference: the IPMapper code in javascript

/*!
 * IP Address geocoding API for Google Maps
 * http://lab.abhinayrathore.com/ipmapper/
 * Last Updated: June 13, 2012
 */
var IPMapper = {
    map: null,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    latlngbound: null,
    infowindow: null,
    baseUrl: "http://freegeoip.net/json/",
    initializeMap: function(mapId){
        IPMapper.latlngbound = new google.maps.LatLngBounds();
        var latlng = new google.maps.LatLng(0, 0);
        //set Map options
        var mapOptions = {
            zoom: 1,
            center: latlng,
            mapTypeId: IPMapper.mapTypeId
        }
        //init Map
        IPMapper.map = new google.maps.Map(document.getElementById(mapId), mapOptions);
        //init info window
        IPMapper.infowindow = new google.maps.InfoWindow();
        //info window close event
        google.maps.event.addListener(IPMapper.infowindow, 'closeclick',
                function() {
                    IPMapper.map.fitBounds(IPMapper.latlngbound);
                    IPMapper.map.panToBounds(IPMapper.latlngbound);
                });
    },
    addIPArray: function(ipArray){
        ipArray = IPMapper.uniqueArray(ipArray); //get unique array elements
        //add Map Marker for each IP
        for (var i = 0; i < ipArray.length; i++){
            IPMapper.addIPMarker(ipArray[i]);
        }
    },
    addIPMarker: function(ip){
        ipRegex = /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/;
        if($.trim(ip) != '' && ipRegex.test(ip)){ //validate IP Address format
            var url = encodeURI(IPMapper.baseUrl + ip + "?callback=?"); //geocoding url
            $.getJSON(url, function(data) { //get Geocoded JSONP data
                if($.trim(data.latitude) != '' && data.latitude != '0' && !isNaN(data.latitude)){ //Geocoding successfull
                    var latitude = data.latitude;
                    var longitude = data.longitude;
                    var contentString = "";
                    $.each(data, function(key, val) {
                        contentString += '<b>' + key.toUpperCase().replace("_", " ") + ':</b> ' + val + '<br />';
                    });
                    var latlng = new google.maps.LatLng(latitude, longitude);
                    var marker = new google.maps.Marker({ //create Map Marker
                        map: IPMapper.map,
                        draggable: false,
                        position: latlng
                    });
                    IPMapper.placeIPMarker(marker, latlng, contentString); //place Marker on Map
                } else {
                    IPMapper.logError('IP Address geocoding failed!');
                    $.error('IP Address geocoding failed!');
                }
            });
        } else {
            IPMapper.logError('Invalid IP Address!');
            $.error('Invalid IP Address!');
        }
    },
    placeIPMarker: function(marker, latlng, contentString){ //place Marker on Map
        marker.setPosition(latlng);
        google.maps.event.addListener(marker, 'click', function() {
            IPMapper.getIPInfoWindowEvent(marker, contentString);
        });
        IPMapper.latlngbound.extend(latlng);
        IPMapper.map.setCenter(IPMapper.latlngbound.getCenter());
        IPMapper.map.fitBounds(IPMapper.latlngbound);
    },
    getIPInfoWindowEvent: function(marker, contentString){ //open Marker Info Window
        IPMapper.infowindow.close()
        IPMapper.infowindow.setContent(contentString);
        IPMapper.infowindow.open(IPMapper.map, marker);
    },
    uniqueArray: function(inputArray){ //return unique elements from Array
        var a = [];
        for(var i=0; i<inputArray.length; i++) {
            for(var j=i+1; j<inputArray.length; j++) {
                if (inputArray[i] === inputArray[j]) j = ++i;
            }
            a.push(inputArray[i]);
        }
        return a;
    },
    logError: function(error){
        if (typeof console == 'object') { console.error(error); }
    }
}

Maybe...

<button onclick="IPMapper.addIPMarker($('<?php echo $ip ?>').val());">Geocode</button>

Not an expert on javascript

A better solution would be to add the data to the element and use an event listener.

<button data-ip-marker="<?= htmlspecialchars($ip) ?>">Geocode</button>

and in JavaScript

$(document).on('click', '[data-ip-marker]', function() {
    var marker = $('#' + this.getAttribute('data-ip-marker'));
    if (marker.length) {
        IPMapper.addIPMarker(marker.val());
    }
});