Transfer google map coordinates to mysql database

Question

I have a google map where the user can create a polyline. I have stored the polyline (lat,lng)coordinates into an array. Now i want to use php or javascript to transfer these coordinates to a mysql database or is there other better options? How should i proceed?

Here is my code:

(function() {
    window.onload = function() {

    var path;
    var marker;
    var infowindow;
    var places = [];

    //create reference to div tag in HTML file
    var mapDiv = document.getElementById('map');

    // option properties of map
    var options = { 
            center: new google.maps.LatLng(-20.2796, 57.5074),
            zoom : 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // create map object
    var map = new google.maps.Map(mapDiv, options);

    // create MVC array to populate on click event
    var route = new google.maps.MVCArray();

    var polyline = new google.maps.Polyline({
        path: route,
        strokeColor: '#ff0000',
        strokeOpacity: 0.6,
        strokeWeight: 5
    });

    polyline.setMap(map);

    // create click event,attach to map and populate route array

    google.maps.event.addListener(map,'click', function(e) {

        // create reference to polyline object
         path = polyline.getPath();

         // add the position clicked on map to MVC array
        path.push(e.latLng);

    });

    // display coordinates
    document.getElementById('coords').onclick = function() {

        for(var i = 0; i < path.getLength(); i++) {

            alert('coords: ' + path.getAt(i).toUrlValue(2) +'\n');
        }


    }

    // create marker on right click
        google.maps.event.addListener(map,'rightclick', function(e) {

                marker = new google.maps.Marker({
                position: e.latLng,
                map: map
            });
                places.push(e.latLng);

                // get coordinates in infowindow on click

                google.maps.event.addListener(marker,'click', function(event){

                    if(!infowindow) {

                        infowindow = new google.maps.InfoWindow();

                    }
                    infowindow.setContent('coords: ' + marker.getPosition().toUrlValue(3));
                    infowindow.open(map,marker);
                });

            });

    };

})();

Answer 1

All right now, here is the database solution for you:

Table paths will store the paths you have, from your array.

CREATE TABLE `gmap`.`paths` (
  `pID` INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
  `pName` VARCHAR(75) NOT NULL,
  `pStartLat` VARCHAR(25) NOT NULL,
  `pStartLng` VARCHAR(25) NOT NULL,
  `pAverageSpeed` FLOAT NOT NULL,
  PRIMARY KEY (`pID`)
)
ENGINE = MyISAM;

Table paths will store your user/path name (whatever you want) in pName field, starting point in pStartLat/pStartLng fields, pAverageSpeed is of course average speed (don't know if you want it, just in case) and pID is identifier which you will use with another table:

CREATE TABLE `gmap`.`coords` (
  `cID` INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
  `cLat` VARCHAR(25) NOT NULL,
  `cLng` VARCHAR(25) NOT NULL,
  `cSpeed` FLOAT NOT NULL,
  `cPath` INTEGER UNSIGNED NOT NULL,
  PRIMARY KEY (`cID`)
)
ENGINE = MyISAM;

This table will let you store coordinates - with speed to each one.

Now, let's say you want to show path called 'TestOne'.

// Connect to the database - I assume you can do that
// and retrieve data

SELECT * FROM paths WHERE pName = "TestOne"

Now you got ID, name, starting point coordinates and average speed in table (mysql_fetch_assoc would be great for that).

Then, using the ID you can retrieve the rest of the coordinates:

SELECT * FROM coords WHERE cPath = ID

And now, using e. g. while loop, you can retrieve all coordinates into an array.

Of course first you have to store that data using INSERT INTO construction or similar :-)

Answer 2

you can store it whenever you want - it depends how do you want to use those data later. You can store it as JSON encoded array in TEXT field, you can save lat / lng coordinates in separated fields like this:

// Table for polylines
CREATE TABLE `polylines` (
  `pID` INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
  `pName` VARCHAR(45) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  PRIMARY KEY (`pID`)
)
ENGINE = MyISAM
CHARACTER SET utf8 COLLATE utf8_general_ci;

// Table for coordinates
CREATE TABLE `coords` (
  `cID` INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
  `cPolyline` INTEGER UNSIGNED NOT NULL,
  `cLat` VARCHAR(15) NOT NULL,
  `cLng` VARCHAR(15) NOT NULL,
  PRIMARY KEY (`cID`)
)
ENGINE = MyISAM
CHARACTER SET utf8 COLLATE utf8_general_ci;

Now you can get polylines like that:

SELECT * FROM polylines WHERE pName = 'something'

and then coordinates:

SELECT cLat, cLng FROM coords WHERE cPolyline = ID

There are many possibilities and options - just like I said before - it all depends on what do you want to do next.

Answer 3

you can use many solution, for example your code seems to this:

var my_map= new GMap2(document.getElementById("my_map"));
    my_map.setCenter(new GLatLng(36.82,10.17),10);
    my_map.addControl(new GSmallMapControl());
    GEvent.addListener(my_map, "click", function(overlay,point){
    var lat = point.lat();
    var lng = point.lng();
    $('#input_lat').val(lat);
    $('#input_long').val(lng); 
 });

and input_lat, input_long can be hidden or visible input into your form, then you save into your data base