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?
Question
Question
Interactive Google Map
asked on January 4, 2018
•
Show version history
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:
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.