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.