Hank Joreid
Posts: 0
Joined: Mon Apr 20, 2015 1:00 pm

Select location with map

In one of my apps i need the user to view a map and set a location on the map by setting the map pin to the location the user self want and then sendt it in to the DB with Location and some descipsion.

How to do this.

Hank Joreid
Posts: 0
Joined: Mon Apr 20, 2015 1:00 pm

Select location with map

Hi, agan.
the links in the old post don't work.
any other ide?

Bruce Stuart
Posts: 0
Joined: Fri Oct 24, 2014 4:42 am

Select location with map

Hank,

do you want the user to (a) drop a new pin in addition to the existing pin on the map or (2) move the existing pin ?

Best,

Bruce

Hank Joreid
Posts: 0
Joined: Mon Apr 20, 2015 1:00 pm

Select location with map

2, Move the existing pin

Bruce Stuart
Posts: 0
Joined: Fri Oct 24, 2014 4:42 am

Select location with map

Hank,

It's a good idea to read all about markers here if you'd like to make them:

https://developers.google.com/maps/do...

  1. Movable (See make a marker drag-able at the bottom of this article).

    Here's where I create a marker that's moveable - after my geolocation event (in the success event of the geolocation call...). You don't have to do this code - you can let appery create your marker - you just need to set the property on your marker to "draggable" - see the link above for how to do that.....

    Code: Select all

                        omarker = new google.maps.Marker({ 
                             position: oposition, // a position object defined previiously 
                             map: omap, // your map object 
                             draggable: true, // set the draggable property to true 
                             title: "Drag me to a new location" + sid, // title for the marker  
                             animation: google.maps.Animation.DROP,// remove if you want 
                             icon: '[url=http://maps.google.com/mapfiles/kml/pal2/icon13.png]http://maps.google.com/mapfiles/kml/p...[/url]' // not required 
                         }); 

Read here for adding a 'listener' event - your event would be 'dragend'
https://developers.google.com/maps/do...

  1. You want to add a listener event....which gets keyed when the user 'drops' the moveable marker...

    Here's a sample piece of code - that you would add - if your marker was named 'marker'

    google.maps.event.addListener(marker, 'dragend', function() {
    frecordlocationindb( marker ) } );

    function frecordlocationindb(omarker){
    localStorage.setItem('sCurrentlat', omarker.getPosition().lat ());
    localStorage.setItem('sCurrentlng').omarker.getPosition().lng());
    service_update_database_withcurrentposition.execute() // where you create this service

    }

Bruce Stuart
Posts: 0
Joined: Fri Oct 24, 2014 4:42 am

Select location with map

of course you need to create the service I've made up, the local storage variables, and make a decision on whether or not you want to use the default appery marker or hide it (turn off the visible flag on it) - and add your own - as I've done above - sometime after your map has initialized - and your are able to set the map center and the location of the marker.

Hank Joreid
Posts: 0
Joined: Mon Apr 20, 2015 1:00 pm

Select location with map

i, i have try to set the marker as draggable but cant get it right.
do you have any more details for this? se my ss:
Image Image Image Image Image

Bruce Stuart
Posts: 0
Joined: Fri Oct 24, 2014 4:42 am

Select location with map

working on a reply that will help... give me an hour or so

Bruce Stuart
Posts: 0
Joined: Fri Oct 24, 2014 4:42 am

Select location with map

Here's some sample code to help you drop a custom marker on a map that is moveable. When this works in your app - I'll give you some sample code to execute a service that records the new location in the database.

Best,

Bruce

  1. Create a new Javacript file - Green button on the right - create new - select Javascript - and then click create.

    Image

  2. Load the contents of this file - into the new - blank Javascript file . And press save.

    http://the-software-studio.com/javasc...

  3. In your page show event - add Javascript to the page show method - and these two lines of code:

    bMarkerDropped = false;
    fInitMarker();

  4. Make sure your geolocation event or whatever event you want to use to set the initial center of the map (and where the marker is being dropped ) is being RUN BEFORE THE PAGE SHOW METHOD. In the geolocation or other method to determine map center at startup - be sure to set the two local storage variables I've used in this link :

    http://the-software-studio.com/javasc...

    (the variables are s_long and s_lat) - to have values - or else all of the events here will fail.

    Best,

    Bruce

Return to “Issues”