CODEWITHSUNDEEP
phpgoogle-mapsgoogle-maps-api-3
fomicz
fomicz

Reputation: 1792

Google Geocode API result displaying on map?

I'm reading Google's API but see no examples there, and all the other Googled-by-me examples are a bit old (about 1-2 years old, most are API-key-based :S).

I want a text input. Send button. And Iframe below.

How to display location on the map using my own input?

At this moment my iframe looks like that:

<iframe width="230" height="180" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="<?php echo $src ?>">

Input:

<input id="googleMaps" name="googleMaps" type="text" />

At this moment I"m trying with XML (but JSON is recommended as far as I know?), but I'm getting XML just text in my iframe, like:

This document had no style information.
<GeocodeResponse>
<status>
OK
</status>
<result>
<type>
locality
</type>
<type>
political
</type>
<formatted_address>
(...)

How to pass this data to Google and get map back? :)

Thanks a lot.

Upvotes: 0

Views: 1210

Answers (1)

Philar
Philar

Reputation: 3897

You need to use the Google Geocode API to reverse geocode your address to obtain the co-ordinate which can then be used to display the results on the map. For example for my address I post to address parameters as given in the url below

http://maps.googleapis.com/maps/api/geocode/json?address=154+Metro+Central+Heights+London+UK&sensor=true

Co-ordinates can be obtained from the resulting JSON as shown below

"geometry": {
      "location": {
        "lat": 51.5001524,
        "lng": -0.1262362
      }

PHP Code to obtain the JSON

<?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;
}

?>

The Javascript can be found here. The critical code which parses the JSON is given below

$.getJSON("getjson.php?address="+address,
        function(data){
            lat=data.results[0].geometry.location.lat;
            lng=data.results[0].geometry.location.lng;
                        //.... more map initialization code
                 }
);

I had already set up a working example for your previous question here which should help you understand how to generate markers on the map. Let me know in case you need further clarification.

Upvotes: 1

Related Questions