Easiest way to learn various technology: 12/13/20

12/13/2020

How to add marker to google map for webpage, mobile page

This tutorial shows you how to add a simple Google map with a marker to a web page.

You should knowledge of HTML and CSS, and a little knowledge of JavaScript.

Sample Example for google map

Create Html

<!DOCTYPE html>

<html>

<head>

<script

src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&callback=initMap&libraries=&v=weekly"

defer

></script>

</head>

<body>

<h3>Sample Google Maps Demo</h3>

</body>

</html>

Create CSS

#map {

height: 400px;

/* The height is 400 pixels */

width: 100%;

/* The width is the width of the web page */

}

Create Javascript

// Initialize and add the map

function initMap() {

// The location

const uluru = { lat: -25.344, lng: 131.036 };

const map = new google.maps.Map(document.getElementById("map"), {

zoom: 4,

center: uluru,

});

const marker = new google.maps.Marker({

position: uluru,

map: map,

});

}

Follow these steps to get an API key:

Go to the Google Cloud Console.
Create or select a project.
Click Continue to enable the API and any related services.
On the Credentials page, get an API key (and set the API key restrictions).
To prevent quota theft and secure your API key, see Using API Keys.
(Optional) Enable billing.
Copy the entire code of this tutorial from this page, to your text editor.
Replace the value of the key parameter in the URL with your own API key (that's the API key that you've just obtained).
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Simple Steps - 1) create api 2) add above html, javascript 3) check it on webpage.

still if any issue please comment.

how to get geolocation with latitude and longitude

ask browser to allow location

function getLocation() {

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showPosition);

} else {

x.innerHTML = "Geolocation is not supported by this browser.";

}

using position.coords.latitude & position.coords.longitude we can get exact position in map

useful when adding google map to website or app, also track geolocation

no any other script or file required.

<!DOCTYPE html>

<html>

<body>

<p>Click the button to get your coordinates.</p>

<p><strong>Note:</strong> The geolocation property is not supported in IE8 and earlier versions.</p>

var x = document.getElementById("demo");

function getLocation() {

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showPosition);

} else {

x.innerHTML = "Geolocation is not supported by this browser.";

}

function showPosition(position) {

x.innerHTML = "Latitude: " + position.coords.latitude +

"<br>Longitude: " + position.coords.longitude;

}

</script>

</body>

</html>

Useful links

1) to get latitude and longitude - https://www.latlong.net/

2) google map API - https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap

how create JSON variable and store to localhost

i) create JSON - JavaScript object notation(JSON) can be defined in curly brace, & then stringify to variable.

myObj = { name: "John", age: 31, city: "New York" };

myJSON = JSON.stringify(myObj);

ii) store value to local Storage or database

localStorage.setItem("testJSON", myJSON); OR save this json to database

iii) get saved data

text = localStorage.getItem("testJSON");

obj = JSON.parse(text);

document.getElementById("hello").innerHTML = obj.name;

final code likes below,

<!DOCTYPE html>

<html>

<body>

<h2>Store and retrieve data from local storage.</h2>

var myObj, myJSON, text, obj;

// Storing data:

myObj = { name: "John", age: 31, city: "New York" };

myJSON = JSON.stringify(myObj);

localStorage.setItem("testJSON", myJSON);

// Retrieving data:

text = localStorage.getItem("testJSON");

obj = JSON.parse(text);

document.getElementById("hello").innerHTML = obj.name;

</script>

</body>

</html>

how to create Icons like social media, emoji, alert and other for website, app

icon can be created,

i) using font family

ii) using js file

iii) using html entity

iv) using css

- using awesome js - in this js all types icon available like emoji, alert, animation, social icon, media & so on.

<head>

<title>Font Awesome Icons</title>

</head>

<body>

<p>Some Font Awesome icons:</p>

- using font family

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

https://fonts.googleapis.com/icon?family=Material+Icons this is google icon

- using bootstrap - just use class name glyphicon, glyphicon-trash

<p>Trash icon on a button:

<span class="glyphicon glyphicon-trash"></span> Trash

</button>

</p>

all above fonts works on all devices, browser, responsive, easy to load , lightweight.

How to create Navigation menu using bootstrap

With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.

A standard navigation bar is created with navbar navbar-default.

Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.
Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.
Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.

navigation item add using nav-item

</li>

for dropdown use

product

</a>

<a class="dropdown-item" href="#">sample 1</a>

<a class="dropdown-item" href="#">sample 2</a>

<a class="dropdown-item" href="#">sample 3</a>

</div>

</li>

above all final code,

<!DOCTYPE html>

<head>

<title>Navingation menu with dropdown</title>

</head>

<body>

</li>

<a class="nav-link" href="#">about us</a>

</li>

product

</a>

<a class="dropdown-item" href="#">sample 1</a>

<a class="dropdown-item" href="#">sample 2</a>

<a class="dropdown-item" href="#">sample 3</a>

</div>

</li>

</ul>

</nav>

<br>

<h3>Navbar With Dropdown</h3>

<p>This example adds a dropdown menu in the navbar.</p>

</div>

</body>

</html>

how to create alert, toast, tooltip

in this tutorial give details of how to create alert OR toast OR tooltip on time basis, i.e. auto hide.

$(document).ready(function(){

$('#myBtn').click(function(){

$('.toast').toast({delay: 3000});

$('.toast').toast('show');

});

& call bootstrap supported files

finally, the code like below,

<!DOCTYPE html>

<head>

<title>alert style </title>

</head>

<body>

<h1>create toast or alert</h1>

<p>In this example, it will take 3 seconds to hide the toast(alert box), once it is shown. </p>

<button type="button" class="btn btn-primary" id="myBtn">Show Toast</button>

Toast Header

</div>

Some text inside the toast body

</div>

$(document).ready(function(){

$('#myBtn').click(function(){

$('.toast').toast({delay: 3000});

$('.toast').toast('show');

});

</script>

</body>

</html>

in above use jquery set delay in alert box and autohide.

useful to show messages or warning, success, error messages .

for example data is saved message for this also good to use toast.

how to create carousel or slider

carousel terms defined as multiple images with text or without text show after one by one within same block.

in below example shows slider which is fully responsive and auto timer just use css

.carousel-inner img {

width: 100%;

height: 100%;

}

add images and text

<h3>India</h3>

<p>sample text here</p>

</div>

finally , makes complete code as below

<!DOCTYPE html>

<head>

<title>carousel or slider Example</title>

<style>

/* Make the image fully responsive */

.carousel-inner img {

width: 100%;

height: 100%;

}

</style>

</head>

<body>

</ul>

<h3>India</h3>

<p>Sample text here</p>

</div>

<p>Thank you, asia!</p>

</div>

<h3>africa</h3>

<p>Sample Text here</p>

</div>

</a>

</a>

</div>

</body>

</html>

above code is very simple to use, fast load, responsive.

we can also create slider using other programming lanuage also like jquery slider, css slider

how to create pagination in html, bootstrap

1) create multiple page on single webpage

2) manage product or content or record from database using pagination method

3) large mysql data content want to fetch but it should easy to view in that case use pagination method.

4) Pagination is a method of dividing web content into discrete pages, thus presenting content in a limited and digestible manner. This method is usually employed to display resulting items on a website.

<!DOCTYPE html>

<head>

<title>Bootstrap Pagination</title>

</head>

<body>

<h2>Pagination</h2>

<p>this use to manage large content in pagination style like book content maintain over multiple pages because not possible on same page, control page size</p>

<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>

</ul>

<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>

</ul>

</div>

</body>

</html>

just call page-item class , in bootstrap all style are predefined with some class name , just find that class name and use it. for example page-link is default class in bootstrap

Thank you for viewing blog, please comment if any query.

how to create loading spinner or loading symbol

creating spinner or loader when loads webpage or any div or block , saving data state.

let us see small example,

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h2>Colored Spinners</h2>

<p>Use any color utilites to add a color to the spinner:</p>

</div>

</body>

</html>

in above example first call bootstrap.min.js and bootstrap.min.css, then use spinner-border class as above declare

Application - this is useful when loading page, loading div, or button when submit

Notes - above files bootstrap.min.js and bootstrap.min.css are free to use.

How to create Four column in html using simple method

in this blog show how to make four column of same webpage , using bootstrap.

let us see example,

<!DOCTYPE html>

<head>

<title>Four Column equal width</title>

</head>

<body>

<h1>Four equal width columns</h1>

<p>in this example shows setting equal column using bootstrap.</p>

<div class="col" style="background-color:lavender;">Column 1</div>

<div class="col" style="background-color:orange;">Column 2</div>

<div class="col" style="background-color:lavender;">Column 3</div>

<div class="col" style="background-color:lavender;">Column 4</div>

</div>

</body>

</html>

step 1) call bootstrap.min.js and bootstrap.min.css

step 2) create div class name 'container-fluid'

step 3) create 'col' class div , in above also increase class means you can create 10 or more class.

in any query please comment.

Easiest way to learn various technology

abc

12/13/2020

How to add marker to google map for webpage, mobile page

how to get geolocation with latitude and longitude

how create JSON variable and store to localhost

how to create Icons like social media, emoji, alert and other for website, app

How to create Navigation menu using bootstrap

how to create alert, toast, tooltip

how to create carousel or slider

how to create pagination in html, bootstrap

how to create loading spinner or loading symbol

How to create Four column in html using simple method

An Introduction to the Laravel Framework: What It Is and Why You Should Use It

Translate

Total Pageviews