How to crop part of <p:gmap>? - google-maps

Question

I have a <p:gmap> with specific markers. I would like to crop a part of that <p:gmap>. I can't do it with <p:imageCropper>, because it crops an image, not a Google Map. How can I capture a specific part of the Google Map?
This is my map bean:
#ManagedBean
#ViewScoped
public class InfoWindowView implements Serializable {
private static final long serialVersionUID = 1L;
#EJB
GestionAnalyseLocal m;
private MapModel advancedModel;
private Marker marker;
#PostConstruct
public void init() throws IOException {
advancedModel = new DefaultMapModel();
List<Analyse> alys = new ArrayList<Analyse>();
alys = m.findAll();
for (int i = 2; i <= alys.size(); i++) {
Double x = null;
Double y = null;
try {
x = Double.parseDouble(alys.get(i).getLongitude());
y = Double.parseDouble(alys.get(i).getLatitude());
LatLng coord1 = new LatLng(y, x);
if (alys.get(i).getUu_HandoffOk() == 1) {
advancedModel.addOverlay(new Marker(coord1, "test", "point.png",
"http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_blue.png "));
} else {
if (alys.get(i).getUu_OutgoingCallOk() == 1) {
advancedModel.addOverlay(new Marker(coord1, "test", "phone",
"http://maps.google.com/mapfiles/kml/pal4/icon52.png"));
}
}
} catch (Exception e) {
System.out.println("err");
}
}
}
public MapModel getAdvancedModel() {
return advancedModel;
}
public void onMarkerSelect(OverlaySelectEvent event) {
marker = (Marker) event.getOverlay();
}
public Marker getMarker() {
return marker;
}
}
And this is the JSF page:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:p="http://primefaces.org/ui">
<h:head>
<script src="http://maps.google.com/maps/api/js?sensor=true|false" type="text/javascript" ></script>
</h:head>
<h:body>
<h:form >
<h:commandButton action="#{infoWindowView.init()}" value="Generate" />
</h:form>
<h:form>
<p:growl id="growl" showDetail="true" />
<h:panelGrid columns="2" columnClasses="left,right" style="width:100%">
<p:chart type="pie" model="#{chartView.pieModel1}" style="width:400px;height:300px">
<p:ajax event="itemSelect" listener="#{chartView.itemSelect}" update="growl" />
</p:chart>
</h:panelGrid>
</h:form>
<h:form>
<p:gmap id="gmap" center="36.8189700,10.1657900" zoom="12" type="HYBRID" model="#{infoWindowView.advancedModel}" style="width:100%;height:400px">
<p:ajax event="overlaySelect" listener="#{infoWindowView.onMarkerSelect}" />
<p:gmapInfoWindow id="infoWindow">
<p:outputPanel style="text-align: center; display: block; margin: auto">
<h:graphicImage value="resources/images/orange.png" height="150" />
<br />
<h:outputText value="#{infoWindowView.marker.title}" />
</p:outputPanel>
</p:gmapInfoWindow>
</p:gmap>
<!-- Preload for demo -->
<p:outputPanel style="display:none">
<p:graphicImage name="images/#{orange.png}" title="orange.png" />
</p:outputPanel>
</h:form>
</h:body>
</ui:composition>

Answer 1

By cropping map you mean you still want all the map facilities but for the selected region then you can do something like this(take another map when user tries to crop the map and get the coordinates from original map build set the selected region to new map and show to the user) user still will be able to use the map facilities.