tag:blogger.com,1999:blog-89690793471663461082024-03-19T04:46:25.041-07:00{EL}KODE{EL}KODE atau ELKODE adalah website tutorial pemrograman yang dibuat dengan cara yang simpel dan mudah.Anonymoushttp://www.blogger.com/profile/15420733430824087605noreply@blogger.comBlogger4125tag:blogger.com,1999:blog-8969079347166346108.post-76420094923666260112016-12-24T19:11:00.004-08:002016-12-24T19:11:43.542-08:00Tutorial Merubah Tema Default Google Maps<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheLPZ8vNWbvWFl8nITZUulTRbvaumeEdRPjsPPZyGAwvjAqEg5RuFPNHOew8LAlpboIovtRJ7e_PKtdIYWSJtKLeClcGiT9qbcXv8u8L4LweYHTIKb-NFT9zuxdF8iU3KhRXPiTga49V33/s1600/ScreenHunter_07+Dec.+18+19.38.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheLPZ8vNWbvWFl8nITZUulTRbvaumeEdRPjsPPZyGAwvjAqEg5RuFPNHOew8LAlpboIovtRJ7e_PKtdIYWSJtKLeClcGiT9qbcXv8u8L4LweYHTIKb-NFT9zuxdF8iU3KhRXPiTga49V33/s320/ScreenHunter_07+Dec.+18+19.38.jpg" width="320" /></a></div>
<br />Hello elpeople, untuk tutorial google maps ini, kita akan merubah thema default bawaan google maps, agar lebih berwarna-warni, langsung saja ya....<br /><br />File yang dibutuhkan hanya map.js, peta.html.<br /><br /><br /> Buka terlebih dahulu link ini<span style="background-color: white; color: #7b7b7b; font-family: sans-serif; font-size: 15px; letter-spacing: 0.21px;"> </span><span style="color: #7b7b7b; font-family: sans-serif;"><span style="font-size: 15px; letter-spacing: 0.21px;"><a href="https://mapstyle.withgoogle.com/">https://mapstyle.withgoogle.com/</a> </span></span><br />
<span style="color: #7b7b7b; font-family: sans-serif;"><span style="font-size: 15px; letter-spacing: 0.21px;"><br /></span></span>
<span style="background-color: white; color: #7b7b7b; font-family: sans-serif; font-size: 15px; letter-spacing: 0.21px;"><br /></span>Anonymoushttp://www.blogger.com/profile/15420733430824087605noreply@blogger.com0Balikpapan, Balikpapan City, East Kalimantan, Indonesia-1.2379274 116.8528526-1.4919319 116.53012910000001 -0.9839229 117.1755761tag:blogger.com,1999:blog-8969079347166346108.post-59348879650098007502016-12-24T19:10:00.000-08:002016-12-24T19:10:30.055-08:00Tutorial konversi MAPINFO ke SVGHello elpeople, kali ini kami akan share tentang tutorial bagaimana sih cara untuk Konversi file MapInfo ke SVG file.<br />
<br />
Tools :<br />
<br />
MapInfo v12<br />
Plugin MI2SVG - <a href="http://adf.ly/1gpji4" target="_blank">klik for download</a><br />
<br />
Bahan :<br />
Kalimantan_Branch [mapInfo] - <a href="http://adf.ly/1gpjcU" target="_blank">klik for download</a><br />
<br />
Step 1 - Sekarang buka file mapInfo nya<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvewsafPCqQwAjS53OFbMdyod6_7qyLgvJWMVRURDXkfMCEb43qpM6NHUYvh7dCm-Us1gh5zh1Q4Vd-Kbr0kskdnvCiIElluCMFfZGJd-wARsnts7ULY_4BpskiADtxeIZvBDmxR1FBBgf/s1600/tutormapinfo1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvewsafPCqQwAjS53OFbMdyod6_7qyLgvJWMVRURDXkfMCEb43qpM6NHUYvh7dCm-Us1gh5zh1Q4Vd-Kbr0kskdnvCiIElluCMFfZGJd-wARsnts7ULY_4BpskiADtxeIZvBDmxR1FBBgf/s400/tutormapinfo1.PNG" width="400" /></a></div>
<br />
<br />
Step 2 - Extrak file MI2SVG<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEY938qYag7OKg_2VkHoE72HcvKF2CoU1WVVsVtB4qH4-PSKAfvVWqjMa36Xn2yXOjYKT8PwimHW2AeJ7E-rEv3l8R5gyNOnCFEI4HckWtQSnvBxQfBpbgBM4dIO5ygZHtRLP_CIg_oCHD/s1600/tutormapinfo2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEY938qYag7OKg_2VkHoE72HcvKF2CoU1WVVsVtB4qH4-PSKAfvVWqjMa36Xn2yXOjYKT8PwimHW2AeJ7E-rEv3l8R5gyNOnCFEI4HckWtQSnvBxQfBpbgBM4dIO5ygZHtRLP_CIg_oCHD/s400/tutormapinfo2.PNG" width="400" /></a></div>
<br />
step 3 - Open MI2SVG.MBX<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpGXncYDSUvLOrPXt_37KVW-QvtYmNi1ctvnCkH1Lz6LptSeEKjGff-z4u0AE9b-zCv9qhx-f_7s3rb8S69tpEi2n9QidUMhCdR3ZkIRys9-3gg7RjzMweXua8P5_9-8IyxYgAfxjK56bP/s1600/tutormapinfo3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpGXncYDSUvLOrPXt_37KVW-QvtYmNi1ctvnCkH1Lz6LptSeEKjGff-z4u0AE9b-zCv9qhx-f_7s3rb8S69tpEi2n9QidUMhCdR3ZkIRys9-3gg7RjzMweXua8P5_9-8IyxYgAfxjK56bP/s400/tutormapinfo3.PNG" width="400" /></a></div>
<br />
step 4 - klik "convert map window to SVG file.." simpan di lokasi yang anda inginkan klik "SAVE"<br />
step 5 - Tunggu proses loading, SELESAI<br />
<br />
Sekian untuk tutorial <a href="http://elkode.blogspot.co.id/2016/12/cara-convert-mapinfo-ke-svg.html">"Cara Konversi MapInfo ke SVG"</a> jika ada yang ingin di tanyakan silahkan comment di bawah,. Terima kasih kurang lebih nya mohon di maafkan. see ya ^_^Anonymoushttp://www.blogger.com/profile/15420733430824087605noreply@blogger.com0Balikpapan, Balikpapan City, East Kalimantan, Indonesia-1.2379274 116.8528526-1.4919319 116.53012910000001 -0.9839229 117.1755761tag:blogger.com,1999:blog-8969079347166346108.post-43819753855120585242016-12-24T19:08:00.002-08:002016-12-24T19:08:48.998-08:00Tutorial Membuat GOOGLE MAPS API #2<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2P2arm63b7mYpEMQlKYqsiEHTOj0qjpEAdfPNPVWvzUffg4BqRM-UHYJb9WHk1x3Ys8lbV1w6D3RF07RsRxHLXsGQvyV01pYng_uTNcdYel_UDB6M73Ua5hJkgOvWoNimnotDTGOYaJ9r/s1600/ScreenHunter_04+Dec.+18+19.18.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2P2arm63b7mYpEMQlKYqsiEHTOj0qjpEAdfPNPVWvzUffg4BqRM-UHYJb9WHk1x3Ys8lbV1w6D3RF07RsRxHLXsGQvyV01pYng_uTNcdYel_UDB6M73Ua5hJkgOvWoNimnotDTGOYaJ9r/s320/ScreenHunter_04+Dec.+18+19.18.jpg" width="320" /></a></div>
<span style="background-color: white; box-sizing: border-box; color: #7b7b7b; font-family: sans-serif; font-size: 15px; letter-spacing: 0.21px;"><br /></span>
<span style="background-color: white; box-sizing: border-box; color: #7b7b7b; font-family: sans-serif; font-size: 15px; letter-spacing: 0.21px;">Hello elpeople, saya akan melanjutkan membuat icon marker dan menambahkan ke dalam peta.</span><br />
<span style="background-color: white; box-sizing: border-box; color: #7b7b7b; font-family: sans-serif; font-size: 15px; letter-spacing: 0.21px;"><br style="box-sizing: border-box;" /></span><span style="background-color: white; color: #7b7b7b; font-family: sans-serif; font-size: 15px; letter-spacing: 0.21px;"></span><span style="background-color: white; box-sizing: border-box; color: #7b7b7b; font-family: sans-serif; font-size: 15px; letter-spacing: 0.21px;">Kita hanya membutuhkan 2 file ini, peta.html, map.js, dan plugin tambahan dari google maps javascript.</span><br />
<span style="background-color: white; box-sizing: border-box; color: #7b7b7b; font-family: sans-serif; font-size: 15px; letter-spacing: 0.21px;"><br /></span>
<span style="background-color: white; box-sizing: border-box; color: #7b7b7b; font-family: sans-serif; font-size: 15px; letter-spacing: 0.21px;">1. peta.html</span><br />
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> <!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&libraries=places,visualization&key=AIzaSyBcgp9U9kqpa904ZaX8gsNYN3vojI2BfCE"></script>
<script type="text/javascript" src="map.js"></script>
</body>
</html>
</code></pre>
<br />
2. map.js
<br />
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: 200px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> // membuat loading fungsi pertama ketika halaman selesai di load
google.maps.event.addDomListener(window, 'load', init);
function init() {
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 5, //besar zoom in out
zoomControl: false, //tombol zoom di peta false/true = hide/show
mapTypeControl: false, //pilihan tombol type peta
scaleControl: false,
streetViewControl: false,
rotateControl: false,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(0.656732, 113.951602), // Long Lat Indonesia
//https://mapstyle.withgoogle.com/ membuat style peta agar bagus
styles:
[{"elementType":"geometry","stylers":[{"color":"#1d2c4d"}]},{"elementType":"labels","stylers":[{"visibility":"off"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#8ec3b9"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#1a3646"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"visibility":"off"}]},{"featureType":"administrative.country","elementType":"geometry.stroke","stylers":[{"color":"#4b6878"}]},{"featureType":"administrative.land_parcel","stylers":[{"visibility":"off"}]},{"featureType":"administrative.land_parcel","elementType":"labels.text.fill","stylers":[{"color":"#64779e"}]},{"featureType":"administrative.neighborhood","stylers":[{"visibility":"off"}]},{"featureType":"administrative.province","elementType":"geometry.stroke","stylers":[{"color":"#4b6878"}]},{"featureType":"landscape.man_made","elementType":"geometry.stroke","stylers":[{"color":"#334e87"}]},{"featureType":"landscape.natural","elementType":"geometry","stylers":[{"color":"#023e58"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#283d6a"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#6f9ba5"}]},{"featureType":"poi","elementType":"labels.text.stroke","stylers":[{"color":"#1d2c4d"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#023e58"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#3C7680"}]},{"featureType":"road","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#304a7d"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#98a5be"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#1d2c4d"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#2c6675"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#255763"}]},{"featureType":"road.highway","elementType":"labels.text.fill","stylers":[{"color":"#b0d5ce"}]},{"featureType":"road.highway","elementType":"labels.text.stroke","stylers":[{"color":"#023e58"}]},{"featureType":"transit","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"labels.text.fill","stylers":[{"color":"#98a5be"}]},{"featureType":"transit","elementType":"labels.text.stroke","stylers":[{"color":"#1d2c4d"}]},{"featureType":"transit.line","elementType":"geometry.fill","stylers":[{"color":"#283d6a"}]},{"featureType":"transit.station","elementType":"geometry","stylers":[{"color":"#3a4762"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#0e1626"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#4e6d70"}]}]
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using our element and options defined above
var mapkpi = new google.maps.Map(mapElement, mapOptions);
var markerNode = new google.maps.Marker({
position: new google.maps.LatLng (0.656732, 113.951602),
map: mapkpi,
animation: google.maps.Animation.BOUNCE,
icon: 'marker.ico',
title: 'Posisi Ku'
});
}
</code></pre>
<br />
<blockquote class="tr_bq">
<span style="background-color: white; color: #7b7b7b; font-family: sans-serif; font-size: 14px; font-style: italic; letter-spacing: 0.21px;">Jika ada pertanyaan untuk penjelasan script yang tidak dimengerti, bisa bertanya di kolom komentar!! Terimakasih,, happy coding!! :)</span></blockquote>
<blockquote class="tr_bq">
<a href="http://adf.ly/1gq550" target="_blank">Download File Lengkap</a></blockquote>
Anonymoushttp://www.blogger.com/profile/15420733430824087605noreply@blogger.com0Balikpapan, Balikpapan City, East Kalimantan, Indonesia-1.2379274 116.8528526-1.4919319 116.53012910000001 -0.9839229 117.1755761tag:blogger.com,1999:blog-8969079347166346108.post-24359902407177150452016-12-24T03:57:00.000-08:002016-12-24T03:57:07.471-08:00Tutorial Membuat GOOGLE MAPS API #1<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVQLWBbZ4S40SrnBEk8qDgCrVebYYJTvdi7wuhwFgd9Xa63vjdtZpHbm-gUkKNMl4z3OHu5LzPYuxJrzy3Is9farBjMVsWgxUPpEUHW_XQ570xym41VaGSUWKeHegnpYlQcEpAY-pV8u4U/s1600/ScreenHunter_03+Dec.+18+16.00.jpg" imageanchor="1"><img border="0" height="184" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVQLWBbZ4S40SrnBEk8qDgCrVebYYJTvdi7wuhwFgd9Xa63vjdtZpHbm-gUkKNMl4z3OHu5LzPYuxJrzy3Is9farBjMVsWgxUPpEUHW_XQ570xym41VaGSUWKeHegnpYlQcEpAY-pV8u4U/s320/ScreenHunter_03+Dec.+18+16.00.jpg" width="320" /></a></div>
<span style="background-color: white; color: #7b7b7b; font-family: sans-serif; font-size: 15px; letter-spacing: 0.21px;">Hello elpeople, kali ini kami akan share tentang tutorial bagaimana sih cara untuk membuat peta di script html, ini merupakan tutorial dasar dalam pembuatan peta google maps yang nanti bisa kita custome sesuai keinginan kita nanti. lets do it,,,</span><br />
<span style="background-color: white; color: #7b7b7b; font-family: sans-serif; font-size: 15px; letter-spacing: 0.21px;"><br /></span>
<span style="background-color: white; color: #7b7b7b; font-family: sans-serif; font-size: 15px; letter-spacing: 0.21px;">Kita hanya membutuhkan 2 file ini, peta.html, map.js, dan plugin tambahan dari google maps javascript.</span><br />
<span style="background-color: white; color: #7b7b7b; font-family: sans-serif; font-size: 15px; letter-spacing: 0.21px;"><br /></span>
<span style="background-color: white; color: #7b7b7b; font-family: sans-serif; font-size: 15px; letter-spacing: 0.21px;">1. peta.html</span><br />
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> <!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&libraries=places,visualization&key=AIzaSyBcgp9U9kqpa904ZaX8gsNYN3vojI2BfCE"></script>
<script type="text/javascript" src="map.js"></script>
</body>
</html>
</code></pre>
<br />
2. map.js<br />
<pre style="background: #f0f0f0; border: 1px dashed #cccccc; color: black; font-family: "arial"; font-size: 12px; height: auto; line-height: 20px; overflow: auto; padding: 0px; text-align: left; width: 99%;"><code style="color: black; word-wrap: normal;"> // membuat loading fungsi pertama ketika halaman selesai di load
google.maps.event.addDomListener(window, 'load', init);
function init() {
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 5,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(0.656732, 113.951602), // Long Lat Indonesia
//https://mapstyle.withgoogle.com/ membuat style peta agar bagus
styles: [{"elementType":"geometry","stylers":[{"color":"#ebe3cd"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#523735"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#f5f1e6"}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#c9b2a6"}]},{"featureType":"administrative.land_parcel","elementType":"geometry.stroke","stylers":[{"color":"#dcd2be"}]},{"featureType":"administrative.land_parcel","elementType":"labels.text.fill","stylers":[{"color":"#ae9e90"}]},{"featureType":"administrative.neighborhood","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"geometry","stylers":[{"color":"#eff49c"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#eff49c"}]},{"featureType":"poi","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#93817c"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#c9e7a1"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#447530"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#f5f1e6"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#fdfcf8"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#f8c967"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#e9bc62"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry","stylers":[{"color":"#e98d58"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry.stroke","stylers":[{"color":"#db8555"}]},{"featureType":"road.local","elementType":"labels.text.fill","stylers":[{"color":"#806b63"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"color":"#eff49c"}]},{"featureType":"transit.line","elementType":"labels.text.fill","stylers":[{"color":"#8f7d77"}]},{"featureType":"transit.line","elementType":"labels.text.stroke","stylers":[{"color":"#ebe3cd"}]},{"featureType":"transit.station","elementType":"geometry","stylers":[{"color":"#eff49c"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#7ec5fe"}]},{"featureType":"water","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#7ec5fe"}]}]
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using our element and options defined above
var isimap = new google.maps.Map(mapElement, mapOptions);
}
</code></pre>
<blockquote class="tr_bq">
Jika ada pertanyaan untuk penjelasan script yang tidak dimengerti, bisa bertanya di kolom komentar!!
Terimakasih,, happy coding!! :)</blockquote>
<blockquote class="tr_bq">
<a href="http://adf.ly/1gprFY" target="_blank">Download File Lengkap</a></blockquote>
Anonymoushttp://www.blogger.com/profile/15420733430824087605noreply@blogger.com0Balikpapan, Kota Balikpapan, Kalimantan Timur, Indonesia-1.2379274 116.8528526-1.4919319 116.53012910000001 -0.9839229 117.1755761