Membuat Maps dengan HTML5 dan Javascript

Baik berbicara tentang Google Map  sangat membantu dan berguna untuk kita sebagai alat untuk menemukan tempat,  lokasi, maupun sebagai penuntun arah dan tujuan jalan kita. Nah pada kesempatan ini zlearn akan berbagi informasi mengenai tutorial bagaimana cara Membuat Maps dengan HTML5 dan Javascript . HTML5 dan Javascript dapat digunakan untuk membuat geolocation dengan api google map di HTML 5 dan Javacript.

Nah berikut script untuk membuat peta atau map dengan google map api HTML 5 dan Javascript.
Silahkan  buat file dengan nama index.html   atau Index.php.

<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script><div style='overflow:hidden;height:440px;width:700px;'><div id='gmap_canvas' style='height:440px;width:700px;'></div><div><small><a href="http://embedgooglemaps.com">Click here to generate your map!</a></small></div><div><small><a href="https://buywebsitetrafficreviews.org/post-a-review/">How did your web traffic go? Leave us a review!</a></small></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div><script type='text/javascript'>function init_map(){var myOptions = {zoom:10,center:new google.maps.LatLng(-0.789275,113.92132700000002),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(-0.789275,113.92132700000002)});infowindow = new google.maps.InfoWindow({content:'<strong>Zlearn.id</strong><br>indonesia<br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>

Setelah itu  buka dan jakankan di browsur anda atau anda bisa mengaksesenya di lewat wen server anda dam hasilnya akan seperti gambar berikut:
Example Geolocation HTML 5 Google Map

 Sekian tutorial dari zlearn semoga dapat bermanfaat dan membantu anda sekalian. Untuk menyesuaaikan lokasi anda anda dapat menggeneratenya di sini

Share this

Related Posts

Previous
Next Post »

Berita Unik

loading...