1

I just tried to build a new project about gis applications that can store locations in the mysql database, since the Google map is paid I want to try the free ones, it's just TomTom, I'm just confused about how to convert this code to Tomtom map, especially in the draggable marker so that the map can be saved and will point back to the same folder when called from the database. Please help. thanks

<div class="page-header">
    <h1>Add Some</h1>
</div>
<form method="post" action="?m=add" enctype="multipart/form-data">    
    <div class="row">
        <div class="col-sm-6">
            <?php if($_POST) include'aksi.php'?>
            <div class="form-group">
                <label>Name <span class="text-danger">*</span></label>
                <input class="form-control" type="text" name="name" value="<?=$_POST['name']?>"/>
            </div>
            <div class="form-group">
                <label>Picture <span class="text-danger">*</span></label>
                <input class="form-control" type="file" name="pic" />
            </div>
            <div class="form-group">
                <label>Latitude <span class="text-danger">*</span></label>
                <input class="form-control" type="text" name="lat" id="lat" value="<?=$_POST['lat']?>"/>
            </div>
            <div class="form-group">
                <label>Longitude <span class="text-danger">*</span></label>
                <input class="form-control" type="text" id="lng" name="lng" value="<?=$_POST['lng']?>"/>
            </div>
            <div class="form-group">
                <label>Address <span class="text-danger">*</span></label>
                <input class="form-control" type="text" name="address" value="<?=$_POST['address']?>"/>
            </div>
            <div class="form-group">
                <label>Keterangan</label>
                <textarea class="mce" name="keterangan"><?=$_POST['keterangan']?></textarea>
            </div>
            <div class="form-group">
                <button class="btn btn-primary"><span class="glyphicon glyphicon-save"></span> Save</button>
                <a class="btn btn-danger" href="?m=tempat"><span class="glyphicon glyphicon-arrow-left"></span> Back</a>
            </div>        
        </div>
        <div class="col-sm-6">
            <div id="map" style="height: 400px;"></div>
        </div>        
    </div>
</form>


<script>
var defaultCenter = {
    lat : <?=get_option('default_lat')?>, 
    lng : <?=get_option('default_lng')?>
};

function initMap() {

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: <?=get_option('default_zoom')?>,
    center: defaultCenter 
  });

var marker = new google.maps.Marker({
    position: defaultCenter,
    map: map,
    title: 'Click to zoom',
    draggable:true
  });


    marker.addListener('drag', handleEvent);
    marker.addListener('dragend', handleEvent);

    var infowindow = new google.maps.InfoWindow({
        content: '<h4>Drag for move locate</h4>'
    });

    infowindow.open(map, marker);
}

function handleEvent(event) {
    document.getElementById('lat').value = event.latLng.lat();
    document.getElementById('lng').value = event.latLng.lng();
}

$(function(){
    initMap();
})

</script>
szogoon
  • 470
  • 3
  • 15
Nona Viral
  • 11
  • 2

1 Answers1

1

Doing this with TomTom Maps SDK for Web is very similar to your code.

map init:

var map = new tt.map({
    container: 'map',
    key: apikey
    style: 'tomtom://vector/1/basic-main'
});

Draggable marker:

var marker = new tt.Marker({draggable: true}).setLngLat(defaultCenter).addTo(map);

I also encourage you to check the migration tutorial: https://developer.tomtom.com/maps-sdk-web-js/tutorials/migrate-google-maps-tomtom

szogoon
  • 470
  • 3
  • 15