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);    
});
  • You might try asking this question on stackoverflow. While you may be dealing with points on a map, your question looks a lot more like a programming question (either Javascript or PHP or the Google Maps Javascript API) than a GIS question. Also, you have a lot of code there. It would be helpful if you split it into what is working and what isn't, so people who might be able to help don't have to spend as much time understanding it. – hlongmore Jun 21 at 22:57

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.