Javascript to PHP and innerHTML deletion -
i implementing script need on 2 issues unable figure out. idea allow create running route , store route database via coordinates.
the code follows: (credits to: post 19 here , this fiddle here)
<html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>drawing tools (b)</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script> window.onload = function() { var latlng = new google.maps.latlng(51.4975941, -0.0803232); var map = new google.maps.map(document.getelementbyid('map'), { center: latlng, zoom: 11, maptypeid: google.maps.maptypeid.roadmap }); var marker = new google.maps.marker({ position: latlng, map: map, title: 'set lat/lon values property', draggable: true }); google.maps.event.addlistener(marker, 'dragend', function(a) { console.log(a); var div = document.createelement('div'); div.innerhtml = a.latlng.lat().tofixed(4) + ', ' + a.latlng.lng().tofixed(4); document.getelementsbytagname('body')[0].appendchild(div); }); }; </script> </head> <body> <div id="map" style="height:300px;"></div> </body> </html> first problem trying solve:
div.innerhtml = a.latlng.lat().tofixed(4) + ', ' + a.latlng.lng().tofixed(4); how can add each of these lat & long coordinates (as person creates route) php array in order insert them database. struggling displaying them on fly.
second problem trying solve:
div.innerhtml = a.latlng.lat().tofixed(4) + ', ' + a.latlng.lng().tofixed(4); if user drops pin there way delete latest coords should make mistake?
i have tried different methods (i no js);
div.innerhtml = a.latlng.lat().tofixed(4) + ', ' + a.latlng.lng().tofixed(4) + ', <a onclick="$(this).closest("div").remove();">delete</a>'; but can't seem working.
any on these problems appreciated. many thanks.
it easier hold co-ordinates in javascript object/array can added/removed , saved easily.
i use more appropriate html element display them user, eg unordered/ordered list:
<html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>drawing tools (b)</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function() { //create object hold values , encapsulate adding, removing , saving function list(ul, save){ this.items = []; this.ul = ul; this.save = save; } //add item list list.prototype.add=function(item){ this.items.push(item); this.rebuilddom(); }; //remove item list list.prototype.removeat=function(index){ this.items.splice(index, 1); this.rebuilddom(); }; //update contents of <ul> list display current list items list.prototype.rebuilddom=function(){ var html=''; for(var = 0; < this.items.length; i++){ //note change here, each item array, must //joined string display html += '<li>'+this.items[i].join(' , ') +'<span class="remove" data-id="'+i+'">x</span></li>' } $('#'+this.ul).html(html); }; //upload data via ajax list.prototype.upload=function(){ var data = {data: this.items}; $.post('/save.php', data, function(response){ console.log(response); }) }; list.prototype.init = function(){ var _this = this; //remove items list when remove clicked $('#'+this.ul).on('click', 'span.remove', function(){ var index = $(this).data('id'); _this.removeat(index); }); //bind click event of save button, , upload data $('#'+this.save).click(function(ev){ ev.preventdefault(); _this.upload(); }); }; var list = new list('items', 'save'); list.init(); var latlng = new google.maps.latlng(51.4975941, -0.0803232); var map = new google.maps.map(document.getelementbyid('map'), { center: latlng, zoom: 11, maptypeid: google.maps.maptypeid.roadmap }); var marker = new google.maps.marker({ position: latlng, map: map, title: 'set lat/lon values property', draggable: true }); google.maps.event.addlistener(marker, 'dragend', function(a) { console.log(a); //note item array containing both values, not string var item = [a.latlng.lat().tofixed(4) , a.latlng.lng().tofixed(4)]; //add item our list list.add(item); }); }); </script> <style> body{ font-family: "helvetica neue", helvetica, arial, sans-serif; } #map{ height: 400px; border-bottom: 1px solid #666666; margin-bottom: 20px; } h3{ font-family: inherit; } #items{ list-style: none; width: 300px; border: 1px solid #d8d8d8; } #items li{ background-color: #666666; padding: 5px; margin: 5px; color:#ffffff; } #items li span.remove{ float: right; background-color: red; color: #ffffff; margin: -5px; padding: 5px; } </style> </head> <body> <div id="map" ></div> <button id="save">save</button> <h3>co-ordinates of route:</h3> <ul id="items"></ul> </body> </html> live example: https://jsfiddle.net/rmsjf5oy/2/
to retrieve data in php, can access $_post super global:
//save.php if(isset($_post['data']){ $co-ordinates = $_post['data']; // $co-ordinates php array // [ // ['51.4886', '-0.0666'], // ['51.4886', '-0.0666'], // ['51.4886', '-0.0666'] // ] //do data send message javascript header('content-type: application/json'); echo json_encode(['success'=>true, 'message'=>'thanks, got data']); } look in js console in browser see response, or other console.log(response); in upload method else data, such show in div
Comments
Post a Comment