Category: Open Source Solutions

Getting a 610 error response from Google lately? Perhaps you have a bad API key? Not really it actually might be because Google deprecated support for their API V2…

Want to learn how to make a responsive google map for your site using PHP & HTML5 on API 3? here is how…

Note: In API V3 you do not require or use an api key.

Objectives:
Create a quick solution to produce responsive HTML5 Google Maps on the fly.

1. write HTML
2. write CSS
3. write php/curl function
4. example of use
5. sample

First we will begin with a quick HTML wrapper and to place our iframe in…

[cc lang=”html”]

[/cc]

Use CSS to control the iframe and wrapper, this will also keep iframe in widescreen/16:9

[cc lang=”css”]

.wrapper

{
height: 0;
padding-bottom: 56.25%; /* 16: 9 */
position: relative;
width: 100%;
margin: 0;
overflow: hidden;
}
iframe

{
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
border: 0;
overflow: hidden;
}

[/cc]

Now lets create the function that will generate a iframe tag on the fly by simply passing 1 value… an address
[cc lang=”php”]
# google map iframe generation
function gMap($a)
{
// setting up vars
$lat = ”;
$lon = ”;
$addr = $a;
$addr = urlencode($addr);
$u=”http://maps.googleapis.com/maps/api/geocode/json?address=”.$addr.”&sensor=false”; // URL
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $u);
curl_setopt($ch, CURLOPT_HEADER,0);
curl_setopt($ch, CURLOPT_USERAGENT, $_SERVER[“HTTP_USER_AGENT”]);
// Comment out the line below if you receive an error on certain hosts that have security restrictions
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$d = curl_exec($ch);
curl_close($ch);
$g = json_decode($d, true);
// Debugging Purposes… or if you wanna use additional data…
//echo ‘

';
//print_r($g);
//echo '

‘;
// If the Json request was successful…
if ($g)
{
$lat = $g[‘results’][0][‘geometry’][‘location’][‘lat’];
$lon = $g[‘results’][0][‘geometry’][‘location’][‘lng’];
$m = ‘‘;
echo $m;
} else {
echo ”

No Map Available

“;
}
}
[/cc]

Our php then goes inside the div
[cc lang=”php”]

[/cc]

An example of a running script
[cc lang=”php”]
< ?php # google map iframe generation function gMap($a) { // setting up vars $lat = ''; $lon = ''; $addr = $a; $addr = urlencode($addr); $u="http://maps.googleapis.com/maps/api/geocode/json?address=".$addr."&sensor=false"; // URL $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $u); curl_setopt($ch, CURLOPT_HEADER,0); curl_setopt($ch, CURLOPT_USERAGENT, $_SERVER["HTTP_USER_AGENT"]); // Comment out the line below if you receive an error on certain hosts that have security restrictions curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $d = curl_exec($ch); curl_close($ch); $g = json_decode($d, true); // Debugging Purposes... or if you wanna use additional data... //echo '

‘;

//print_r($g);

//echo

;

// If the Json request was successful…

if ($g)

{

$lat = $g[‘results’][0][‘geometry’][‘location’][‘lat’];

$lon = $g[‘results’][0][‘geometry’][‘location’][‘lng’];

$m = ‘‘;

echo $m;

} else {

echo ”
No Map Available
“;

}

}
?>


< ?php
// you can insert a var instead of string if you wish ex: gMap($address)
gMap('48034 Rancho Way Temecula CA, 92592');
?>


[/cc]
Let me know if you have any questions. :)