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
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
New contributor
add a comment |
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
New contributor
add a comment |
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
New contributor
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
google-maps-api markers php mysql polyline-creation
New contributor
New contributor
New contributor
asked 6 mins ago
MALANG aremaMALANG arema
1
1
New contributor
New contributor
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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.
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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