We Keep Coding

How can I put image into polygon google map

I need to put the image into custom size polygon like in the pic. How can I get this? I think this is a bad idea.
The colored area should be filled by any image instead of color.
https://i.stack.imgur.com/qzJpu.png

Probably in your case Custom Overlay will be useful:
Check this exmaple
Code snippet:
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(62.281819, -150.287132),
new google.maps.LatLng(62.400471, -150.005608));
// The photograph is courtesy of the U.S. Geological Survey.
var srcImage = 'https://developers.google.com/maps/documentation/' +
'javascript/examples/full/images/talkeetna.png';
// The custom USGSOverlay object contains the USGS image,
// the bounds of the image, and a reference to the map.
overlay = new USGSOverlay(bounds, srcImage, map);

Populating markers inside rectangle, circle and polygon

My requirement is to populate markers inside a user drawn area ,which can be either circle, rectangle ,polygon.
This is what I am trying currently :-
map.on('draw:created', function(e) {
var type = e.layerType, layer = e.layer;
var bounds = layer.getBounds();
});
Now I am using these bounds(southWest, northEast) latlongs to virtually create a row column spacing and then populate markers accordingly.
Problem :-
The above approach works fine for rectangle and all markers are populated inside rectangle.
Doesn't work for circle and polygon. Markers are populated outside (nearby) the circle and polygon also.
I guess the getBounds() method is giving the bounds or calculating the area by creating a box that touches circle and all corner of polygon.
Any suggestions that how can I populate markers strictly inside or on boundary of circle and polygon?
Thanks in advance.

Resolved for point inside polygon by PIP as suggested by #kmandov and also resolved for circle by the below process :-
Get latitude and longitude of the point.
Get the latitude and longitude of circle center.
Run distanceTo() method on any of the above two latlongs and pass the second latlong as parameter.
Check if the distance is greater than the radius of circle.
If it's greater than the radius then the point is outside circle else inside circle.
Here is the condition that I used :
if (customMarker.getLatLng().distanceTo(myCircle.getLatLng()) <= myCircle.getRadius()) {
console.log("Marker is inside circle");
}else{
console.log("Marker is outside circle");
}

You can probably use the PointInLayer leaflet plug-in to check if a point is inside your area.
You can then add markers only for grid points that are actually within the polygon.
Something like that:
// the user area:
var areaLayer = L.geoJson(userArea);
// iterate over your grid of points
for (var i = 0; i < gridPoints.length; i++) {
// add marker only if the point is within the area
var results = leafletPip.pointInLayer(gridPoints[i], areaLayer, true);
if (results.length > 0) {
L.marker(gridPoints[i]).addTo(map);
}
}

Gmarker custom icon not showing full size

We have manage to create markers with custom icon where we define first the icon for e.g.
var pIcon = new google.maps.MarkerImage('alertIcon/P.png',
new google.maps.Size(15, 15));
Then we define the marker in this manner.
var marker = new google.maps.Marker({
position: point,
map: map,
icon: yIcon
});
The issue now the custom icon appear but just partial of it not the complete one as we had in V2 what could be issue here?

var pIcon = new google.maps.MarkerImage('alertIcon/P.png',
// This might be where you're running into trouble, set
// Size(w,h) to the dimensions of the image
new google.maps.Size(72, 95),
// This is the origin, probably want to keep it at 0,0
new google.maps.Point(0,0),
// This is the anchor. For Point(x,y) x should be
// half the image width and y should be the height
new google.maps.Point(36, 95)
);

An icon for a Google maps marker just needs to be a string for the URL of the icon image. Creating a MarkerImage is probably causing the Google maps api to scale down the size of your custom icon.
var pIcon = "alertIcon/P.png"
This is all you should need when defining your icon.

google map api v3 : update rectangle bounds when the shape is dragged or resized

I'm trying to draw a rectangle on google map api v3 using the draw tool. I want the user to be able to :
get the rectangle bounds when the shape is complete.
update the bounds when the rectangle is dragged or re-seized.
The (1) worked fine but i need some help on (2).
This is the code i used for (1) :
//----------on rectangle complete event
google.maps.event.addDomListener(drawingManager, 'rectanglecomplete', function(rectangle) {
//get the rectangle bounds
document.getElementById("savedata").value =rectangle.getBounds();
//hide draw tool
drawingManager.setOptions({
drawingControl: false
});
//disable draw tool
drawingManager.setDrawingMode(null);
});

Add an event listener to the rectangle for bounds_changed, capture the new coordinates in that. Code:
google.maps.event.addListener(rectangle, "bounds_changed", function() {
document.getElementById("savedata").value =rectangle.getBounds();
});
Here is an example using the DrawingManager that allows you to draw rectangles, change them and capture the changed value. The only thing missing from it is the change event (bounds_changed on the rectangle).

Circle creates on previous coordinate on google map api

I'm creating marker and circle around 500 area. When user will be out of the boundary by drag the map another circle will create within same area of new generated marker. Issue is that its creating circle around previous generated marker instead of current generated marker.
You can check here:
http://jsbin.com/exiram/1
Can anyone help me please?

Pay atention with the events in tme map. for every pan "drag the map" you make a new marker in center of the map and a new circle for that marker.
probaly, you have a listener that capture all mouse events and call the code to make markers and circles.
you can make 2 buttons in your page, one to make a marker and other to make a circle.

Im a little bit busy to post a full answer so please excuse my psudo code
Somthing like this will work !
var map; // OUR MAP OBJECT
var circle; //OUR CIRCLE
var center; // lat long holder
google.maps.event.addListener(map, 'drag', function() {
center = getCenter();
circle.setCenter(center);
});