Vjylku

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);    

});