Skip to main content

Google Map with Multiple color Markers PHP – JavaScript/jQuery

In this tutorial We will learn how to display responsive Google Map with multiple color marker, It is also dedicated to one requester who submitted a request throw our Request a Tutorial page for Making Google map area to fit all markers inside map we also cover that point here.

Try Demo

Google Map Api

We will use gmaps JavaScript to display Google map with multiple Latitudes and longitudes data to show our different color marker pins. We will also use Google Map Geocode Api to fetch Lat and lng from location name.

PHP array for Multiple Location

Fetching Lat, Lng and address information from above array with the help of Google Map Geocode API

How to play Youtube video as page background using jQuery ?

You might have seen some website which have video played on the background which automatically fit to screen and play when you access the page. Today I will show you how you can set Youtube video as page background using jQuery.

Watch Demo

jQuery Background video

We will use jQuery backround video V1.0 for our example, jQuery background video V1.0 is the plugin that lets you set the youtube video as page background.

Steps to add Youtube video as page backround

First of all create one index.html file and add following code, you need to add an id to <div>.

 

Youtube Like Progress bar using jQuery Nprogress.js

If you ever notice on Youtube you have seen a progress bar on top of the page, which shows you the page loading time. Now a days most of the Apps and Web pages are using this kind of Progress effect to attract viewer and force them to stay for few seconds on page until it loads.

The dynamic in-site progress bar on Youtube shows the loading animation on the top header area till the video or page load completely in the browser. Normally loaders are the rounded .gif images with different effects, which shows a progress but here the progress loader bar is actually a slim progressive line on the top of the header, which loads from left to right or vise versa until the page finish the loading stage.