Simple example of google maps

Details
Written by: Stanko Milosev
Category: HTML
Hits: 1754
Here I want to have simplest example of google maps (in order to be able to copy paste it :) ) 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=yourKey&callback=initMap"></script>
    <title></title>
</head>
<body>

    <div id="map-canvas"></div>

    <script>
        function initMap() {
            var mapCanvas = document.getElementById('map-canvas');
            var mapOptions = {
                zoom: 6,
                center: { lat: -34.397, lng: 150.644},
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(mapCanvas, mapOptions);
        }
    </script>

<style>
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    #map-canvas {
        width: 100%; 
        height: 100%; 
    }
</style>

</body>
</html>

Twitter cards

Details
Written by: Stanko Milosev
Category: HTML
Hits: 2071
To control how your web page will look on Twitter use Twitter cards. To check how your web page will look on the Twitter before actually posting it use Card validator.As of mid 2022, preview functionality was removed from the Card Validator 919.

One my example of Twitter cards: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">

<head>
	<meta content="text/html; charset=UTF-8" name="Content-Type" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@milosev.com" />
    <meta name="twitter:creator" content="@stankomilosev" />
	<meta property="og:title" content="Test title" />	
    <meta property="og:url" content="http://www.milosev.com/gallery/allWithPics/india/www/index.html" />
    <meta property="og:image" content="http://www.milosev.com/gallery/allWithPics/india/thumbs/20191111_162437.jpg" />
    <meta property="og:description" content="Test description" />	
</head>

<body>
    test1
</body>

</html>
Here is test link.

Notice line: 

	<meta content="text/html; charset=UTF-8" name="Content-Type" />
Without that line it will not work.

Facebook open graph

Details
Written by: Stanko Milosev
Category: HTML
Hits: 2706
To control how your web page will look on Facebook use facebook open graph markup. To check how your web page will look on facebook before actually posting it use Open Graph Object Debugger Sharing Debugger.

One my example of facebook open graph: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">

	<head>
		<meta property="og:title" content="test" />
		<meta property="og:url" content="http://www.milosev.com/gallery/index.html" />
		<meta property="og:image" content="http://www.milosev.com/gallery/20180911_202614.jpg" />
		<meta property="fb:app_id" content="2128533190490272" />
		<meta property="og:description" content="Yo! This is a test!" />

	</head>
	
	<body>
	test
	</body>
	
</html>

Responsive Images

Details
Written by: Stanko Milosev
Category: HTML
Hits: 9850

One example with using srcset:

<!doctype html>
<html>

	<head>
	</head>
	
	<body>
		<img srcset="/large.jpg 900w,
					/medium.jpg 600w,
					/small.jpg 400w"
		 src="/large.jpg">
		</img>
	</body>

</html>

Check example here (try to resize window - but in Chrome incognito mode, to see medium image, width of the window has to be less then 600 and bigger then 400, every time when you want to resize the window to see another image you have to either clear the cache or close incognito window and open it again)

---

Another example with picture (art direction)

<!doctype html>
<html>

	<head>
	</head>
	
	<body>
	
		<picture>
			<source media="(min-width: 800px)" srcset="/large.jpg, /medium1.jpg 2x">
			<source media="(min-width: 450px)" srcset="/medium.jpg, /large1.jpg 2x">
			<img src="/small.jpg" srcset="/large1.jpg 2x">
		</picture>
		
	</body>

</html>

At this moment I have no idea what 2x means... Check the example here.

  1. Wrap table row to the next line
  2. Async and defer
  3. Overlay
  4. Dialog

Subcategories

HTML5

Page 1 of 3