Question

I am constructing a pretty massive website that is WP powered , but uses Google maps as a main interface .

I have a page on the admin side, where I want to be bale to select a location by dragging a marker , and then save this data to MySQL (via Php/wp functions)

Problem is – as much as my WP and PHP foundations are pretty solid , my JS or Jquery are quite basic, not to say shaky .

I have “hacked” together a code from reading the Google maps API, tutoials, and examples –
It produces the map correctly, and also the marker to be dragged , and then it passes the value of [Lat,Lng] to a TXT input via jQuery – which then is saved to the DB.

Everything works fine – except for one issue :

• when I edit or save the data – the next time I will open this “post” – there is no marker ,and I need to make a new one and save again .

when I tried to get the Values of the input field with simple
var LatPoint = jQuery('[name=LatTxt]').val()

and

placeMarker(new google.maps.LatLng(LatPoint,LngPoint));

the map failed to generate at all.

• The second is that the drag marker function does not update the input.

• the third (and not less important) is that I KNOW that the code is horrible, and I am SURE there is a better way to achieve this – and whis whole website purpose is also for me to LEARN – I would like someone to revise the code and advise on how to optimize it ..

this is the code I have up to now ..

var map;
var markersArray = [];// to be used later to clear overlay array
      jQuery(document).ready(function(){ 
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_2k"), myOptions);

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

var marker;
 //Function to extract longitude

function placeMarker(location) {
  if ( marker ) {
    marker.setPosition(location);
  } else {
    marker = new google.maps.Marker({
    position: location,
    draggable: true, 
    title: 'Drag me',
     map: map
    });
    markersArray.push(marker); // to be used later to clear overlay array
  }
}

// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}
//Jquery update HTML input boxes
function updatelonlat() {
jQuery('#LatTxt').val(marker.getPosition().lat());
jQuery('#LonTxt').val(marker.getPosition().lng());
}
// add event click
google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(event.latLng);
 updatelonlat();
//var lat = parseFloat(document.getElementById('LatTxt').value); - somehow not working
});
//google.maps.event.addListener(marker, 'dragend', function(event) {
  //document.getElementById("#LatTxt").value = event.latLng.lat(); - somehow not working

map.setCenter(location);
         });

Any help would be greatly appreciated ..

EDIT I

I have set up a JSFIDDLE : http://jsfiddle.net/obmerk99/fSj9F/1/

Obviously I can not simulate the PHP function – but it is not needed .
What I want is when the page loads /refresh / save – it will start with a CENTER and a MARKER with vaalues from the input box…
Also – I just now noticed that the drag action is also not updating , I do not know if it is jsfiddle – or my function …

Answer 1

I’ve fixed your code in JSFiddle: http://jsfiddle.net/fSj9F/2/

The problems was:

1) You didn’t read the values of your inputs before creating the map, and setting the center.

2) You tried to use map.setCenter(location), but the location variable wasn’t set

3) You never called your placeMarker function, so the marker was never placed, before the user clicked the map

4) Even though you didn’t use the clearOverlays function, I replaced the for..in loop with a regular for. This way you don’t iterate the properties of the array (which isn’t just the elements, but also the methods of the Array object), but instead you only iterate over the elements contained in the array.

Notice that your code might’ve been easier to read if you’d declared your functions out of the “ready” function, and if you didn’t use global variables such as marker.