PHP form + Geolocation

PHP
1

Hi, my first post, go easy on me please:).

I’ll be upfront - i’m a novice at php, little behind on the tech. However, i am learning and maybe with your help i might learn something new :slight_smile: Ok so i’ll lay it out to be clear and not lead to misunderstanding.

My problem is this:
I am trying to add to my signup form (users sign up to post listings of their music) GeoLocation. I have added the code to show markers, input manually coordiates etrc. The problem is that once the form is submitted, it does not save the users selected marker on the map.

My sign up uses mysql and Post to pass and storer user data, it is then posted on my listings page.

Here is the code i’m using:

(new post.php)

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map" style="width: 500x; height: 500px"></div>

<form id="dataform">
    <fieldset>
        <legend>Form Information</legend>
            <label for="firstnamefield">First Name</label>
            <input type="text" name="firstname" id="firstnamefield"><br>
            <label for="lastnamefield">Last Name</label>
            <input type="text" name="lastname" id="lastnamefield"><br>
            <input type="reset" name="reset" value="Clear">
            <input type="submit" name="submit" id="submitbutton" value="Submit Data">
            <input type="hidden" name="latlng" id="latlngfield">
        </fieldset>
</form>

(the J.S)

var mapInstance;
var marker;

function placeMarker(location) {
    if (marker) {
        marker.setPosition(location);
    } else {
        marker = new google.maps.Marker({
            position: location,
            map: mapInstance
        });
    }
}

function submitAction() {
    alert("Value of firstname is " + $("#firstnamefield").val());
    alert("Value of lastname is " + $("#lastnamefield").val());
    alert("Value of latlng is " + $("#latlngfield").val());
}

$(document).ready(function() {
    var latlng = new google.maps.LatLng(35.603789, -77.364693);
    var mapOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DEFAULT
        }
    };
    mapInstance = new google.maps.Map(document.getElementById("map"), mapOptions);

    google.maps.event.addListener(mapInstance, 'click', function(event) {
        placeMarker(event.latLng);
    });

    $("#submitbutton").on("click", function(e) {
        // Prevent normal submit action
        e.preventDefault();
        // Collect current latlng of marker and put in hidden form field
        if (marker) {
            $("#latlngfield").val(marker.getPosition().toString());
        } else {
            $("#latlngfield").val("not entered");
        }
        // Show results for debugging
        submitAction();
        // Uncomment this for production and remove submitAction() call
        // $("#dataform").submit();
    });
});

Now i apologise if this question does not reflect the nature of this section of the site, that it might also be best to have posted on Google support maybe?. Regardless, thank you for reading, time and support.

P.S I can provide my listing code or if you wish to save your time then please just link me or advise me where to find the information i require.

Thank you

2

Sorry if this is not the answer you were looking for, because I honestly don’t know, I’m not that familiar with Javascript.
But I thought I would throw this one in as another option you may or may not want to try.
I saw a tutorial the other day which takes a different approach to a similar task. The difference being, instead of the user adding the location on the map, they type in the address to the form, and the map finds the location.
This is the link.

3

Hey SamA74,

Thank you for your reply and advice. I’m going to read up on the link you provided and i’ll get back to you if it worked. Regardless of the outcome, thank you kindly and may you have a wonderful Christmas.

P.S i have been searching endlessly to find a way to add the geolocation, thanks to you i have a better chance.

4

Ok, so the user clicks on the map which populates the fields “latlngfield”, and when the form is submitted, latlngfield, is saved in your database, right?

Are you sure latlngfield is being populated correctly?

Also, I don’t see any JS where a marker is being placed on the map using the saved coordinates from the db.

5

Hey, i have very little experience with java + google maps integration. The above code is meant to collect the data “hidden” field and post it to my listings. I think i have made the error of not assigning it to the database. Kinda got a head of my self, i assumed i could use a form, use a hidden field and just have it $post to my site.

You have helped me enough with your reply but i think it’s down like you said the db. Hmm…

Thanks for your help :slight_smile:

6

One random off topic question though, your profile says you have made 1 post and you joined in 2008? Maybe i should consider that a compliment lol.

7

<input type=“hidden” name=“latlng” id=“latlngfield”>

The html form submits using the NAME attribute, not the ID attribute. So if your database storing code is looking for latlngfield, it wont find it.

Secondly, i see no code in your script that actually calls PlaceMarker when you submit data - only when you click on the map itself.

8