Google Maps API v3 jQuery Mobile

Question

I am trying to figure out how to limit the number of markers that can be created to one. Using the example code from the "other-example.html" file, the user can create multiple markers and I would like the user to be limited to one marker. I tried an "if" statement such as "int i; if (i<1){... i++;}" around the addMarker function and didn't have any luck. I am guessing it is something really simple to fix.

http://jquery-ui-map.googlecode.com/svn/trunk/demos/other-examples.html

Also I am trying to find a good tutorial on using gmaps to record lat/long location data via PHP/MYSQL to a database I have already created. Specifically, how can I pass the newly created marker's lat/long info to the database and then later retrieve the coordinates to be displayed on a non-editable gmap?

I will appreciate any help I can get with these questions, I don't expect them all to be answered!

Answer 1

If you're allowing users to add markers, I'd say you then make an ajax call to your PHP page, passing user ID, latitude and longitude (and anything else your DB will require).

To prevent users adding more than 1 marker, I think you must have been on the right tracks. I'd maybe do it like this.

var intMarkers = 0;  // make it global

$('#map_canvas').gmap().bind('init', function(event, map) {
            $(map).click( function(event) {
                intMarkers++;
                if (intMarkers === 0) {
                            $('#map_canvas').gmap('addMarker', {'position': event.latLng, 'draggable': true, 'bounds': false}, function(map, marker) {
                                $('#dialog').append('<form id="dialog'+marker.__gm_id+'" method="get" action="/" style="display:none;"><p><label for="country">Country</label><input id="country'+marker.__gm_id+'" class="txt" name="country" value=""/></p><p><label for="state">State</label><input id="state'+marker.__gm_id+'" class="txt" name="state" value=""/></p><p><label for="address">Address</label><input id="address'+marker.__gm_id+'" class="txt" name="address" value=""/></p><p><label for="comment">Comment</label><textarea id="comment" class="txt" name="comment" cols="40" rows="5"></textarea></p></form>');
                                findLocation(marker.getPosition(), marker);
                            }).dragend( function(event) {
                                var self = this;
                                findLocation(event.latLng, this);
                            }).click( function() {
                                openDialog(this);
                            });

                            // stick in an Ajax call here too
                }
            });
        });

Also the example code is using the deprecated Google Maps API 2, I'd suggest you use API 3 instead.