You are viewing limited content. For full access, please sign in.

Question

Question

Interactive Google Map

asked on January 4, 2018 Show version history

I have been able to include a Google map inside my form using the geo location.  I would like to make the map interactive and be able to re-position the map and marker to a new location.  Can anyone help with this? 

0 0

Replies

replied on January 5, 2018

Hi there,

I have a working solution in one of my forms. I used the following two links for help: 

https://answers.laserfiche.com/questions/107835/Help-with-Geocode-and-Custom-HTML-Map-within-Forms-10

https://answers.laserfiche.com/questions/77786/Custom-HTML-how-to-Hold-or-freeze-an-custom-HTML-active-script-when-submitting-

 

You want to create a custom HTML element, and add in 

<canvas id="map_canvas"> </canvas>

Then you want to create a single line field for latitude and longitude.

CSS:

#yourmapID (such as #q1) {
    height:600px;
}

Javascript : 

$.getScript('http://maps.googleapis.com/maps/api/js?key=<<GOOGLEAPIKEY>>&libraries=places', function() {
  
 
    window.onload=function(){
          var map;
          function initialize() {
              var myLatlng = new google.maps.LatLng(<<default latitude here>>, <<default longitude here>>);

              var myOptions = {
                  zoom: 17,
                  center: myLatlng,
                  mapTypeId: google.maps.MapTypeId.SATELLITE
              };
              map = new google.maps.Map(document.getElementById("yourmapid"), myOptions);

              var marker = new google.maps.Marker({
                  draggable: true,
                  position: myLatlng,
                  map: map,
                  title: "Your location"
              });

              google.maps.event.addListener(marker, 'dragend', function (event) {
                  document.getElementById("<<latitudeField>>").value = event.latLng.lat();
                  document.getElementById("<<longField>>").value = event.latLng.lng();
                    
                  infoWindow.open(map, marker);
              });
          }
          google.maps.event.addDomListener(window, "load", initialize());
        }//]]> 
     

      //google maps end
})

Your latitude and longitude fields will be for example, #Field2 or #Field3, the Field for which you added in the single line field earlier.

0 0
replied on January 5, 2018

Hey, @████████ isn't this something you were looking in to?

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.