Search code examples
javascriptgoogle-mapsgeolocationgoogle-maps-api-2

Google API: Notification when marker will be into shape


i am using google maps API V2 and i have geozones like shape. now want get alert when unit(Simple Markers) will be into shape coordinats. how i can do this?


Solution

  • <script type ="text/javascript">
        $(document).ready(function () {
            function changeMarker(marker) {
                marker.setIcon("images/bluemarker.png");
            }
            var map;
            var infowindow;
            var info1;
            var triangleCoords = [];
            function InitializeMap() {
                var myOptions =
                {
                    zoom: 5,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById("map"), myOptions);
    
                triangleCoords = [
                                        new google.maps.LatLng(20.874252, -80.190262),
                                        new google.maps.LatLng(18.466465, -66.118292),
                                        new google.maps.LatLng(32.321384, -64.75737),
                                        new google.maps.LatLng(20.874252, -80.190262)
                                 ];
    
                // Construct the polygon
                // Note that we don't specify an array or arrays, but instead just
                // a simple array of LatLngs in the paths property
                Triangle = new google.maps.Polygon({
                    paths: triangleCoords,
                    strokeColor: "#FF0000",
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: "#FF0000",
                    fillOpacity: 0.35
                });
    
                Triangle.setMap(map);
    
            }
            function markicons() {
                InitializeMap();
                var ltlng = [];
                var markers = [];
                ltlng.push(new google.maps.LatLng(22.76, -79.28));
                ltlng.push(new google.maps.LatLng(18.76, 83.30));
                map.setCenter(triangleCoords[0]);
                for (var i = 0; i < ltlng.length; i++) {
                    marker = new google.maps.Marker({
                        map: map,
                        position: ltlng[i],
                        draggable: true,
                        //icon: "images/greymarker.png",
                        animation: google.maps.Animation.DROP,
                        title: "this is " + i + "marker"
    
                    });
    
                }
            }
            window.onload = markicons;
        });
    
    </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server" >
            <h2>Multiple Markers :</h2>
                <div id="map-container"><div id="map"></div></div> 
    </asp:Content>
    

    There are 2 parts in your question

    1. Construct a polygon and introduce some markers in the map
    2. when ever it finds a marker in the area you have to alert so for 1 you can refer above js as the sample for 2 you can refer below discussion which already contains in this forum....

    hope this helps:D

    google maps v3: check if point exists in polygon