How to save marker and polyline in database?How to add polygon in MySQL databaseReference materials for...

How to show a landlord what we have in savings?

Assassin's bullet with mercury

Arrow those variables!

How to tell a function to use the default argument values?

Is it logically or scientifically possible to artificially send energy to the body?

Should I tell management that I intend to leave due to bad software development practices?

Reverse dictionary where values are lists

How can I determine if the org that I'm currently connected to is a scratch org?

One verb to replace 'be a member of' a club

How do I deal with an unproductive colleague in a small company?

What about the virus in 12 Monkeys?

What mechanic is there to disable a threat instead of killing it?

Venezuelan girlfriend wants to travel the USA to be with me. What is the process?

In 'Revenger,' what does 'cove' come from?

Why do bosons tend to occupy the same state?

Cursor Replacement for Newbies

CAST throwing error when run in stored procedure but not when run as raw query

How do conventional missiles fly?

ssTTsSTtRrriinInnnnNNNIiinngg

Is "remove commented out code" correct English?

How do I handle a potential work/personal life conflict as the manager of one of my friends?

How can saying a song's name be a copyright violation?

What killed these X2 caps?

How to prevent "they're falling in love" trope



How to save marker and polyline in database?


How to add polygon in MySQL databaseReference materials for learning Google API V3 with PHP and MySQL (tracking)Drawing polyline that grows as the car moves by taking data from MySql and PHP in Google APIHow to show information window for the marker cluster?Drop Markers and MarkerCluster together from databaseHow to get multiple dynamic custom markers on map using MapBox in MySQL and PHP?Leaflet : How to update polyline ? Live TrackingMapbox personalized icons with cluster and filter checkboxExtracting latitude/longitude from javascript and passing to html formQGIS Start and endpoint marker line and polyline













0















I want to store marker and polyline in the database



In this script, I have 3 functions, that is to draw a polyline, marker and the point of destination



Can anyone fix my script below ?



var map;
var __global_node_now = 'null';
var __global_node = false;
var __global_line = false;
var __global_destination = false;
var __global_destination_now = 'null';
var __global_load_json = false;
var __global_arr_node = new Array();
var __global_first_line = 0;

function add_node(){
var active_x = document.getElementById('add_nodex');
var active_y = document.getElementById('add_linex');
var active_z = document.getElementById('add_destinationx');
/* disable other tools */
__global_node = true;
__global_line = false;
__global_destination = false;
}

function add_line(){
var active_x = document.getElementById('add_nodex');
var active_y = document.getElementById('add_linex');
var active_z = document.getElementById('add_destinationx');
/* disable other tools */
__global_line = true;
__global_node = false;
__global_destination = false;
}

function add_destination(){
var active_x = document.getElementById('add_nodex');
var active_y = document.getElementById('add_linex');
var active_z = document.getElementById('add_destinationx');
/* disable other tools */
__global_destination = true;
__global_node = false;
__global_line = false;
}

function edit_destination_name(a, thiis){
var edit_destination = prompt("Edit destination", $(thiis).html());
console.log(window['marker_dest_' + a]);
// id marker_destintation
marker_destination = window['marker_dest_' + a];
// update event popup
if(edit_destination)
{
// update destination_name by live
$(thiis).html(edit_destination);
// update title marker
marker_destination.setTitle(edit_destination);
console.log(marker_destination.title);
// remove previously event
google.maps.event.clearListeners(marker_destination, 'click');
// popup event
var content = "<span class='destination_name' onclick='edit_destination_name("" + a + "", this)'>" + edit_destination + "</span>";
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker_destination,'click', (function(marker_destination,content,infowindow){
return function() {
infowindow.setContent(content);
//console.log(infowindow.getMap());
infowindow.open(map,marker_destination);
};
})(marker_destination,content,infowindow));
}
}

var poly;
var map;
var increase = 0;
function initialize() {
/* setup map */
var mapOptions = {
center: new google.maps.LatLng(-7.977022, 112.634151),
zoom: 15,
zoomControl: true,
streetViewControl: false,
mapTypeControl: false,
gestureHandling: 'greedy'
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
/* setup polyline */
var polyOptions = {
geodesic: true,
strokeColor: 'rgb(20, 120, 218)',
strokeOpacity: 1.0,
strokeWeight: 2,
editable: true,
};
window['poly' + increase] = new google.maps.Polyline(polyOptions);
window['poly' + increase].setMap(map);

/* create marker and line by click */
google.maps.event.addListener(map, 'click', function(event)
{
/* if tools 'add destination' is active, create marker */
if( __global_destination == true ){
var key_destination = 0;
//__global_destination_now = 'a';
if( __global_destination_now == 'null' ){
__global_destination_now = 'a';
key_destination = 0;
}else{
__global_destination_now = String.fromCharCode( __global_destination_now.charCodeAt(0) + 1 );
key_destination += 1;
}
console.log(__global_destination_now);
// nama destination
destination_name = "HAE";
window['infowindow'+key_destination] = new google.maps.InfoWindow({
content: '<div>'+ destination_name +'</div>'
});

// add marker destination
icons = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
var location = event.latLng;
window['marker_dest_' + __global_destination_now] = new google.maps.Marker({
position: location,
map: map,
icon: icons,
draggable: true,
title: '' + __global_destination_now,
});

// id marker_destintation
var marker_destintation = window['marker_dest_' + __global_destination_now];

// popup event
var content = "<span class='destination_name' onclick='edit_destination_name("" + __global_destination_now + "", this)'>" + __global_destination_now + "</span>";
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker_destintation,'click', (function(marker_destintation,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker_destintation);
};
})(marker_destintation,content,infowindow));
}

/* if tools 'add node' is active, create marker */
if( __global_node == true ) {
var key_node = 0;
if( __global_node_now == 'null' ){
__global_node_now = 'a';
key_node = 0;
}else{
__global_node_now = String.fromCharCode( __global_node_now.charCodeAt(0) + 1 );
key_destination += 1;
}

/* draw a new marker */
var location = event.latLng;
var marker = new google.maps.Marker({
position: location,
map: map,
title: '' + __global_node_now,
});

// popup event
var content_marker = "<div>" + __global_node_now + "</div>";
var infowindow_marker = new google.maps.InfoWindow();
google.maps.event.addListener(marker,'click', (function(marker,content_marker,infowindow_marker){
return function() {
infowindow_marker.setContent(content_marker);
infowindow_marker.open(map,marker);
};
})(marker,content_marker,infowindow_marker));

/* Add listener to getting latLng marker
* using 'list object event' : {this.title, this.position}
*/
google.maps.event.addListener(marker, "click", function (evt)
{
/* if tools 'add line' is active, create first polyline */
if( __global_line == true ){

/* first polyline */
var path = window['poly' + increase].getPath();
path.push(event.latLng);

/* temporary for node start - finish for json
* example : 0-1 {"coordinates": [[123, 456], [321, 123]]}
*/
if( __global_first_line == 0 )
temp_node1 = this.title;


/* jika meng-klik ke marker/node akhir dalam pembuatan polyline */
if( evt.latLng.lat() == event.latLng.lat() && evt.latLng.lng() == event.latLng.lng() && __global_first_line == 1 ){
alert('node & line berhasil disambung!');
temp_node2 = this.title;
temp_node_fix = temp_node1 + '-' + temp_node2;
__global_arr_node.push(temp_node_fix);
/* adding id window['poly' + increase] */
increase += 1;
/* reset first polyline */
__global_first_line = 0;

/* reset polyline */
var polyOptions = {
geodesic: true,
strokeColor: 'rgb(20, 120, 218)',
strokeOpacity: 1.0,
strokeWeight: 2,
editable: true,
//draggable: true,
};
window['poly' + increase] = new google.maps.Polyline(polyOptions);
window['poly' + increase].setMap(map);
return false; // die()
}
__global_first_line = 1;
}
}); //end addListener
}else if( __global_line == true ){
if( __global_first_line == 1 ){
var path = window['poly' + increase].getPath();
path.push(event.latLng);
}else{
alert('klik Node dulu!');
}
}
}); // end click map
}

function save_markerlinex(){
//console.log($('#text_route').val());
//return false;
var json_google_map = '';
for( i = 0; i < increase; i++ )
{
// val_latlng = window['poly' + i].getPath().j;
// length_latlng = window['poly' + i].getPath().j.length;
val_latlng = window['poly' + i].getPath().getArray(); // new
length_latlng = window['poly' + i].getPath().length; // new
var str2 = '';
var polylineLength = 0;
for( a = 0; a < length_latlng; a++ )
{
lat1 = val_latlng[a].lat();
lng2 = val_latlng[a].lng();

/* calculate distance polyline */
if ( a < (length_latlng - 1) ) {
next_lat1 = val_latlng[(a+1)].lat();
next_lng2 = val_latlng[(a+1)].lng();
var pointPath1 = new google.maps.LatLng(lat1, lng2);
var pointPath2 = new google.maps.LatLng(next_lat1, next_lng2);
polylineLength += google.maps.geometry.spherical.computeDistanceBetween(pointPath1, pointPath2);
}
bracket_latlng = '[' + lat1 + ', ' + lng2 + ']';
console.log("bracket : " + bracket_latlng);
if( a == (length_latlng - 1) ){ // end
str2 += bracket_latlng;
}else{
str2 += bracket_latlng + ',';
}
}
nodes_info = __global_arr_node[i];
create_json = '{"nodes": ["' + nodes_info + '"], "coordinates": [' + str2 + '], "distance_metres": [' + polylineLength + ']}';
//console.log("str2 : " + str2);
/* reverse coordinates */
str3_reverse = '[' + str2 + ']';
console.log(str3_reverse);
str3_reverse_p = JSON.parse(str3_reverse);
str3 = '';
for( u = (str3_reverse_p.length - 1); u >= 0; u-- )
{
// rev = reverse
latlng_rev = str3_reverse_p[u];
bracket_latlng_rev = '[' + latlng_rev + ']';
if( u == 0 ){ // end
str3 += bracket_latlng_rev;
}else{
str3 += bracket_latlng_rev + ',';
}
}
explode = nodes_info.split('-');
nodes_info_rev = explode[1] + '-' + explode[0];
create_json_rev = '{"nodes": ["' + nodes_info_rev + '"], "coordinates": [' + str3 + '], "distance_metres": [' + polylineLength + ']}';
if( i == ( increase - 1 ) )
pemisah = 'nn=====================================nn';
else
pemisah = 'nn-------------------------------------nn';
json_google_map += create_json + 'nn' + create_json_rev + pemisah;
}

// list marker destination
if( __global_destination_now != 'null' ){
number_dest = ( __global_destination_now.charCodeAt(0) - 97 );
str4 = '';
coord_dest = '';
for( y = 0; y <= number_dest; y++ ){
var chr = String.fromCharCode(97 + y);
var title_live = window['marker_dest_' + chr].getTitle();
console.log(window['marker_dest_' + chr].position);
latsx = window['marker_dest_' + chr].position.lat();
lngsx = window['marker_dest_' + chr].position.lng();
if( y == number_dest ) // end
comma = '';
else
comma = ',';
coord_dest += '{"' + title_live + '": "' + latsx + ', ' + lngsx + '"}' + comma;
}
str4 = '{"destination": [' + coord_dest + ']}';
json_google_map += str4;
}
//document.getElementById('txt').innerHTML = json_google_map;
rute_angkot = $('#text_route').val();

//kalo belum buat graph
if(json_google_map == '' || rute_angkot == ''){
alert('buat graph dulu!');
return false;
}

//console.log(rute_angkot);
$.ajax({
method:"POST",
url : "json_to_sql.php",
data: {
json_google_map: json_google_map,
route_angkot: rute_angkot
},
success:function(url){
window.location = 'download_sql.php?r=' + url;
},
error:function(er){
alert('error: '+er);
// remove loading
$('#run_dijkstra').show();
$('#loading').hide();
}
});
}

function load_json(){
textarea = document.getElementById('text_json');
val = textarea.value;
if( val.trim() == '' ){
return false;
}
var res = val.split('-------------------------------------');
for( i = 0; i < res.length; i++ ){
var res1 = res[i].trim();
var res2 = res1.split('n');
if( res2.length > 1 ){ // coordinates is exist
var json = JSON.parse(res2[0]);
var nodes = json.nodes.toString();
var coord = json.coordinates;
for( a = 0; a < coord.length; a++ ){
latlngs = coord[a].toString();
splits = latlngs.split(',');
lats = splits[0].trim();
lngs = splits[1].trim();

var pointPoly = new google.maps.LatLng(lats, lngs);
/* first polyline */
var path = window['poly' + increase].getPath();
path.push(pointPoly);
/* draw a new marker */
if( a == 0 || a == (coord.length - 1) ){
var str_split = nodes.split('-');
if( a == 0 )
nodes_target = str_split[0];
else if( a == (coord.length - 1) )
nodes_target = str_split[1];

var location = pointPoly;
var marker = new google.maps.Marker({
position: location,
map: map,
title: '' + nodes_target,
});
}
}
increase += 1;
__global_arr_node.push(nodes);

/* reset polyline */
var polyOptions = {
geodesic: true,
strokeColor: 'rgb(20, 120, 218)',
strokeOpacity: 1.0,
strokeWeight: 2,
editable: true,
};
console.log( 'ulang' );
window['poly' + increase] = new google.maps.Polyline(polyOptions);
window['poly' + increase].setMap(map);
}
}

var res1 = val.split('=====================================');
if( res1.length > 1 ){
res_dest = res1[1].trim();
json = JSON.parse(res_dest);
json_root = json.destination;
length_json = json.destination.length;

for( b = 0; b < length_json; b++ ){
var chr = String.fromCharCode(97 + b);
__global_destination_now = chr;
latlng1 = json_root[b][chr].toString().split(',');
next_lat1 = latlng1[0].trim();
next_lng2 = latlng1[1].trim();

var pointPath1 = new google.maps.LatLng(next_lat1, next_lng2);
icons = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
var location = event.latLng;
window['marker_dest_' + __global_destination_now] = new google.maps.Marker({
position: pointPath1,
map: map,
icon: icons,
draggable: true,
title: '' + __global_destination_now,
});
}
}

// reset
textarea.value = '';
}
/* load google maps v3 */
google.maps.event.addDomListener(window, 'load', initialize);

$(document).ready(function() {
$('#clear-map').click(clearMap);
});








share







New contributor




MALANG arema is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

























    0















    I want to store marker and polyline in the database



    In this script, I have 3 functions, that is to draw a polyline, marker and the point of destination



    Can anyone fix my script below ?



    var map;
    var __global_node_now = 'null';
    var __global_node = false;
    var __global_line = false;
    var __global_destination = false;
    var __global_destination_now = 'null';
    var __global_load_json = false;
    var __global_arr_node = new Array();
    var __global_first_line = 0;

    function add_node(){
    var active_x = document.getElementById('add_nodex');
    var active_y = document.getElementById('add_linex');
    var active_z = document.getElementById('add_destinationx');
    /* disable other tools */
    __global_node = true;
    __global_line = false;
    __global_destination = false;
    }

    function add_line(){
    var active_x = document.getElementById('add_nodex');
    var active_y = document.getElementById('add_linex');
    var active_z = document.getElementById('add_destinationx');
    /* disable other tools */
    __global_line = true;
    __global_node = false;
    __global_destination = false;
    }

    function add_destination(){
    var active_x = document.getElementById('add_nodex');
    var active_y = document.getElementById('add_linex');
    var active_z = document.getElementById('add_destinationx');
    /* disable other tools */
    __global_destination = true;
    __global_node = false;
    __global_line = false;
    }

    function edit_destination_name(a, thiis){
    var edit_destination = prompt("Edit destination", $(thiis).html());
    console.log(window['marker_dest_' + a]);
    // id marker_destintation
    marker_destination = window['marker_dest_' + a];
    // update event popup
    if(edit_destination)
    {
    // update destination_name by live
    $(thiis).html(edit_destination);
    // update title marker
    marker_destination.setTitle(edit_destination);
    console.log(marker_destination.title);
    // remove previously event
    google.maps.event.clearListeners(marker_destination, 'click');
    // popup event
    var content = "<span class='destination_name' onclick='edit_destination_name("" + a + "", this)'>" + edit_destination + "</span>";
    var infowindow = new google.maps.InfoWindow();
    google.maps.event.addListener(marker_destination,'click', (function(marker_destination,content,infowindow){
    return function() {
    infowindow.setContent(content);
    //console.log(infowindow.getMap());
    infowindow.open(map,marker_destination);
    };
    })(marker_destination,content,infowindow));
    }
    }

    var poly;
    var map;
    var increase = 0;
    function initialize() {
    /* setup map */
    var mapOptions = {
    center: new google.maps.LatLng(-7.977022, 112.634151),
    zoom: 15,
    zoomControl: true,
    streetViewControl: false,
    mapTypeControl: false,
    gestureHandling: 'greedy'
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
    var trafficLayer = new google.maps.TrafficLayer();
    trafficLayer.setMap(map);
    /* setup polyline */
    var polyOptions = {
    geodesic: true,
    strokeColor: 'rgb(20, 120, 218)',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    editable: true,
    };
    window['poly' + increase] = new google.maps.Polyline(polyOptions);
    window['poly' + increase].setMap(map);

    /* create marker and line by click */
    google.maps.event.addListener(map, 'click', function(event)
    {
    /* if tools 'add destination' is active, create marker */
    if( __global_destination == true ){
    var key_destination = 0;
    //__global_destination_now = 'a';
    if( __global_destination_now == 'null' ){
    __global_destination_now = 'a';
    key_destination = 0;
    }else{
    __global_destination_now = String.fromCharCode( __global_destination_now.charCodeAt(0) + 1 );
    key_destination += 1;
    }
    console.log(__global_destination_now);
    // nama destination
    destination_name = "HAE";
    window['infowindow'+key_destination] = new google.maps.InfoWindow({
    content: '<div>'+ destination_name +'</div>'
    });

    // add marker destination
    icons = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
    var location = event.latLng;
    window['marker_dest_' + __global_destination_now] = new google.maps.Marker({
    position: location,
    map: map,
    icon: icons,
    draggable: true,
    title: '' + __global_destination_now,
    });

    // id marker_destintation
    var marker_destintation = window['marker_dest_' + __global_destination_now];

    // popup event
    var content = "<span class='destination_name' onclick='edit_destination_name("" + __global_destination_now + "", this)'>" + __global_destination_now + "</span>";
    var infowindow = new google.maps.InfoWindow();
    google.maps.event.addListener(marker_destintation,'click', (function(marker_destintation,content,infowindow){
    return function() {
    infowindow.setContent(content);
    infowindow.open(map,marker_destintation);
    };
    })(marker_destintation,content,infowindow));
    }

    /* if tools 'add node' is active, create marker */
    if( __global_node == true ) {
    var key_node = 0;
    if( __global_node_now == 'null' ){
    __global_node_now = 'a';
    key_node = 0;
    }else{
    __global_node_now = String.fromCharCode( __global_node_now.charCodeAt(0) + 1 );
    key_destination += 1;
    }

    /* draw a new marker */
    var location = event.latLng;
    var marker = new google.maps.Marker({
    position: location,
    map: map,
    title: '' + __global_node_now,
    });

    // popup event
    var content_marker = "<div>" + __global_node_now + "</div>";
    var infowindow_marker = new google.maps.InfoWindow();
    google.maps.event.addListener(marker,'click', (function(marker,content_marker,infowindow_marker){
    return function() {
    infowindow_marker.setContent(content_marker);
    infowindow_marker.open(map,marker);
    };
    })(marker,content_marker,infowindow_marker));

    /* Add listener to getting latLng marker
    * using 'list object event' : {this.title, this.position}
    */
    google.maps.event.addListener(marker, "click", function (evt)
    {
    /* if tools 'add line' is active, create first polyline */
    if( __global_line == true ){

    /* first polyline */
    var path = window['poly' + increase].getPath();
    path.push(event.latLng);

    /* temporary for node start - finish for json
    * example : 0-1 {"coordinates": [[123, 456], [321, 123]]}
    */
    if( __global_first_line == 0 )
    temp_node1 = this.title;


    /* jika meng-klik ke marker/node akhir dalam pembuatan polyline */
    if( evt.latLng.lat() == event.latLng.lat() && evt.latLng.lng() == event.latLng.lng() && __global_first_line == 1 ){
    alert('node & line berhasil disambung!');
    temp_node2 = this.title;
    temp_node_fix = temp_node1 + '-' + temp_node2;
    __global_arr_node.push(temp_node_fix);
    /* adding id window['poly' + increase] */
    increase += 1;
    /* reset first polyline */
    __global_first_line = 0;

    /* reset polyline */
    var polyOptions = {
    geodesic: true,
    strokeColor: 'rgb(20, 120, 218)',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    editable: true,
    //draggable: true,
    };
    window['poly' + increase] = new google.maps.Polyline(polyOptions);
    window['poly' + increase].setMap(map);
    return false; // die()
    }
    __global_first_line = 1;
    }
    }); //end addListener
    }else if( __global_line == true ){
    if( __global_first_line == 1 ){
    var path = window['poly' + increase].getPath();
    path.push(event.latLng);
    }else{
    alert('klik Node dulu!');
    }
    }
    }); // end click map
    }

    function save_markerlinex(){
    //console.log($('#text_route').val());
    //return false;
    var json_google_map = '';
    for( i = 0; i < increase; i++ )
    {
    // val_latlng = window['poly' + i].getPath().j;
    // length_latlng = window['poly' + i].getPath().j.length;
    val_latlng = window['poly' + i].getPath().getArray(); // new
    length_latlng = window['poly' + i].getPath().length; // new
    var str2 = '';
    var polylineLength = 0;
    for( a = 0; a < length_latlng; a++ )
    {
    lat1 = val_latlng[a].lat();
    lng2 = val_latlng[a].lng();

    /* calculate distance polyline */
    if ( a < (length_latlng - 1) ) {
    next_lat1 = val_latlng[(a+1)].lat();
    next_lng2 = val_latlng[(a+1)].lng();
    var pointPath1 = new google.maps.LatLng(lat1, lng2);
    var pointPath2 = new google.maps.LatLng(next_lat1, next_lng2);
    polylineLength += google.maps.geometry.spherical.computeDistanceBetween(pointPath1, pointPath2);
    }
    bracket_latlng = '[' + lat1 + ', ' + lng2 + ']';
    console.log("bracket : " + bracket_latlng);
    if( a == (length_latlng - 1) ){ // end
    str2 += bracket_latlng;
    }else{
    str2 += bracket_latlng + ',';
    }
    }
    nodes_info = __global_arr_node[i];
    create_json = '{"nodes": ["' + nodes_info + '"], "coordinates": [' + str2 + '], "distance_metres": [' + polylineLength + ']}';
    //console.log("str2 : " + str2);
    /* reverse coordinates */
    str3_reverse = '[' + str2 + ']';
    console.log(str3_reverse);
    str3_reverse_p = JSON.parse(str3_reverse);
    str3 = '';
    for( u = (str3_reverse_p.length - 1); u >= 0; u-- )
    {
    // rev = reverse
    latlng_rev = str3_reverse_p[u];
    bracket_latlng_rev = '[' + latlng_rev + ']';
    if( u == 0 ){ // end
    str3 += bracket_latlng_rev;
    }else{
    str3 += bracket_latlng_rev + ',';
    }
    }
    explode = nodes_info.split('-');
    nodes_info_rev = explode[1] + '-' + explode[0];
    create_json_rev = '{"nodes": ["' + nodes_info_rev + '"], "coordinates": [' + str3 + '], "distance_metres": [' + polylineLength + ']}';
    if( i == ( increase - 1 ) )
    pemisah = 'nn=====================================nn';
    else
    pemisah = 'nn-------------------------------------nn';
    json_google_map += create_json + 'nn' + create_json_rev + pemisah;
    }

    // list marker destination
    if( __global_destination_now != 'null' ){
    number_dest = ( __global_destination_now.charCodeAt(0) - 97 );
    str4 = '';
    coord_dest = '';
    for( y = 0; y <= number_dest; y++ ){
    var chr = String.fromCharCode(97 + y);
    var title_live = window['marker_dest_' + chr].getTitle();
    console.log(window['marker_dest_' + chr].position);
    latsx = window['marker_dest_' + chr].position.lat();
    lngsx = window['marker_dest_' + chr].position.lng();
    if( y == number_dest ) // end
    comma = '';
    else
    comma = ',';
    coord_dest += '{"' + title_live + '": "' + latsx + ', ' + lngsx + '"}' + comma;
    }
    str4 = '{"destination": [' + coord_dest + ']}';
    json_google_map += str4;
    }
    //document.getElementById('txt').innerHTML = json_google_map;
    rute_angkot = $('#text_route').val();

    //kalo belum buat graph
    if(json_google_map == '' || rute_angkot == ''){
    alert('buat graph dulu!');
    return false;
    }

    //console.log(rute_angkot);
    $.ajax({
    method:"POST",
    url : "json_to_sql.php",
    data: {
    json_google_map: json_google_map,
    route_angkot: rute_angkot
    },
    success:function(url){
    window.location = 'download_sql.php?r=' + url;
    },
    error:function(er){
    alert('error: '+er);
    // remove loading
    $('#run_dijkstra').show();
    $('#loading').hide();
    }
    });
    }

    function load_json(){
    textarea = document.getElementById('text_json');
    val = textarea.value;
    if( val.trim() == '' ){
    return false;
    }
    var res = val.split('-------------------------------------');
    for( i = 0; i < res.length; i++ ){
    var res1 = res[i].trim();
    var res2 = res1.split('n');
    if( res2.length > 1 ){ // coordinates is exist
    var json = JSON.parse(res2[0]);
    var nodes = json.nodes.toString();
    var coord = json.coordinates;
    for( a = 0; a < coord.length; a++ ){
    latlngs = coord[a].toString();
    splits = latlngs.split(',');
    lats = splits[0].trim();
    lngs = splits[1].trim();

    var pointPoly = new google.maps.LatLng(lats, lngs);
    /* first polyline */
    var path = window['poly' + increase].getPath();
    path.push(pointPoly);
    /* draw a new marker */
    if( a == 0 || a == (coord.length - 1) ){
    var str_split = nodes.split('-');
    if( a == 0 )
    nodes_target = str_split[0];
    else if( a == (coord.length - 1) )
    nodes_target = str_split[1];

    var location = pointPoly;
    var marker = new google.maps.Marker({
    position: location,
    map: map,
    title: '' + nodes_target,
    });
    }
    }
    increase += 1;
    __global_arr_node.push(nodes);

    /* reset polyline */
    var polyOptions = {
    geodesic: true,
    strokeColor: 'rgb(20, 120, 218)',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    editable: true,
    };
    console.log( 'ulang' );
    window['poly' + increase] = new google.maps.Polyline(polyOptions);
    window['poly' + increase].setMap(map);
    }
    }

    var res1 = val.split('=====================================');
    if( res1.length > 1 ){
    res_dest = res1[1].trim();
    json = JSON.parse(res_dest);
    json_root = json.destination;
    length_json = json.destination.length;

    for( b = 0; b < length_json; b++ ){
    var chr = String.fromCharCode(97 + b);
    __global_destination_now = chr;
    latlng1 = json_root[b][chr].toString().split(',');
    next_lat1 = latlng1[0].trim();
    next_lng2 = latlng1[1].trim();

    var pointPath1 = new google.maps.LatLng(next_lat1, next_lng2);
    icons = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
    var location = event.latLng;
    window['marker_dest_' + __global_destination_now] = new google.maps.Marker({
    position: pointPath1,
    map: map,
    icon: icons,
    draggable: true,
    title: '' + __global_destination_now,
    });
    }
    }

    // reset
    textarea.value = '';
    }
    /* load google maps v3 */
    google.maps.event.addDomListener(window, 'load', initialize);

    $(document).ready(function() {
    $('#clear-map').click(clearMap);
    });








    share







    New contributor




    MALANG arema is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
    Check out our Code of Conduct.























      0












      0








      0








      I want to store marker and polyline in the database



      In this script, I have 3 functions, that is to draw a polyline, marker and the point of destination



      Can anyone fix my script below ?



      var map;
      var __global_node_now = 'null';
      var __global_node = false;
      var __global_line = false;
      var __global_destination = false;
      var __global_destination_now = 'null';
      var __global_load_json = false;
      var __global_arr_node = new Array();
      var __global_first_line = 0;

      function add_node(){
      var active_x = document.getElementById('add_nodex');
      var active_y = document.getElementById('add_linex');
      var active_z = document.getElementById('add_destinationx');
      /* disable other tools */
      __global_node = true;
      __global_line = false;
      __global_destination = false;
      }

      function add_line(){
      var active_x = document.getElementById('add_nodex');
      var active_y = document.getElementById('add_linex');
      var active_z = document.getElementById('add_destinationx');
      /* disable other tools */
      __global_line = true;
      __global_node = false;
      __global_destination = false;
      }

      function add_destination(){
      var active_x = document.getElementById('add_nodex');
      var active_y = document.getElementById('add_linex');
      var active_z = document.getElementById('add_destinationx');
      /* disable other tools */
      __global_destination = true;
      __global_node = false;
      __global_line = false;
      }

      function edit_destination_name(a, thiis){
      var edit_destination = prompt("Edit destination", $(thiis).html());
      console.log(window['marker_dest_' + a]);
      // id marker_destintation
      marker_destination = window['marker_dest_' + a];
      // update event popup
      if(edit_destination)
      {
      // update destination_name by live
      $(thiis).html(edit_destination);
      // update title marker
      marker_destination.setTitle(edit_destination);
      console.log(marker_destination.title);
      // remove previously event
      google.maps.event.clearListeners(marker_destination, 'click');
      // popup event
      var content = "<span class='destination_name' onclick='edit_destination_name("" + a + "", this)'>" + edit_destination + "</span>";
      var infowindow = new google.maps.InfoWindow();
      google.maps.event.addListener(marker_destination,'click', (function(marker_destination,content,infowindow){
      return function() {
      infowindow.setContent(content);
      //console.log(infowindow.getMap());
      infowindow.open(map,marker_destination);
      };
      })(marker_destination,content,infowindow));
      }
      }

      var poly;
      var map;
      var increase = 0;
      function initialize() {
      /* setup map */
      var mapOptions = {
      center: new google.maps.LatLng(-7.977022, 112.634151),
      zoom: 15,
      zoomControl: true,
      streetViewControl: false,
      mapTypeControl: false,
      gestureHandling: 'greedy'
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
      var trafficLayer = new google.maps.TrafficLayer();
      trafficLayer.setMap(map);
      /* setup polyline */
      var polyOptions = {
      geodesic: true,
      strokeColor: 'rgb(20, 120, 218)',
      strokeOpacity: 1.0,
      strokeWeight: 2,
      editable: true,
      };
      window['poly' + increase] = new google.maps.Polyline(polyOptions);
      window['poly' + increase].setMap(map);

      /* create marker and line by click */
      google.maps.event.addListener(map, 'click', function(event)
      {
      /* if tools 'add destination' is active, create marker */
      if( __global_destination == true ){
      var key_destination = 0;
      //__global_destination_now = 'a';
      if( __global_destination_now == 'null' ){
      __global_destination_now = 'a';
      key_destination = 0;
      }else{
      __global_destination_now = String.fromCharCode( __global_destination_now.charCodeAt(0) + 1 );
      key_destination += 1;
      }
      console.log(__global_destination_now);
      // nama destination
      destination_name = "HAE";
      window['infowindow'+key_destination] = new google.maps.InfoWindow({
      content: '<div>'+ destination_name +'</div>'
      });

      // add marker destination
      icons = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
      var location = event.latLng;
      window['marker_dest_' + __global_destination_now] = new google.maps.Marker({
      position: location,
      map: map,
      icon: icons,
      draggable: true,
      title: '' + __global_destination_now,
      });

      // id marker_destintation
      var marker_destintation = window['marker_dest_' + __global_destination_now];

      // popup event
      var content = "<span class='destination_name' onclick='edit_destination_name("" + __global_destination_now + "", this)'>" + __global_destination_now + "</span>";
      var infowindow = new google.maps.InfoWindow();
      google.maps.event.addListener(marker_destintation,'click', (function(marker_destintation,content,infowindow){
      return function() {
      infowindow.setContent(content);
      infowindow.open(map,marker_destintation);
      };
      })(marker_destintation,content,infowindow));
      }

      /* if tools 'add node' is active, create marker */
      if( __global_node == true ) {
      var key_node = 0;
      if( __global_node_now == 'null' ){
      __global_node_now = 'a';
      key_node = 0;
      }else{
      __global_node_now = String.fromCharCode( __global_node_now.charCodeAt(0) + 1 );
      key_destination += 1;
      }

      /* draw a new marker */
      var location = event.latLng;
      var marker = new google.maps.Marker({
      position: location,
      map: map,
      title: '' + __global_node_now,
      });

      // popup event
      var content_marker = "<div>" + __global_node_now + "</div>";
      var infowindow_marker = new google.maps.InfoWindow();
      google.maps.event.addListener(marker,'click', (function(marker,content_marker,infowindow_marker){
      return function() {
      infowindow_marker.setContent(content_marker);
      infowindow_marker.open(map,marker);
      };
      })(marker,content_marker,infowindow_marker));

      /* Add listener to getting latLng marker
      * using 'list object event' : {this.title, this.position}
      */
      google.maps.event.addListener(marker, "click", function (evt)
      {
      /* if tools 'add line' is active, create first polyline */
      if( __global_line == true ){

      /* first polyline */
      var path = window['poly' + increase].getPath();
      path.push(event.latLng);

      /* temporary for node start - finish for json
      * example : 0-1 {"coordinates": [[123, 456], [321, 123]]}
      */
      if( __global_first_line == 0 )
      temp_node1 = this.title;


      /* jika meng-klik ke marker/node akhir dalam pembuatan polyline */
      if( evt.latLng.lat() == event.latLng.lat() && evt.latLng.lng() == event.latLng.lng() && __global_first_line == 1 ){
      alert('node & line berhasil disambung!');
      temp_node2 = this.title;
      temp_node_fix = temp_node1 + '-' + temp_node2;
      __global_arr_node.push(temp_node_fix);
      /* adding id window['poly' + increase] */
      increase += 1;
      /* reset first polyline */
      __global_first_line = 0;

      /* reset polyline */
      var polyOptions = {
      geodesic: true,
      strokeColor: 'rgb(20, 120, 218)',
      strokeOpacity: 1.0,
      strokeWeight: 2,
      editable: true,
      //draggable: true,
      };
      window['poly' + increase] = new google.maps.Polyline(polyOptions);
      window['poly' + increase].setMap(map);
      return false; // die()
      }
      __global_first_line = 1;
      }
      }); //end addListener
      }else if( __global_line == true ){
      if( __global_first_line == 1 ){
      var path = window['poly' + increase].getPath();
      path.push(event.latLng);
      }else{
      alert('klik Node dulu!');
      }
      }
      }); // end click map
      }

      function save_markerlinex(){
      //console.log($('#text_route').val());
      //return false;
      var json_google_map = '';
      for( i = 0; i < increase; i++ )
      {
      // val_latlng = window['poly' + i].getPath().j;
      // length_latlng = window['poly' + i].getPath().j.length;
      val_latlng = window['poly' + i].getPath().getArray(); // new
      length_latlng = window['poly' + i].getPath().length; // new
      var str2 = '';
      var polylineLength = 0;
      for( a = 0; a < length_latlng; a++ )
      {
      lat1 = val_latlng[a].lat();
      lng2 = val_latlng[a].lng();

      /* calculate distance polyline */
      if ( a < (length_latlng - 1) ) {
      next_lat1 = val_latlng[(a+1)].lat();
      next_lng2 = val_latlng[(a+1)].lng();
      var pointPath1 = new google.maps.LatLng(lat1, lng2);
      var pointPath2 = new google.maps.LatLng(next_lat1, next_lng2);
      polylineLength += google.maps.geometry.spherical.computeDistanceBetween(pointPath1, pointPath2);
      }
      bracket_latlng = '[' + lat1 + ', ' + lng2 + ']';
      console.log("bracket : " + bracket_latlng);
      if( a == (length_latlng - 1) ){ // end
      str2 += bracket_latlng;
      }else{
      str2 += bracket_latlng + ',';
      }
      }
      nodes_info = __global_arr_node[i];
      create_json = '{"nodes": ["' + nodes_info + '"], "coordinates": [' + str2 + '], "distance_metres": [' + polylineLength + ']}';
      //console.log("str2 : " + str2);
      /* reverse coordinates */
      str3_reverse = '[' + str2 + ']';
      console.log(str3_reverse);
      str3_reverse_p = JSON.parse(str3_reverse);
      str3 = '';
      for( u = (str3_reverse_p.length - 1); u >= 0; u-- )
      {
      // rev = reverse
      latlng_rev = str3_reverse_p[u];
      bracket_latlng_rev = '[' + latlng_rev + ']';
      if( u == 0 ){ // end
      str3 += bracket_latlng_rev;
      }else{
      str3 += bracket_latlng_rev + ',';
      }
      }
      explode = nodes_info.split('-');
      nodes_info_rev = explode[1] + '-' + explode[0];
      create_json_rev = '{"nodes": ["' + nodes_info_rev + '"], "coordinates": [' + str3 + '], "distance_metres": [' + polylineLength + ']}';
      if( i == ( increase - 1 ) )
      pemisah = 'nn=====================================nn';
      else
      pemisah = 'nn-------------------------------------nn';
      json_google_map += create_json + 'nn' + create_json_rev + pemisah;
      }

      // list marker destination
      if( __global_destination_now != 'null' ){
      number_dest = ( __global_destination_now.charCodeAt(0) - 97 );
      str4 = '';
      coord_dest = '';
      for( y = 0; y <= number_dest; y++ ){
      var chr = String.fromCharCode(97 + y);
      var title_live = window['marker_dest_' + chr].getTitle();
      console.log(window['marker_dest_' + chr].position);
      latsx = window['marker_dest_' + chr].position.lat();
      lngsx = window['marker_dest_' + chr].position.lng();
      if( y == number_dest ) // end
      comma = '';
      else
      comma = ',';
      coord_dest += '{"' + title_live + '": "' + latsx + ', ' + lngsx + '"}' + comma;
      }
      str4 = '{"destination": [' + coord_dest + ']}';
      json_google_map += str4;
      }
      //document.getElementById('txt').innerHTML = json_google_map;
      rute_angkot = $('#text_route').val();

      //kalo belum buat graph
      if(json_google_map == '' || rute_angkot == ''){
      alert('buat graph dulu!');
      return false;
      }

      //console.log(rute_angkot);
      $.ajax({
      method:"POST",
      url : "json_to_sql.php",
      data: {
      json_google_map: json_google_map,
      route_angkot: rute_angkot
      },
      success:function(url){
      window.location = 'download_sql.php?r=' + url;
      },
      error:function(er){
      alert('error: '+er);
      // remove loading
      $('#run_dijkstra').show();
      $('#loading').hide();
      }
      });
      }

      function load_json(){
      textarea = document.getElementById('text_json');
      val = textarea.value;
      if( val.trim() == '' ){
      return false;
      }
      var res = val.split('-------------------------------------');
      for( i = 0; i < res.length; i++ ){
      var res1 = res[i].trim();
      var res2 = res1.split('n');
      if( res2.length > 1 ){ // coordinates is exist
      var json = JSON.parse(res2[0]);
      var nodes = json.nodes.toString();
      var coord = json.coordinates;
      for( a = 0; a < coord.length; a++ ){
      latlngs = coord[a].toString();
      splits = latlngs.split(',');
      lats = splits[0].trim();
      lngs = splits[1].trim();

      var pointPoly = new google.maps.LatLng(lats, lngs);
      /* first polyline */
      var path = window['poly' + increase].getPath();
      path.push(pointPoly);
      /* draw a new marker */
      if( a == 0 || a == (coord.length - 1) ){
      var str_split = nodes.split('-');
      if( a == 0 )
      nodes_target = str_split[0];
      else if( a == (coord.length - 1) )
      nodes_target = str_split[1];

      var location = pointPoly;
      var marker = new google.maps.Marker({
      position: location,
      map: map,
      title: '' + nodes_target,
      });
      }
      }
      increase += 1;
      __global_arr_node.push(nodes);

      /* reset polyline */
      var polyOptions = {
      geodesic: true,
      strokeColor: 'rgb(20, 120, 218)',
      strokeOpacity: 1.0,
      strokeWeight: 2,
      editable: true,
      };
      console.log( 'ulang' );
      window['poly' + increase] = new google.maps.Polyline(polyOptions);
      window['poly' + increase].setMap(map);
      }
      }

      var res1 = val.split('=====================================');
      if( res1.length > 1 ){
      res_dest = res1[1].trim();
      json = JSON.parse(res_dest);
      json_root = json.destination;
      length_json = json.destination.length;

      for( b = 0; b < length_json; b++ ){
      var chr = String.fromCharCode(97 + b);
      __global_destination_now = chr;
      latlng1 = json_root[b][chr].toString().split(',');
      next_lat1 = latlng1[0].trim();
      next_lng2 = latlng1[1].trim();

      var pointPath1 = new google.maps.LatLng(next_lat1, next_lng2);
      icons = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
      var location = event.latLng;
      window['marker_dest_' + __global_destination_now] = new google.maps.Marker({
      position: pointPath1,
      map: map,
      icon: icons,
      draggable: true,
      title: '' + __global_destination_now,
      });
      }
      }

      // reset
      textarea.value = '';
      }
      /* load google maps v3 */
      google.maps.event.addDomListener(window, 'load', initialize);

      $(document).ready(function() {
      $('#clear-map').click(clearMap);
      });








      share







      New contributor




      MALANG arema is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.












      I want to store marker and polyline in the database



      In this script, I have 3 functions, that is to draw a polyline, marker and the point of destination



      Can anyone fix my script below ?



      var map;
      var __global_node_now = 'null';
      var __global_node = false;
      var __global_line = false;
      var __global_destination = false;
      var __global_destination_now = 'null';
      var __global_load_json = false;
      var __global_arr_node = new Array();
      var __global_first_line = 0;

      function add_node(){
      var active_x = document.getElementById('add_nodex');
      var active_y = document.getElementById('add_linex');
      var active_z = document.getElementById('add_destinationx');
      /* disable other tools */
      __global_node = true;
      __global_line = false;
      __global_destination = false;
      }

      function add_line(){
      var active_x = document.getElementById('add_nodex');
      var active_y = document.getElementById('add_linex');
      var active_z = document.getElementById('add_destinationx');
      /* disable other tools */
      __global_line = true;
      __global_node = false;
      __global_destination = false;
      }

      function add_destination(){
      var active_x = document.getElementById('add_nodex');
      var active_y = document.getElementById('add_linex');
      var active_z = document.getElementById('add_destinationx');
      /* disable other tools */
      __global_destination = true;
      __global_node = false;
      __global_line = false;
      }

      function edit_destination_name(a, thiis){
      var edit_destination = prompt("Edit destination", $(thiis).html());
      console.log(window['marker_dest_' + a]);
      // id marker_destintation
      marker_destination = window['marker_dest_' + a];
      // update event popup
      if(edit_destination)
      {
      // update destination_name by live
      $(thiis).html(edit_destination);
      // update title marker
      marker_destination.setTitle(edit_destination);
      console.log(marker_destination.title);
      // remove previously event
      google.maps.event.clearListeners(marker_destination, 'click');
      // popup event
      var content = "<span class='destination_name' onclick='edit_destination_name("" + a + "", this)'>" + edit_destination + "</span>";
      var infowindow = new google.maps.InfoWindow();
      google.maps.event.addListener(marker_destination,'click', (function(marker_destination,content,infowindow){
      return function() {
      infowindow.setContent(content);
      //console.log(infowindow.getMap());
      infowindow.open(map,marker_destination);
      };
      })(marker_destination,content,infowindow));
      }
      }

      var poly;
      var map;
      var increase = 0;
      function initialize() {
      /* setup map */
      var mapOptions = {
      center: new google.maps.LatLng(-7.977022, 112.634151),
      zoom: 15,
      zoomControl: true,
      streetViewControl: false,
      mapTypeControl: false,
      gestureHandling: 'greedy'
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
      var trafficLayer = new google.maps.TrafficLayer();
      trafficLayer.setMap(map);
      /* setup polyline */
      var polyOptions = {
      geodesic: true,
      strokeColor: 'rgb(20, 120, 218)',
      strokeOpacity: 1.0,
      strokeWeight: 2,
      editable: true,
      };
      window['poly' + increase] = new google.maps.Polyline(polyOptions);
      window['poly' + increase].setMap(map);

      /* create marker and line by click */
      google.maps.event.addListener(map, 'click', function(event)
      {
      /* if tools 'add destination' is active, create marker */
      if( __global_destination == true ){
      var key_destination = 0;
      //__global_destination_now = 'a';
      if( __global_destination_now == 'null' ){
      __global_destination_now = 'a';
      key_destination = 0;
      }else{
      __global_destination_now = String.fromCharCode( __global_destination_now.charCodeAt(0) + 1 );
      key_destination += 1;
      }
      console.log(__global_destination_now);
      // nama destination
      destination_name = "HAE";
      window['infowindow'+key_destination] = new google.maps.InfoWindow({
      content: '<div>'+ destination_name +'</div>'
      });

      // add marker destination
      icons = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
      var location = event.latLng;
      window['marker_dest_' + __global_destination_now] = new google.maps.Marker({
      position: location,
      map: map,
      icon: icons,
      draggable: true,
      title: '' + __global_destination_now,
      });

      // id marker_destintation
      var marker_destintation = window['marker_dest_' + __global_destination_now];

      // popup event
      var content = "<span class='destination_name' onclick='edit_destination_name("" + __global_destination_now + "", this)'>" + __global_destination_now + "</span>";
      var infowindow = new google.maps.InfoWindow();
      google.maps.event.addListener(marker_destintation,'click', (function(marker_destintation,content,infowindow){
      return function() {
      infowindow.setContent(content);
      infowindow.open(map,marker_destintation);
      };
      })(marker_destintation,content,infowindow));
      }

      /* if tools 'add node' is active, create marker */
      if( __global_node == true ) {
      var key_node = 0;
      if( __global_node_now == 'null' ){
      __global_node_now = 'a';
      key_node = 0;
      }else{
      __global_node_now = String.fromCharCode( __global_node_now.charCodeAt(0) + 1 );
      key_destination += 1;
      }

      /* draw a new marker */
      var location = event.latLng;
      var marker = new google.maps.Marker({
      position: location,
      map: map,
      title: '' + __global_node_now,
      });

      // popup event
      var content_marker = "<div>" + __global_node_now + "</div>";
      var infowindow_marker = new google.maps.InfoWindow();
      google.maps.event.addListener(marker,'click', (function(marker,content_marker,infowindow_marker){
      return function() {
      infowindow_marker.setContent(content_marker);
      infowindow_marker.open(map,marker);
      };
      })(marker,content_marker,infowindow_marker));

      /* Add listener to getting latLng marker
      * using 'list object event' : {this.title, this.position}
      */
      google.maps.event.addListener(marker, "click", function (evt)
      {
      /* if tools 'add line' is active, create first polyline */
      if( __global_line == true ){

      /* first polyline */
      var path = window['poly' + increase].getPath();
      path.push(event.latLng);

      /* temporary for node start - finish for json
      * example : 0-1 {"coordinates": [[123, 456], [321, 123]]}
      */
      if( __global_first_line == 0 )
      temp_node1 = this.title;


      /* jika meng-klik ke marker/node akhir dalam pembuatan polyline */
      if( evt.latLng.lat() == event.latLng.lat() && evt.latLng.lng() == event.latLng.lng() && __global_first_line == 1 ){
      alert('node & line berhasil disambung!');
      temp_node2 = this.title;
      temp_node_fix = temp_node1 + '-' + temp_node2;
      __global_arr_node.push(temp_node_fix);
      /* adding id window['poly' + increase] */
      increase += 1;
      /* reset first polyline */
      __global_first_line = 0;

      /* reset polyline */
      var polyOptions = {
      geodesic: true,
      strokeColor: 'rgb(20, 120, 218)',
      strokeOpacity: 1.0,
      strokeWeight: 2,
      editable: true,
      //draggable: true,
      };
      window['poly' + increase] = new google.maps.Polyline(polyOptions);
      window['poly' + increase].setMap(map);
      return false; // die()
      }
      __global_first_line = 1;
      }
      }); //end addListener
      }else if( __global_line == true ){
      if( __global_first_line == 1 ){
      var path = window['poly' + increase].getPath();
      path.push(event.latLng);
      }else{
      alert('klik Node dulu!');
      }
      }
      }); // end click map
      }

      function save_markerlinex(){
      //console.log($('#text_route').val());
      //return false;
      var json_google_map = '';
      for( i = 0; i < increase; i++ )
      {
      // val_latlng = window['poly' + i].getPath().j;
      // length_latlng = window['poly' + i].getPath().j.length;
      val_latlng = window['poly' + i].getPath().getArray(); // new
      length_latlng = window['poly' + i].getPath().length; // new
      var str2 = '';
      var polylineLength = 0;
      for( a = 0; a < length_latlng; a++ )
      {
      lat1 = val_latlng[a].lat();
      lng2 = val_latlng[a].lng();

      /* calculate distance polyline */
      if ( a < (length_latlng - 1) ) {
      next_lat1 = val_latlng[(a+1)].lat();
      next_lng2 = val_latlng[(a+1)].lng();
      var pointPath1 = new google.maps.LatLng(lat1, lng2);
      var pointPath2 = new google.maps.LatLng(next_lat1, next_lng2);
      polylineLength += google.maps.geometry.spherical.computeDistanceBetween(pointPath1, pointPath2);
      }
      bracket_latlng = '[' + lat1 + ', ' + lng2 + ']';
      console.log("bracket : " + bracket_latlng);
      if( a == (length_latlng - 1) ){ // end
      str2 += bracket_latlng;
      }else{
      str2 += bracket_latlng + ',';
      }
      }
      nodes_info = __global_arr_node[i];
      create_json = '{"nodes": ["' + nodes_info + '"], "coordinates": [' + str2 + '], "distance_metres": [' + polylineLength + ']}';
      //console.log("str2 : " + str2);
      /* reverse coordinates */
      str3_reverse = '[' + str2 + ']';
      console.log(str3_reverse);
      str3_reverse_p = JSON.parse(str3_reverse);
      str3 = '';
      for( u = (str3_reverse_p.length - 1); u >= 0; u-- )
      {
      // rev = reverse
      latlng_rev = str3_reverse_p[u];
      bracket_latlng_rev = '[' + latlng_rev + ']';
      if( u == 0 ){ // end
      str3 += bracket_latlng_rev;
      }else{
      str3 += bracket_latlng_rev + ',';
      }
      }
      explode = nodes_info.split('-');
      nodes_info_rev = explode[1] + '-' + explode[0];
      create_json_rev = '{"nodes": ["' + nodes_info_rev + '"], "coordinates": [' + str3 + '], "distance_metres": [' + polylineLength + ']}';
      if( i == ( increase - 1 ) )
      pemisah = 'nn=====================================nn';
      else
      pemisah = 'nn-------------------------------------nn';
      json_google_map += create_json + 'nn' + create_json_rev + pemisah;
      }

      // list marker destination
      if( __global_destination_now != 'null' ){
      number_dest = ( __global_destination_now.charCodeAt(0) - 97 );
      str4 = '';
      coord_dest = '';
      for( y = 0; y <= number_dest; y++ ){
      var chr = String.fromCharCode(97 + y);
      var title_live = window['marker_dest_' + chr].getTitle();
      console.log(window['marker_dest_' + chr].position);
      latsx = window['marker_dest_' + chr].position.lat();
      lngsx = window['marker_dest_' + chr].position.lng();
      if( y == number_dest ) // end
      comma = '';
      else
      comma = ',';
      coord_dest += '{"' + title_live + '": "' + latsx + ', ' + lngsx + '"}' + comma;
      }
      str4 = '{"destination": [' + coord_dest + ']}';
      json_google_map += str4;
      }
      //document.getElementById('txt').innerHTML = json_google_map;
      rute_angkot = $('#text_route').val();

      //kalo belum buat graph
      if(json_google_map == '' || rute_angkot == ''){
      alert('buat graph dulu!');
      return false;
      }

      //console.log(rute_angkot);
      $.ajax({
      method:"POST",
      url : "json_to_sql.php",
      data: {
      json_google_map: json_google_map,
      route_angkot: rute_angkot
      },
      success:function(url){
      window.location = 'download_sql.php?r=' + url;
      },
      error:function(er){
      alert('error: '+er);
      // remove loading
      $('#run_dijkstra').show();
      $('#loading').hide();
      }
      });
      }

      function load_json(){
      textarea = document.getElementById('text_json');
      val = textarea.value;
      if( val.trim() == '' ){
      return false;
      }
      var res = val.split('-------------------------------------');
      for( i = 0; i < res.length; i++ ){
      var res1 = res[i].trim();
      var res2 = res1.split('n');
      if( res2.length > 1 ){ // coordinates is exist
      var json = JSON.parse(res2[0]);
      var nodes = json.nodes.toString();
      var coord = json.coordinates;
      for( a = 0; a < coord.length; a++ ){
      latlngs = coord[a].toString();
      splits = latlngs.split(',');
      lats = splits[0].trim();
      lngs = splits[1].trim();

      var pointPoly = new google.maps.LatLng(lats, lngs);
      /* first polyline */
      var path = window['poly' + increase].getPath();
      path.push(pointPoly);
      /* draw a new marker */
      if( a == 0 || a == (coord.length - 1) ){
      var str_split = nodes.split('-');
      if( a == 0 )
      nodes_target = str_split[0];
      else if( a == (coord.length - 1) )
      nodes_target = str_split[1];

      var location = pointPoly;
      var marker = new google.maps.Marker({
      position: location,
      map: map,
      title: '' + nodes_target,
      });
      }
      }
      increase += 1;
      __global_arr_node.push(nodes);

      /* reset polyline */
      var polyOptions = {
      geodesic: true,
      strokeColor: 'rgb(20, 120, 218)',
      strokeOpacity: 1.0,
      strokeWeight: 2,
      editable: true,
      };
      console.log( 'ulang' );
      window['poly' + increase] = new google.maps.Polyline(polyOptions);
      window['poly' + increase].setMap(map);
      }
      }

      var res1 = val.split('=====================================');
      if( res1.length > 1 ){
      res_dest = res1[1].trim();
      json = JSON.parse(res_dest);
      json_root = json.destination;
      length_json = json.destination.length;

      for( b = 0; b < length_json; b++ ){
      var chr = String.fromCharCode(97 + b);
      __global_destination_now = chr;
      latlng1 = json_root[b][chr].toString().split(',');
      next_lat1 = latlng1[0].trim();
      next_lng2 = latlng1[1].trim();

      var pointPath1 = new google.maps.LatLng(next_lat1, next_lng2);
      icons = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
      var location = event.latLng;
      window['marker_dest_' + __global_destination_now] = new google.maps.Marker({
      position: pointPath1,
      map: map,
      icon: icons,
      draggable: true,
      title: '' + __global_destination_now,
      });
      }
      }

      // reset
      textarea.value = '';
      }
      /* load google maps v3 */
      google.maps.event.addDomListener(window, 'load', initialize);

      $(document).ready(function() {
      $('#clear-map').click(clearMap);
      });






      google-maps-api markers php mysql polyline-creation





      share







      New contributor




      MALANG arema is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.










      share







      New contributor




      MALANG arema is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.








      share



      share






      New contributor




      MALANG arema is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      asked 6 mins ago









      MALANG aremaMALANG arema

      1




      1




      New contributor




      MALANG arema is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.





      New contributor





      MALANG arema is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






      MALANG arema is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






















          0






          active

          oldest

          votes












          Your Answer








          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "79"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: false,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: null,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });






          MALANG arema is a new contributor. Be nice, and check out our Code of Conduct.










          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f317720%2fhow-to-save-marker-and-polyline-in-database%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          0






          active

          oldest

          votes








          0






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          MALANG arema is a new contributor. Be nice, and check out our Code of Conduct.










          draft saved

          draft discarded


















          MALANG arema is a new contributor. Be nice, and check out our Code of Conduct.













          MALANG arema is a new contributor. Be nice, and check out our Code of Conduct.












          MALANG arema is a new contributor. Be nice, and check out our Code of Conduct.
















          Thanks for contributing an answer to Geographic Information Systems Stack Exchange!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f317720%2fhow-to-save-marker-and-polyline-in-database%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Щит и меч (фильм) Содержание Названия серий | Сюжет |...

          Венесуэла на летних Олимпийских играх 2000 Содержание Состав...

          Meter-Bus Содержание Параметры шины | Стандартизация |...