Code | Bachors

.samping {
	position: absolute;
	top: 90px;
	right: 0px;
	width: 30%;
	height: 100%;
	overflow: auto;
}

.samping div {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}

#pano,
#rute {
	width: 50%;
	height: 600px;
	display: inline-block;
	vertical-align: top;
}

/* Optional: Makes the sample page fill the window. */
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}</style>
	</head>
	<body>
		<h1 align="center">Lihat <a href="https://www.youtube.com/watch?v=V41Uy-JQVL4" target="_BLANK">Tutorial</a></h1>

<p align="center">Marker, directions, panorama & distance matrix.</p>
  
<div id="map"></div>
	
<div class="samping">
	<div>
		<h3>Data perusahaan</h3>
		<input type="text" id="alamat" placeholder="Alamat" title="Alamat"/>
		<select id="type">
			<option value="parking">parking</option>
			<option value="library">library</option>
			<option value="info">info</option>
		</select>
		<textarea id="keterangan" placeholder="Keterangan" title="Keterangan"></textarea>
		<button id="add">Add Lokasi</button>
		<button id="hapus">Hapus semua Lokasi</button>
		<hr>
		<h3>Data user</h3>
		<input type="text" id="lokasi" placeholder="Lokasi saya sekarang" title="Lokasi saya sekarang" value="Tarogong, Garut"/>
		<button id="cari">Cari lokasi persuhaan terdekat</button>
	</div>			
</div>
		
<div id="pano">tempat unntuk menampilkan panorama lokasi</div><div id="rute">tempat unntuk menampilkan rute jalan</div>
		
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj2GrDSBy6ISeGg3aWUM4mn3izlA1wgt0&language=in&region=ID"></script>
		<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script><script>// GPS
var lokasiSaya = "Tarogong, Garut";

// Contoh data lokasi perusahaan
// atau ambil dari database
var perusahaan = [{
        "lat": "-6.8919604",
        "lng": "107.6156133",
        "alamat": "Dago, Bandung",
        "keterangan": "Aman ga ada begal",
        "type": "parking"
    },
    {
        "lat": "-7.7955798",
        "lng": "110.3694896",
        "alamat": "Yogyakarta, DIY",
        "keterangan": "Ayo membaca buku",
        "type": "library"
    },
    {
        "lat": "-7.2574719",
        "lng": "112.7520883",
        "alamat": "Surabaya",
        "keterangan": "Discon belanja",
        "type": "info"
    }
];

var map;
var lokasi = []; // penampung maker supaya bisa menampilkan banyak marker dan dinamis
var rute = []; // penampung rute

// merubah icon atau sobat bisa menggunakan icon sobat sendiri sesuai keinginan
// tinggal masukan url image.y di bawah
var iconBase = "https://maps.google.com/mapfiles/kml/shapes/";
var icons = {
    parking: {
        icon: iconBase + 'parking_lot_maps.png'
    },
    library: {
        icon: iconBase + 'library_maps.png'
    },
    info: {
        icon: iconBase + 'info-i_maps.png'
    }
}

findLokasi();
}

google.maps.event.addDomListener(window, 'load', initialize);

// fungsi untuk menampilkan data perusahaan ke maps
function findLokasi() {

var d = new google.maps.InfoWindow();
    var e;

$.each(perusahaan, function(i, b) {
        // membuat maker dari lat, lng
        e = new google.maps.Marker({
            position: new google.maps.LatLng(b.lat, b.lng),
            icon: icons[b.type].icon,
            map: map
        });

lokasi.push(e);

// membuat info window alamat
        google.maps.event.addListener(e, 'click', (function(a, i) {
            return function() {
                //	alert(a.position.lat());
                //	console.log(a.location);
                d.setContent('<div><h3>' + b.alamat + '</h3><p>' + b.keterangan + '</p>'
                    // tombol triger.y untuk menjalankan fungsi jarak
                    +
                    '<button class="detail" data-alamat="' + b.alamat + '" data-lat="' + b.lat + '" data-lng="' + b.lng + '">Detail</button></div>');
                d.open(map, a)
            }
        })(e, i))
    });
}

function addLokasi(alamat, keterangan, icon) {
    // kita buat dulu proses untuk mendapatka lat & lng berdasarkan alamat yang kita input
    $.ajax({
        type: "GET",
        url: 'https://maps.google.com/maps/api/geocode/json?address=' + alamat.replace(/\s+/g, '+') + '&sensor=false&key=AIzaSyCj2GrDSBy6ISeGg3aWUM4mn3izlA1wgt0',
        dataType: "json"
    }).done(function(data) {
        var d = new google.maps.InfoWindow();
        var e;
        var i;

// membuat maker dari lat, lng
        e = new google.maps.Marker({
            position: new google.maps.LatLng(data.results[0].geometry.location.lat, data.results[0].geometry.location.lng),
            icon: icons[icon].icon,
            map: map
        });

lokasi.push(e);

// membuat info window alamat
        google.maps.event.addListener(e, 'click', (function(a, i) {
            return function() {
                d.setContent('<div><h3>' + alamat + '</h3><p>' + keterangan + '</p>'
                    // tombol triger.y untuk menjalankan fungsi jarak
                    +
                    '<button class="detail" data-alamat="' + alamat + '" data-lat="' + data.results[0].geometry.location.lat + '" data-lng="' + data.results[0].geometry.location.lng + '">Detail</button></div>');
                d.open(map, a);
            }
        })(e, i));

var obj = {
            lat: data.results[0].geometry.location.lat,
            lng: data.results[0].geometry.location.lng,
            alamat: alamat,
            keterangan: keterangan,
            type: icon
        };

perusahaan.push(obj);

});
}

function hapusLokasi() {
    // cara.y yaitu kita set var lokasi = [] menjadi null
    for (var i = 0; i < lokasi.length; i++) {
        lokasi[i].setMap(null)
    }

// data lokasi perusahaan
    perusahaan = [];
}

function hapusRute() {
    // cara.y yaitu kita set var rute = [] menjadi null
    for (var i = 0; i < rute.length; i++) {
        rute[i].setMap(null)
    }
}

// kita buat funsi jarak
function jarak(alamat) {
    var a = new google.maps.DirectionsService();
    var b = new google.maps.DirectionsRenderer({
        preserveViewport: true
    });
    // menamppilkan rute di maps
    b.setMap(map);
    // menamppilkan rute di div #rute
    b.setPanel(document.getElementById('rute'));
    // menambahkan rute baru ke array rute
    rute.push(b);
    // data request
    var request = {
        origin: lokasiSaya,
        destination: alamat,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    a.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            b.setDirections(response);
        }
    });

}

function arraySearch(arr, val) {
    for (var i = 0; i < arr.length; i++)
        if (arr[i] === val)
            return i;
    return false;
}

// function.y sudah tinggal kita panggi function finLokasi.y
$(function() {

$("#add").click(function() {
        addLokasi($("#alamat").val(), $("#keterangan").val(), $("#type").val());
    });

$("#hapus").click(function() {
        hapusLokasi();
    });

$("#cari").click(function() {
        lokasiSaya = ($("#lokasi").val() == '' ? lokasiSaya : $("#lokasi").val());
        $("#rute").empty();
        hapusRute();
        jarakTerdekat($("#lokasi").val(), function(data) {
            jarak(perusahaan[data].alamat);
            lihatPano(perusahaan[data].lat, perusahaan[data].lng);
        });
    });

$("body").on('click', '.detail', function() {
        lokasiSaya = ($("#lokasi").val() == '' ? lokasiSaya : $("#lokasi").val());
        // mengosongkan div #rute dulu biar tidak numpuk rute.y (hanya menampilkan rute marker yang di klik)
        $("#rute").empty();
        // menghapus rute sebelum.y yang di maps
        hapusRute();
        // menampilkan rute baru
        jarak($(this).data('alamat'));
        // menampilkan panorama baru
        lihatPano($(this).data('lat'), $(this).data('lng'));
    });

});</script>
	</body>
</html>

Contoh javascript google maps api

May 09, 17 0 9527

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><style>@import url(//fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic);

html { 
	background: #222
}

body {
	font-size: 14px;
	font-family: 'PT Sans';
	line-height: 1.5;
}

a {
	color: #0088cc;
	text-decoration: none;
	outline: 0
}

a:hover,
a:focus {
	color: #005580
}

#setting {
	position: fixed;
	left: 10px;
	top: 10px;
	color: #f64c3f;
	cursor: pointer
}

#form {
	position: fixed;
	left: 50px;
	top: 10px;
	background: rgba(0,0,0,.8);
	padding: 10px;
	display: none
}

#form input {
	border: 0px;
	padding: 5px;
	margin-bottom: 5px
}

#form #go {
	float: right;
	background: #f64c3f;
	color: #fff
}

#form.show {
	display: block
}

#feed {
	width: auto;
	max-width: 400px;
	margin: 50px auto
}

.post {
	background: #fff;
	color: #1a1c21;
	width: 100%;
	margin-bottom: 30px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.9);
}

.post .content {
	padding: 15px;
}

.post .left {
    float: left;
    margin-right: 10px;
}

.post .left .fa {
    display: block;
	width: 48px;
	border-radius: 50%;
	font-size: 3em
}

.post .right {
    overflow: hidden;
    *overflow: visible;
}

.post .right .top {
	min-height: 20px;
}

.post .right .top .user {
	color: #1a1c21;
	font-weight: 700
}

.post .right .top .date {
    float: right;
    margin-left: 10px;
	color: #8b99a0;
	font-size: 12px;
}

.post .right .bottom {
	margin-top: 15px;
}

.post .media {
	vertical-align: middle;
	width: 100%;
	height: auto;
	min-height: 200px;
	border: 0px;
	margin-top: 5px;
}

.post.facebook .left .fa {
	color: #335591
}

.post.google .left .fa {
	color: #d34836
}

.post.vk .left .fa {
	color: #38618F
}

.post.twitter .left .fa {
	color: #3D8FAB
}

.post.soundcloud .left .fa {
	color: orange
}

.post.github .left .fa {
	color: #333
}

.post.instagram .left .fa {
	color: #8a3ab9
}

.post.youtube .left .fa {
	color: #e52d27
}</style>
	</head>
	<body>
		<a id="setting"><i class="fa fa-cogs fa-2x"></i></a>
	
		<div id="form">
			<input type="text" id="twitter" title="twitter" placeholder="twitter" value="bachors"/><br>
			<input type="text" id="facebook" title="facebook" placeholder="facebook" value="203532783129859"/><br>
			<input type="text" id="github" title="github" placeholder="github" value="bachors"/><br>
			<input type="text" id="google" title="google+" placeholder="google+" value="100217793741516090316"/><br>
			<input type="text" id="youtube" title="youtube" placeholder="youtube" value="bachorsan"/><br>
			<input type="text" id="soundcloud" title="soundcloud" placeholder="soundcloud" value="118174461"/><br>
			<input type="text" id="instagram" title="instagram" placeholder="instagram" value="261199158"/><br>
			<input type="text" id="vk" title="vk" placeholder="vk" value="324573775"/><br>
			<input type="submit" id="go" value="Feed" />
		</div>
	
		<div id="feed"></div>
		
		<p align="center" style="color:#fff">made with <i class="fa fa-heart" style="color:#f64c3f"></i> by @bachors.</p>
		<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script><script>/*****************
Coded by @bachors
******************/

$(document).ready(function() {
    tweet('bachors');
    instagram('261199158');
    google('100217793741516090316');
    facebook('203532783129859');
    vk('324573775');
    soundcloud('118174461');
    github('bachors');
    youtube('bachorsan');

$('#setting').click(function() {
        $('#form').toggleClass('show');
    });

$('#go').click(function() {
        $('#feed').empty();
        tweet(($('#twitter').val() != '' ? $('#twitter').val() : 'bachors'));
        instagram(($('#instagram').val() != '' ? $('#instagram').val() : '261199158'));
        google(($('#google').val() != '' ? $('#google').val() : '100217793741516090316'));
        facebook(($('#facebook').val() != '' ? $('#facebook').val() : '203532783129859'));
        vk(($('#vk').val() != '' ? $('#vk').val() : '324573775'));
        soundcloud(($('#soundcloud').val() != '' ? $('#soundcloud').val() : '118174461'));
        github(($('#github').val() != '' ? $('#github').val() : 'bachors'));
        youtube(($('#youtube').val() != '' ? $('#youtube').val() : 'bachorsan'));
        return false;
    });
});

function youtube(id) {
    $.ajax({
        url: 'https://www.googleapis.com/youtube/v3/channels?part=contentDetails&forUsername=' + id + '&key=AIzaSyCj2GrDSBy6ISeGg3aWUM4mn3izlA1wgt0',
        crossDomain: true,
        dataType: 'json'
    }).done(function(a) {
        var b = a.items[0].contentDetails.relatedPlaylists.uploads;
        _youtube(b)
    })
}

function _vk(id) {
    $.ajax({
        url: 'https://api.vk.com/method/users.get?name_case=nom&user_ids=' + id,
        crossDomain: true,
        dataType: 'jsonp'
    }).done(function(data) {
        $('.post.vk .user').html(data.response[0].first_name + ' ' + data.response[0].last_name);
    });
}

function strip_tags(input, allowed) {
    allowed = (((allowed || '') + '')
            .toLowerCase()
            .match(/<[a-z][a-z0-9]*>/g) || [])
        .join('');
    var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
        commentsAndPhpTags = /|<\?(?:php)?[\s\S]*?\?>/gi;
    return input.replace(commentsAndPhpTags, '')
        .replace(tags, function($0, $1) {
            return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
        });
}

Awesome Social Media Feed

Apr 29, 17 0 2468

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>body {
	background: #f5f5f5;
	color: #333;
	font-family: Arial
}
#demo {
	background: #fff;
	width: 450px;
	padding: 8px;
	border: 1px solid #ccc;
	margin: 50px auto
}
#status {
	width: 100%;
	border: none;
	box-sizing: border-box
}
#review {
	width: 100%;
	font-size: 12px;
	box-sizing: border-box;
	margin-top: 10px;
	display: none
}
#review a {
	color: #333;
	text-decoration: none
}
#review div {
	width: 100%;
	padding: 8px;
	border: 1px solid #ddd;
	box-sizing: border-box
}
#review img {
	width: 100%
}
#review h4,
#review p {
	margin: 0px;
	margin-bottom: 10px
}
#review span {
	color: #aaa;
	text-transform: uppercase
}
#review img.loading {
	width: 50px
}</style>
	</head>
	<body>
		<div id="demo">
	<textarea id="status" placeholder="Eg: Awesome http://ibacor.com :v"></textarea>
	<div id="review"></div>
</div>
		<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script><script>$('#status').keydown(function() {
    setTimeout(function() {
        var status = $('#status').val();
        
        // Find URL using regular expressions
        var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig,
            url = status.match(urlRegex);
        
        // url != null
        if(url){
            if(url.length > 0){
                $('#review').css("display", "block");
                $('#review').html('<center><img src="https://www.relaxtheback.com/skin/frontend/rwd/rtb/images/opc-ajax-loader.gif" class="loading"/></center>');
                
                // Extracting meta tag
                urlReview(url);
                
            }else{
                $('#review').css("display", "none");
            }
        }else{
            $('#review').css("display", "none");
        }
    }, 50)
});

// Getting cross domain data using YQL
function urlReview(url){
    var user_agent = "#Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36";
        
    $.get("https://query.yahooapis.com/v1/public/yql", {
        q: "SELECT content FROM data.headers WHERE url=\"" + url + "\" and ua=\"" + user_agent + "\"",
        format: "xml",
        env: "store://datatables.org/alltableswithkeys"
    }).done(function(xml) {
    
        // HTML DOM
        var html = $(xml).find("content").text();
        
        // Find meta tag
        var title = ($(html).filter("title").text() != null && $(html).filter("title").text() != undefined ? $(html).filter("title").text() : ''),
            description = ($(html).filter('meta[name="description"]').attr("content") != null && $(html).filter('meta[name="description"]').attr("content") != undefined ? $(html).filter('meta[name="description"]').attr("content") : ($(html).filter('meta[property="og:description"]').attr("content") != null && $(html).filter('meta[property="og:description"]').attr("content") != undefined ? $(html).filter('meta[property="og:description"]').attr("content") : '')),
            image = ($(html).filter('meta[property="og:image"]').attr("content") != null && $(html).filter('meta[property="og:image"]').attr("content") != undefined ? $(html).filter('meta[property="og:image"]').attr("content") : ($(html).find("img:eq(0)").attr("src") != null && $(html).find("img:eq(0)").attr("src") != undefined ? $(html).find("img:eq(0)").attr("src") : ''));
        
        // Find domain name
        var domain = url.toString().split("/");
                
        var review = '<a href="' + url + '" target="_BLANK">'
            + '<img src="' + image + '"/>'
            + '<div><h4>' + title + '</h4>'
            + '<p>' + description + '</p>'
            + '<span>' + domain[2] + '</span></div></a>';
        
        if(title != '' || description != '' || image != ''){
            $('#review').html(review);
        }
    });
}</script>
	</body>
</html>

URL Meta Tag Extractor Like Facebook

Apr 16, 17 0 1728

jQuery Prefix Input

Apr 14, 17 0 1681

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="//bachors.github.io/jquery-github-repos-feed/css/jgrfeed.css"><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/codemirror.min.css"><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/addon/dialog/dialog.min.css"><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
	</head>
	<body>
		<div id="jgrfeed"></div>
		<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/codemirror.min.js"></script><script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/mode/xml/xml.min.js"></script><script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/mode/javascript/javascript.min.js"></script><script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/mode/css/css.min.js"></script><script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/mode/htmlmixed/htmlmixed.min.js"></script><script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/addon/dialog/dialog.min.js"></script><script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/addon/search/searchcursor.min.js"></script><script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/addon/search/search.min.js"></script><script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script><script type="text/javascript" src="//bachors.github.io/jquery-github-repos-feed/js/jgrfeed.js"></script><script>$(function() {

var username = 'bachors', // username
	reponame = 'Chat-Realtime'; // reponame
			
	jgrfeed(username, reponame);

});</script>
	</body>
</html>

jQuery Github Repos Feed

Apr 14, 17 0 1192