In a recent client website, I needed to add Google iFrame maps with links to directions into a client’s contact page. To do this, I looked at the default iFrame code that Google maps generates and realized that to dynamically create a Google iFrame map that I would need both an address and coordinates.
Because all that I had to work with was the client’s addresses, I knew I’d need to geocode the address before I could generate the iFrame.
Geocoding with Google’s API
Geocoding an address through Google’s API is a fairly straightforward process. To do it, you just need to query the API like this:
[code lang=”php”]
$address = urlencode( "{$listings[‘address_1’]} {$listings[‘city’]} {$listings[‘state’]} {$listings[‘zip’]}" );
$response = json_decode( wp_remote_retrieve_body( wp_remote_get("http://maps.googleapis.com/maps/api/geocode/json?address={$address}&sensor=false") ), true );
[/code]
Querying the API like above will you results like these:
[code lang=”text”]
Array
(
[results] => Array
(
[0] => Array
(
[address_components] => Array
(
[0] => Array
(
[long_name] => 3410
[short_name] => 3410
[types] => Array
(
[0] => street_number
)
)
[1] => Array
(
[long_name] => Midwestern State University
[short_name] => Midwestern State University
[types] => Array
(
[0] => establishment
)
)
[2] => Array
(
[long_name] => Taft Boulevard
[short_name] => Taft Blvd
[types] => Array
(
[0] => route
)
)
[3] => Array
(
[long_name] => Wichita Falls
[short_name] => Wichita Falls
[types] => Array
(
[0] => locality
[1] => political
)
)
[4] => Array
(
[long_name] => Wichita County
[short_name] => Wichita County
[types] => Array
(
[0] => administrative_area_level_2
[1] => political
)
)
[5] => Array
(
[long_name] => Texas
[short_name] => TX
[types] => Array
(
[0] => administrative_area_level_1
[1] => political
)
)
[6] => Array
(
[long_name] => United States
[short_name] => US
[types] => Array
(
[0] => country
[1] => political
)
)
[7] => Array
(
[long_name] => 76308
[short_name] => 76308
[types] => Array
(
[0] => postal_code
)
)
)
[formatted_address] => 3410 Taft Boulevard, Midwestern State University, Wichita Falls, TX 76308, USA
[geometry] => Array
(
[location] => Array
(
[lat] => 33.8764591
[lng] => -98.5193496
)
[location_type] => ROOFTOP
[viewport] => Array
(
[northeast] => Array
(
[lat] => 33.877808080291
[lng] => -98.518000619708
)
[southwest] => Array
(
[lat] => 33.875110119708
[lng] => -98.520698580292
)
)
)
[types] => Array
(
[0] => street_address
)
)
)
[status] => OK
)
[/code]
First, notice that geocoding the above address returned a lot of information. Not only do we get the latitude and longitude back, but we also get the establishment listing, Midwestern State University in this case. From here it is a matter of pulling out the latitude and longitude we need and then putting these into the iFrame.
Generating Dynamic Google iFrames
Now that we have all of the information we need, we just need to plug it into the iFrames. Here is my completed example:
[code lang=”php”]
<?php
$listings = array(
array(
‘address’ => ‘3410 Taft Blvd’,
‘city’ => ‘Wichita Falls’,
‘state’ => ‘Tx’,
‘zip’ => 76308
)
)
foreach ( $listing as $listing ) {
$address = urlencode( "{$listings[‘address_1’]} {$listings[‘city’]} {$listings[‘state’]} {$listings[‘zip’]}" );
$response = json_decode( wp_remote_retrieve_body( wp_remote_get("http://maps.googleapis.com/maps/api/geocode/json?address={$address}&sensor=false") ), true );
$geometry = $response[‘results’][0][‘geometry’];
// echo $geometry[‘location’][‘lat’] . ‘,’ . $geometry[‘location’][‘lng’];
if( ‘OK’ == $response[‘status’] != ) {
?>
[googlemaps https://www.google.com/maps/?f=q&source=s_q&hl=en&geocode=&q=<?php echo $address; ?>&t=m&ll=<?php echo $geometry[‘location’][‘lat’];?>, <?php echo $geometry[‘location’][‘lng’];?>&z=18&iwloc=&output=embed&w=100&h=300]
<a class="map" title="Get Directions" href="http://maps.google.com/maps?saddr=&daddr=<?php echo $address; ?>" target="_blank">
<small>Click for Directions</small>
</a>
<?php
}
}
[/code]
Questions, Comments, Bugs?
If you have any questions or comments, please leave a comment below. If you notice a bug or feel that you could make this better, please leave a comment here and/or on the public gist at https://gist.github.com/ebinnion/7ff42563ca63bb9bb6df
Leave a Reply