Tell us what you are trying to do? I am trying to draw a circle on a CRED Google Map on the following page:
hidden link
I have a 'location field', which is the Google Map field, and another field called 'coverage-distance'. I would like to draw a circle with a radius of 'coverage-distance' on the location map, once this has been inputted. This is what I've tried:
Hello. Thank you for contacting the Toolset support.
Well - Toolset maps offers event 'js_event_wpv_addon_maps_init_map_completed' which you may use in this case to set the map options.
For example:
jQuery(document).ready(function($){
$( document ).on('js_event_wpv_addon_maps_init_map_completed', function( event, event_settings ) {
// Get the map using our .get_map() method...
var map = WPViews.view_addon_maps.get_map( event_settings.map_id );
// And then use Maps API .setOptions() method to programmatically change any option on the map.
if ( map ) {
map.setOptions({strokeColor: ''#FF0000'});
}
} );
});
This is the only way you can add/set options for Toolset maps.
Thanks, but when does this event happen? Is it on page load, or after the map has been loaded?
I want it to use the value of another field in the same form. Does that mean I need to get the user to enter the radius field first, before the map location field?
Well - as you can see - I've added the hook "js_event_wpv_addon_maps_init_map_completed" within the document ready event (page load) event so - yes, so you need to input the value of radius first before map gets load.
Thanks, but I'm still not really sure how to create the circle object?
This is what I've tried:
jQuery(document).ready(function($){
$( document ).on('js_event_wpv_addon_maps_init_map_completed', function( event, event_settings ) {
// Get the map using our .get_map() method...
var myMap = WPViews.view_addon_maps.get_map( event_settings.map_id );
// And then use Maps API .setOptions() method to programmatically change any option on the map.
if ( myMap ) {
var coverageCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
map: myMap,
fillOpacity: 0.35,
center: $('input[name=location]').val(),
radius: $('input[name=coverage-distance]').val(),
});
}
} );
jQuery(document).ready(function($){
$( document ).on('js_event_wpv_addon_maps_init_map_completed', function( event, event_settings ) {
// Get the map using our .get_map() method...
var map = WPViews.view_addon_maps.get_map( event_settings.map_id );
var options = { strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
center: $('input[name=location]').val(),
radius: $('input[name=coverage-distance]').val()
};
// And then use Maps API .setOptions() method to programmatically change any option on the map.
if ( map ) {
map.setOptions(options);
}
});
});
Well - I just tested on my localhost with static center and radius value and I see its working. See the following image:
=> hidden link
I've used following code:
jQuery(document).ready(function($){
$( document ).on('js_event_wpv_addon_maps_init_map_completed', function( event, event_settings ) {
// Get the map using our .get_map() method...
var myMap = WPViews.view_addon_maps.get_map('map-11');
// center value
var center = new google.maps.LatLng(21.7644725, 72.1519304);
// And then use Maps API .setOptions() method to programmatically change any option on the map.
var coverageCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: myMap,
center: center,
radius: 100,
});
} );
} );
jQuery(document).ready(function($){
$( document ).on('js_event_wpv_addon_maps_init_map_completed', function( event, event_settings ) {
// Get the map using our .get_map() method...
var myMap = WPViews.view_addon_maps.get_map(event_settings.map_id);
var myCenter = new google.maps.LatLng(-30.061807, 30.877525);
// And then use Maps API .setOptions() method to programmatically change any option on the map.
var coverageCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: myMap,
center: myCenter,
radius: 100,
});
} );
} );
I still don't see a circle. I've just changed your map id to event_settings.map_id. How can I find the map id to manually specify it?
I've also changed the lat long values to an address that I am inputting to create the map.
And I changed the center variable to myCenter. Apart from that my code seems to be the same as yours. But no circle?
There is no such hook or filter available that you can add circle while adding the address. This needs custom programming which is beyond the scope of our support policy.
