Consider avoiding viewport values that prevent users from resizing documents Validation Error

So apparently this new rule/standard went into effect December 2016 causing this “Consider avoiding viewport values that prevent users from resizing documents” HTML5 validation error. To fix it make sure your:

 

Tag does not have the “maximum-scale=1.0” value, it’s that simple :)

 

*** UPDATE***

make sure you remove the following values:

  1. maximum-scale=1.0
  2. user-scalable=no

Source: https://github.com/validator/validator/commit/7cfc964d343cbd677beee32dad8f8e6ecab1210b

Thanks to Gaspard d’Hautefeuille for the update notice.

Google Maps Error 610 Bad Key, Responsive HTML5 Google Map API V3

 

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…

1
<div class="wrapper"></div>

 

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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;
}

 

Now lets create the function that will generate a iframe tag on the fly by simply passing 1 value… an address

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
# 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."&amp;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 '
<pre>';
//print_r($g);
//echo '
</pre>
';
// If the Json request was successful...
if ($g)
{
$lat = $g['
results'][0]['geometry']['location']['lat'];
$lon = $g['
results'][0]['geometry']['location']['lng'];
$m = '
<iframe src="https://maps.google.com/?q='.$addr.'&amp;ie=UTF8&amp;ll='.$lon.','.$lat.';t=m&amp;z=15&amp;iwloc=&amp;output=embed" width="320" height="240"></iframe>';
echo $m;
} else {
echo "

No Map Available

";
}
}

 

Our php then goes inside the div

1
2
3
4
5
6
7
8
9
<div class="wrapper">

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

?>

</div>

 

An example of a running script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<?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."&amp;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 '
<pre>';
//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 = '
<iframe src="https://maps.google.com/?q='.$addr.'&amp;ie=UTF8&amp;ll='.$lon.','.$lat.';t=m&amp;z=15&amp;iwloc=&amp;output=embed" width="320" height="240"></iframe>';
echo $m;
} else {
echo "

No Map Available

";
}
}

?>

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

Let me know if you have any questions. :)