Inserire mappa interattiva in un form

[kappadocio]

Buongiorno a tutti. Sto impazzendo con Chronoforms (v4) per inserire una mappa interattiva che mi restituisca lat e long da inserire come record nel database.


Ho pensato di inserire la discussione in questo tread perchè comunque si parla del componente ed è fermo da febbraio. Spostatelo se pensate sia meglio 



Ahimè non sono molto esperto del componente (e ancora meno del linguaggio php e JS). Sto provando a trovare qualche consiglio a destra e sinistra sulla rete ma ancora non sono arrivato alla soluzione finale.


per ora ho costruito qualcosa: ovvero la mappa è visibile e inserendo l'indirizzo mi restituisce la panoramica del punto interessato ma non mi compare alcun marker e non posso neanche muoverlo per andare a trovare il punto preciso che mi interessa (e ovviamente con la necessità di fare upload delle coordinate durante lo spostamento)


ho creato un custom html code

Codice: [Seleziona]

<div class="ccms_form_element cfdiv_text" id="address_container_div">
    <label for="geo_address">Address</label>
    <input id="geo_address" maxlength="150" size="30" class="" title="" type="text" value="" name="geo_address" />
    <div class="clear"><>
    <div id="error-message-geo_address"><>
<>
<div id="map">
    <div id="map_canvas" style="width:600px; height:700px"><>
    <div id="crosshair"><>
<>
<div class="ccms_form_element cfdiv_text" id="latitude_container_div">
    <label for="map_lat">Latitude</label>
    <input id="map_lat" maxlength="150" size="30" class="" title="" type="text" value="" name="map_lat" />
    <div class="clear"><>
    <div id="error-message-map_lat"><>
<>
<div class="ccms_form_element cfdiv_text" id="longitude_container_div">
    <label for="map_lng">Longitude</label>
    <input id="map_lng" maxlength="150" size="30" class="" title="" type="text" value="" name="map_lng" />
    <div class="clear"><>
    <div id="error-message-map_lng"><>
<>

e tra gli events ho posto in OnLoad


un Custome Code (ovviamente con la mia ApiKey)

Codice: [Seleziona]

<?php $doc =& JFactory::getDocument();
$doc->addScript('http://maps.googleapis.com/maps/api/js?key=________________&sensor=false');
?>

e un Load JS

Codice: [Seleziona]

var map;
var geocoder;
var centerChangedLast;
var reverseGeocodedLast;
var currentReverseGeocodeResponse;
 
window.addEvent('domready', function() { 
 $('geo_address').addEvent('blur', geocode);
 initialize();
});


function initialize() {
 var latlng = new google.maps.LatLng(41.794,12.705);
 var myOptions = {
  zoom: 6,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 geocoder = new google.maps.Geocoder();
 setupEvents();
 centerChanged();
}


function setupEvents() {
 reverseGeocodedLast = new Date();
 centerChangedLast = new Date();


 setInterval(function() {
  if((new Date()).getSeconds() - centerChangedLast.getSeconds() > 1) {
   if (reverseGeocodedLast.getTime() < centerChangedLast.getTime() )
    reverseGeocode();
   }
  }, 1000);
 /*
 google.maps.event.addListener(map, 'zoom_changed', function() {
  document.getElementById("zoom_level").innerHTML = map.getZoom();
  $('map_zoom').value = map.getZoom();
 });
 */


 google.maps.event.addListener(map, 'center_changed', centerChanged);
/*
    google.maps.event.addDomListener(document.getElementById('crosshair'),'dblclick', function() {
       map.setZoom(map.getZoom() + 1);
    });
*/
}


function getCenterLatLngText() {
 return '(' + map.getCenter().lat() +', '+ map.getCenter().lng() +')';
}


function centerChanged() {
 centerChangedLast = new Date();
 var latlng = getCenterLatLngText();
 //document.getElementById('latlng').innerHTML = latlng;
 //document.getElementById('formatedAddress').innerHTML = '';
 currentReverseGeocodeResponse = null;
 $('map_lat').value = map.getCenter().lat();
 $('map_lng').value = map.getCenter().lng();
  }


function reverseGeocode() {
 reverseGeocodedLast = new Date();
 geocoder.geocode({latLng:map.getCenter()},reverseGeocodeResult);
}


function reverseGeocodeResult(results, status) {
 currentReverseGeocodeResponse = results;
 if(status == 'OK') {
  if(results.length == 0) {
   //document.getElementById('formatedAddress').innerHTML = 'None';
  } else {
   //document.getElementById('formatedAddress').innerHTML = results[0].formatted_address;
  }
 } else {
  //document.getElementById('formatedAddress').innerHTML = 'Error';
 }
}


function geocode() {
 var address = document.getElementById("geo_address").value;
 geocoder.geocode({
  'address': address,
  'partialmatch': true
 }, geocodeResult );
}


function geocodeResult(results, status) {
 if ( status == 'OK' && results.length > 0 ) {
  //console.log(results);
  map.fitBounds(results[0].geometry.viewport);
  $('map_lat').value = results[0].geometry.location.Oa;
  $('map_lng').value = results[0].geometry.location.Pa;
  // $('map_zoom').value = map.zoom;
 } else {
  alert("Geocode was not successful for the following reason: " + status);
 }
}


function addMarkerAtCenter() {
 var marker = new google.maps.Marker({
  position: map.getCenter(),
  map: map
 });
 var text = 'Lat/Lng: ' + getCenterLatLngText();
 if(currentReverseGeocodeResponse) {
  var addr = '';
  if(currentReverseGeocodeResponse.size == 0) {
   addr = 'None';
  } else {
   addr = currentReverseGeocodeResponse[0].formatted_address;
  }
  text = text + '[br /]' + 'address: [br /]' + addr;
 }


 var infowindow = new google.maps.InfoWindow({ content: text });


 google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
 });
 //google.maps.event.addListener(marker, 'moveend', function() {    });
}

questo è il risultato ad oggi


http://www.kappadocio.it/app2/index.php?option=com_chronoforms&tmpl=component&chronoform=running-Copy

che cosa posso fare???

[kappadocio]

parlando con il creatore del componente mi ha detto che devo richiamare la funzione per aggiungere il marker


addMarkerAtCenter;


Moderazione - Sposta qui la discussione perchè inizialmente agganciata ad un vecchio post relativo alla prima versione di chronoform