Getting Google Maps URL? :)

I've my own PHP script, like:

<?php

    <iframe width="425" height="350" frameborder="0" scrolling="no" src="' .$url .'"></iframe>

?>

As you can see it's default Google Map iframe (go to maps.google.com, type anything, then click "Link" on the right top and check code udner "Paste HTML to embed in website" to see how it look开发者_如何学JAVAs like).

The point is I want to create user friendly input for the $url variable.

At this moment users have to go to Google website, copy the second URL from the "Link", then delete everything else and put only the src= url in the input.

Is there a way to create Google Maps search on my site that will update my input with position data after searching?

It should look like that:

http://jsfiddle.net/rMLKJ/

---

I have set up a demo for you here

A simple php script obtains the co-ordinates using the google geocoding api

<?php

$address = $_GET['address'];
$address=str_replace(" ","+",$address);
if ($address) {
    $json = file_get_contents('http://maps.googleapis.com/maps/api/geocode/json?address='.$address.
    '&sensor=true');
    echo $json;
}

?>

I have used jQuery here to make the Ajax request. The latitude and longitude are parsed form the JSON returned by the PHP script and a marker is created to display the location on the map.

    function getMarker() {
    var address=$('#address').val();
    address=address.replace(/ /g,"+");

    $.getJSON("getjson.php?address="+address,
        function(data){
            lat=data.results[0].geometry.location.lat;
            lng=data.results[0].geometry.location.lng;
            point= new google.maps.LatLng(lat,lng);
            map.setCenter(point);
            zoom = 14;
            marker = createMarker(point,"<h3>Marker"+(markersArray.length+1)+"</h3>",zoom);

            var newLi=document.createElement("li");
            var newA=document.createElement("a");
            var newText = document.createTextNode("Marker "+(markersArray.length+1));
            newA.appendChild(newText);
            newLi.appendChild(newA);
            newA.setAttribute('onclick','displayMarker(this.innerHTML);');
            document.getElementById('marker_tabs').appendChild(newLi);
            markersArray.push(marker); 
        }   
    );

 }

Based on the search query entered by your user, google may return more than one results. Since this is only an example I have gone with the very first result.

---

You can use the google geocoder web service.

http://code.google.com/intl/en/apis/maps/documentation/geocoding/index.html

it's a http request to:

http://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=false

If you want to do it server side. You make the request from your php code , then you will have your coordinates, and you can pass them to the front-end.

If you want a client side approach you can make the request from javascript through ajax and then send the coordinates to the server using another ajax call.

---

Its very simple:

<?php $url = str_replace('&', '&amp;', $url).'&amp;output=embed'; ?>

<iframe width="425" height="350" frameborder="0" scrolling="no" src="<?php echo $url ?>"></iframe>

---

Check out the new way you can build such URLS using Google Maps URLs which are now a part of the Maps APIs offering.