Search code examples
javascripteventsclickgeometryjquery-gmap3

gmap3 How to do it - any event it shows circle


As the topic, how to do that after eg. Clicking on the marker appeared in a circle centered on the parameters of a marker?

How to get: latLng (this marker).

Please help

Code:

function map() {

var x1 = [37.772323, -122.214897];
var x2 = [37.752323, -122.214897];

$('#mapFull').gmap3({
    map: {
        options: {
            center: [37.772323, -122.214897],
            zoom: 12,
            mapTypeControlOptions: {
                mapTypeIds: ['custom_style', google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID]
            }
        }
    },
    marker: {
        values: [{
                latLng: [x1[0], x1[1]],
                data: 'x1'
            }, {
                latLng: [x2[0], x2[1]],
                data: 'x2'
            }
        ],
        events: {
            click: function (marker, event, context) {
                var map = $(this).gmap3("get"),
                        infowindow = $(this).gmap3({get: {name: "infowindow"}});
                if (infowindow) {
                    infowindow.open(map, marker);
                    infowindow.setContent(context.data);
                } else {
                    $(this).gmap3({
                        infowindow: {
                            anchor: marker,
                            options: {content: context.data},
                            circle: {
                                center: [37.772323, -122.214897],
                                radius: 250,
                                fillColor: "#008BB2",
                                strokeColor: "#005BB7"
                            }
                        }
                    });
                }
            }
        }
    }
});

}


Solution

  • You can add a circle centered on the clicked marker with the following code :

    $('#mapFull').gmap3({
        map: {
            ...
        },
        marker: {
            values: [...],
            events: {
                click: function (marker, event, context) {
                    ...
                    $(this).gmap3({
                        circle:{
                            options:{
                                center: [ marker.getPosition().lat(), marker.getPosition().lng()],
                                radius : 250,
                                fillColor : "#008BB2",
                                strokeColor : "#005BB7"
                            }
                        }
                    });
                }
            }
        }
    });