Google Map Membuat Marker

Baik untuk belajar google map untuk membuat marker atau tanda sebuah lokasi dalam peta adalah seperti contoh kode sederhana berikut ini.

var map;
    function initMap() {
        var opts = { 'center': new google.maps.LatLng(0.573352847556387, 123.01800082297996), 'zoom': 12, 'mapTypeId': google.maps.MapTypeId.ROADMAP }
        map = new google.maps.Map(document.getElementById('map'), opts);

                var marker = new google.maps.Marker({
            position: {lat: 0.573352847556387, lng:  123.01800082297996},
            map: map,
            title: 'ALIYANDINI TANGOI'
        });
            }
    google.maps.event.addDomListener(window, 'load', init_map);


Cukup mudah caranya. semoga bermanfaat. wassalam.

Google maps status plan

Membuat garis-garis lurus seperti jalur pesawat terbang di google maps api adalah seperti pada contoh berikut.


 var map;
    function initMap() {
        var opts = { 'center': new google.maps.LatLng(0.5769167874644966, 123.01858018012717), 'zoom': 12, 'mapTypeId': google.maps.MapTypeId.ROADMAP }
        map = new google.maps.Map(document.getElementById('map'), opts);

                  var myPlanCoordinates = [
            {lat: 0.5763202946497464, lng: 123.04684625421146}, {lat: 0.5666596898692929, lng: 123.06855912957963}, {lat: 0.5436761527824713, lng: 123.06216703210453}, {lat: 0.5498483970634752, lng: 123.05068775290499}, {lat: 0.5763202946497464, lng: 123.04684625421146}          ];
          
          var myPath = new google.maps.Polyline({
            path: myPlanCoordinates,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
          });

          myPath.setMap(map);    
    }
    
    google.maps.event.addDomListener(window, 'load', init_map);

Mengambil Latitude Longitude di Google Map

maps-google-picker-location

Bagaimana cara untuk mengambil posisi Latitude Longitude di Google Map dan memasukan nya ke form input ketika mouse di klik pada sebuat titik di map google. Berikut adalah kode untuk melakukan hal itu.

<!DOCTYPE html> 
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 <title>Google Maps Location Picker Marker</title>
 <style type="text/css"> 
 #map {
 margin: 10px;
 width: 600px;
 height: 300px; 
 padding: 10px;
 }
 </style>
 
</head>
<body>
 
<table> <form> <tr> <td>Latitude</td> <td> <input type="text" name='latitude' id='latitude'></td> </tr> <tr> <td>Longitude</td> <td><input type="text" name='longitude' id='longitude'></td> </tr> </form> </table> var map; function initMap() { var opts = { 'center': new google.maps.LatLng(-6.952928, 107.638431), 'zoom': 12, 'mapTypeId': google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById('map'), opts); google.maps.event.addListener(map,'click',function(event) { document.getElementById('latitude').value = event.latLng.lat(); document.getElementById('longitude').value = event.latLng.lng(); }); } google.maps.event.addDomListener(window, 'load', init_map); https://maps.googleapis.com/maps/api/js?key=MAP_KEY&callback=initMap </body> </html>

Mudah dan sederhana silahkan anda kembangkan sesuai dengan kebutuhan anda. semoga bermanfaat, wassalam.