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 = '\n\n=====================================\n\n';
    else
      pemisah = '\n\n-------------------------------------\n\n';
    json_google_map += create_json + '\n\n' + 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);    
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.