Develop Reference

Not able to delete selected polygon in ui-gmap-google-map

I am able to draw multiple polygon by using Google Draw manager. Now I am not able to select specific polygon from multiple polygon and delete and edit it. Also not able to get new array after edit or delete.
My demo.js code is as follows :
$scope.map = {
center: { latitude: 19.997454, longitude: 73.789803 },
zoom: 10,
//mapTypeId: google.maps.MapTypeId.ROADMAP,
//radius: 15000,
stroke: {
color: '#08B21F',
weight: 2,
opacity: 1
},
fill: {
color: '#08B21F',
opacity: 0.5
},
geodesic: true, // optional: defaults to false
draggable: false, // optional: defaults to false
clickable: false, // optional: defaults to true
editable: false, // optional: defaults to false
visible: true, // optional: defaults to true
control: {},
refresh: "refreshMap",
options: { scrollwheel: true },
Polygon: {
visible: true,
editable: true,
draggable: true,
geodesic: true,
stroke: {
weight: 3,
color: 'red'
}
},
source: {
id: 'source',
coords: {
'latitude': 19.9989551,
'longitude': 73.75095599999997
},
options: {
draggable: false,
icon: 'assets/img/person.png'
}
},
isDrawingModeEnabled: true
};
$scope.drawingManagerOptions = {
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
//google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
]
},
circleOptions: {
fillColor: '#BCDCF9',
fillOpacity:0.5,
strokeWeight: 2,
clickable: false,
editable: true,
zIndex: 1
},
polygonOptions: {
fillColor: '#BCDCF9',
strokeColor: '#57ACF9',
fillOpacity: 0.5,
strokeWeight: 2,
clickable: false,
editable: true,
zIndex: 1
}
};
var coords = [];
var polygon;
$scope.eventHandler = {
polygoncomplete: function (drawingManager, eventName, scope, args) {
polygon = args[0];
var path = polygon.getPath();
for (var i = 0 ; i < path.length ; i++) {
coords.push({
latitude: path.getAt(i).lat(),
longitude: path.getAt(i).lng()
});
}
},
};
$scope.removeShape = function () {
google.maps.event.clearListeners(polygon, 'click');
google.maps.event.clearListeners(polygon, 'drag_handler_name');
polygon.setMap(null);
}
And My HTML code is as follows :
<ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options" control="map.control">
<ui-gmap-marker coords="map.source.coords"
options="map.source.options"
idkey="map.source.id">
</ui-gmap-marker>
<ui-gmap-drawing-manager options="drawingManagerOptions" control="drawingManagerControl" events="eventHandler"></ui-gmap-drawing-manager>
</ui-gmap-google-map>
You can find polygon image for reference:
Now I want to select one of polygon from following image and want to delete or update it.
Some help will be really appreciable.

By the ui-google-map plugin's drawing manager doc, you could get the google.maps.drawing.DrawingManager object by the control attributes (putting there an object)
<ui-gmap-drawing-manager control="drawingManagerControl" options="drawingManagerOptions"></ui-gmap-drawing-manager>
and
$scope.drawingManagerControl = {};
//Now get the drawingManager object
var drawingManager = $scope.drawingManagerControl.getDrawingManager();
Having this object is the main work.
Now you can look on everything you need. For your case you need the overlaycomplete events, it will listen for every time you have drawn a shape (=> polygon , circle, polyline)
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
var newShape = e.overlay;
});
newShape is the new shape drawn, polygon in your case, so you can use it like a Polygon object and can use all you need in this reference.
Now I want to select one of polygon from following image and want to
delete or update it.
For it, we'll distinct the polygon selected, by assigning it in a global variable: eg var selectedShape;
And now, Add a click event listener for this drawn polygon and update it as the selectedShape, and now to delete or update, you can use the selectedShape variable.
var selectedShape;
... ...
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
var newShape = e.overlay;
google.maps.event.addListener(newShape, 'click', function() {
selectedShape = newShape;
});
});
Finally you can delete the selected shape by setting his map to null selectedShape.setMap(null); and update the shape by setting it editable to true shape.setEditable(true);
And finally to make these click event possible you need to add clickable options to true for all shape.
PS: Use the IsReady Service to have map ready before working on it
Working plunker: https://embed.plnkr.co/qfjkT2lOu2vkATisGbw7/
Update:
But how to get all co-ordinates of multiple polygon after edit or
draw.
you already have this in your script, in polygonecomplete ($scope.eventHandler). Now you can add it in overlaycomplete events listener, and for everytime you updated the shape (see code bellow)
But challenge is how to identify which polygon is edited on the
map and how to update that specific polygon from my array
You can push in an array for each shape created and could manage it:
...
var allShapes = []; //the array contains all shape, to save in end
....
//get path coords: I use your code there
function getShapeCoords(shape) {
var path = shape.getPath();
var coords = [];
for (var i = 0; i < path.length; i++) {
coords.push({
latitude: path.getAt(i).lat(),
longitude: path.getAt(i).lng()
});
}
return coords;
}
....
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
var newShape = e.overlay;
google.maps.event.addListener(newShape, 'click', function() {
selectedShape = newShape;
});
...
// get coordinate of the polygon
var shapeCoords = getShapeCoords(newShape);
// pushing this shape to allShapes array
allShapes.push(newShape);
});
in the delete function you can delete id by the index of the selectedShape
//delete selected shape
function deleteSelectedShape() {
if (!selectedShape) {
alert("There are no shape selected");
return;
}
var index = allShapes.indexOf(selectedShape);
allShapes.splice(index, 1);
selectedShape.setMap(null);
}
Now you have the allShapes array, and in the end you can loop it then get for each coordinates and save in your db.
I updated the plunker and added some debug log do show you.

This snipet from github could help:
https://github.com/beekay-/gmaps-samples-v3/blob/master/drawing/drawing-tools.html

Uncaught ReferenceError: google is not defined

I try to apply the example Extjs 6 Google Maps but it appears an error google is not defined on GMapPanel.js file. Can anyone help me why this error displays, I mention that I've spent time to read here and on other forum why this error but nothing give me the answer? thanks in advance
viewMap.js
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'Google Map',
layout: 'fit',
width: 300,
height: 300,
items: [{
xtype: 'button',
id: 'show-btn',
text: 'Click here'
}]
});
Ext.require([
'Ext.window.*',
'Ext.ux.GMapPanel'
]);
var mapwin;
Ext.get('show-btn').on('click', function () {
// create the window on the first click and reuse on subsequent clicks
if (mapwin) {
mapwin.show();
} else {
mapwin = Ext.create('Ext.window.Window', {
autoShow: true,
layout: 'fit',
title: 'GMap Window',
closeAction: 'hide',
width: 450,
height: 450,
border: false,
x: 40,
y: 60,
mapTypeId: 'google.maps.MapTypeId.ROADMAP',
mapConfOpts: ['enableScrollWheelZoom', 'enableDoubleClickZoom', 'enableDragging'],
mapControls: ['GSmallMapControl', 'GMapTypeControl', 'NonExistantControl'],
items: {
xtype: 'gmappanel',
center: {
geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
marker: {title: 'Fenway Park'}
},
markers: [{
lat: 42.339641,
lng: -71.094224,
title: 'Boston Museum of Fine Arts',
listeners: {
click: function (e) {
Ext.Msg.alert('It\'s fine', 'and it\'s art.');
}
}
}, {
lat: 42.339419,
lng: -71.09077,
title: 'Northeastern University'
}]
}
});
}
});
});
GMapPanel.js
Ext.define('Ext.ux.GMapPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.gmappanel',
requires: ['Ext.window.MessageBox'],
initComponent : function(){
Ext.applyIf(this,{
plain: true,
gmapType: 'map',
border: false
});
this.callParent();
},
onBoxReady : function(){
var center = this.center;
this.callParent(arguments);
if (center) {
if (center.geoCodeAddr) {
this.lookupCode(center.geoCodeAddr, center.marker);
} else {
this.createMap(center);
}
} else {
Ext.raise('center is required');
}
},
createMap: function(center, marker) {
var options = Ext.apply({}, this.mapOptions);
options = Ext.applyIf(options, {
zoom: 14,
center: center,
mapTypeId: 'google.maps.MapTypeId.HYBRID'
});
this.gmap = new google.maps.Map(this.body.dom, options);
if (marker) {
this.addMarker(Ext.applyIf(marker, {
position: center
}));
}
Ext.each(this.markers, this.addMarker, this);
this.fireEvent('mapready', this, this.gmap);
},
addMarker: function(marker) {
marker = Ext.apply({
map: this.gmap
}, marker);
if (!marker.position) {
marker.position = new google.maps.LatLng(marker.lat, marker.lng);
}
var o = new google.maps.Marker(marker);
Ext.Object.each(marker.listeners, function(name, fn){
google.maps.event.addListener(o, name, fn);
});
return o;
},
lookupCode : function(addr, marker) {
this.geocoder = new google.maps.Geocoder();
this.geocoder.geocode({
address: addr
}, Ext.Function.bind(this.onLookupComplete, this, [marker], true));
},
onLookupComplete: function(data, response, marker){
if (response != 'OK') {
Ext.MessageBox.alert('Error', 'An error occured: "' + response + '"');
return;
}
this.createMap(data[0].geometry.location, marker);
},
afterComponentLayout : function(w, h){
this.callParent(arguments);
this.redraw();
},
redraw: function(){
var map = this.gmap;
if (map) {
google.maps.event.trigger(map, 'resize');
}
}
});

Get a key on this site https://developers.google.com/maps/documentation/javascript/
After that you have to include the maps url with your like just a parameter in url key=your key in index.html
Then it will work.
The url looks like this
https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap
You have to put it inside the <script></script> tags.

How to get the fired marker using event.addListener with Google Map API v3

I have a simple Google Map with some markers added looping on a json object.
I'm trying to add a listener to all of these markers to do a simple action (change the rotation). Markers are added on map and listener is called, but when i click on one of the markers, the action is performed always on the latest added.
How I can get the fired marker? I think that the way is to use the evt parameter of the listener function, but I don't know how.
I watched inside the evt parameter with firebug but without results.
Here is the code:
for(var i in _points){
_markers[i] = new google.maps.Marker({
position: {
lat: parseFloat(_points[i]._google_lat),
lng: parseFloat(_points[i]._google_lon)
},
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 3,
rotation: parseInt(_points[i]._rotation)
},
map: _map,
title: _points[i]._obj_id
});
google.maps.event.addListener(_markers[i], 'click', function(evt){
//console.log(evt);
r = _markers[i].icon.rotation;
_markers[i].setIcon({
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 3,
rotation: r+15
});
});
}

The this inside the click listener function is a reference to the marker:
google.maps.event.addListener(_markers[i], 'click', function(evt){
//console.log(evt);
r = this.getIcon().rotation;
this.setIcon({
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 3,
rotation: r+15
});
});
proof of concept fiddle
code snippet:
function initMap() {
// Create a map and center it on Manhattan.
var _map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {
lat: 40.771,
lng: -73.974
}
});
for (var i in _points) {
_markers[i] = new google.maps.Marker({
position: {
lat: parseFloat(_points[i]._google_lat),
lng: parseFloat(_points[i]._google_lon)
},
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 3,
rotation: parseInt(_points[i]._rotation)
},
map: _map,
title: _points[i]._obj_id
});
google.maps.event.addListener(_markers[i], 'click', function(evt) {
r = this.getIcon().rotation;
this.setIcon({
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 3,
rotation: r + 15
});
});
}
}
google.maps.event.addDomListener(window, "load", initMap);
var _markers = [];
var _points = [{
_google_lat: 40.7127837,
_google_lon: -74.0059413,
_obj_id: "A",
_rotation: 0
}, {
_google_lat: 40.735657,
_google_lon: -74.1723667,
_obj_id: "B",
_rotation: 90
}]
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Click event in GmapPanel

How to impement click event in ExtJs in documentation https://docs.sencha.com/extjs/4.2.3/#!/api/Ext.ux.GMapPanel-method-addListener I know in javascritpt but ExtJs how to make that google map js
I have made many click listeners but without succes please can you tell on click should be in controller by reference and on so on?
Ext.define('App.view.App', {
extend: 'Ext.window.Window',
alias: 'widget.appform',
title:'',
operation:'',
resizable: false,
modal:true,
initComponent: function () {
me = this;
this.autoShow = true;
this.width = 550;
this.height = 650;
this.items = [
{
xtype: 'textfield',
name: 'title',
value:me.login,
fieldLabel: 'Title',
allowBlank: false,
width:330,
style:{
marginTop:'10px',
marginLeft:'20px',
marginRight:'20px'
}
},
{
title: 'Google Map',
width:535,
height:800,
// frame:true,
id:'gmapForm',
// height: '100%',
xtype: 'gmappanel',
gmapType: 'map',
center: {
geoCodeAddr: "221B Baker Street",
marker: {
title: 'Holmes Home'
}
},
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
mapOptions : {
mapTypeId: google.maps.MapTypeId.ROADMAP
},
listeners: {
maprender: function(extMapComponent, googleMapComp){
var marker = new google.maps.Marker({
position: position = new google.maps.LatLng (42.16726190,-87.83146810),
// position: patientPosition, //patientPosition initialized in geocodePatientAddress() function in Home.js
map: googleMapComp,
animation: google.maps.Animation.DROP,
draggable: false,
title: 'Patient Location'
});
google.maps.event.addListener(marker, 'click', function() {
// infowindow.open(googleMapComp, marker);
console.log('sssssssssss');
});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close(googleMapComp, marker);
});
}
},
handler : function () {
google.maps.event.addListener(marker, 'click', function() {
// infowindow.open(googleMapComp, marker);
console.log('sssssssssss');
});
// this.up('window').down('form').getForm().reset();
}
/* google.maps.event.addListener(gObject, "click", function(e){
alert('test');
})*/
}
];
this.buttons = [
{
text:me.operation,
name: me.operation,
scope: this
},
];
console.log(arguments);
this.callParent(arguments);
}
});

The Google maps plugin for extjs has issue imo.
You can integrate directly with the google maps api and extjs.
Here's an example with search and overlay features:
https://fiddle.sencha.com/#fiddle/cva
As for the click events you would use:
marker.addListener('click', function() {
map.setZoom(8);
map.setCenter(marker.getPosition());
});
https://developers.google.com/maps/documentation/javascript/events

Need Google Maps to open Multiple Marker Popups with Fancybox

I am creating a Google map with multiple markers that I want to popup into a Fancybox lightbox when clicked on. I must admit, I am quite a novice at javascript and Google Maps API.
I have put some pieces of different sample scripts together and come up with something that actually works decently. I have the markers the way I want them (well, without captions... which I still have to figure out), the style of map the way I want it, and I even have the markers popping up lightboxes when clicked on.
However, all markers end up opening one URL in the lightbox. I guess that makes a bit of sense. The Fancybox code is being distributed to all the markers, instead of each one individually. I tried to make another argument with a url and pass it into the Fancybox script, but it still just picks up the last marker's url and uses it for all the markers. How would I be able to get the URL to work for each marker instead of all the markers at once?
I did find a similar question on here:
Multiple fancybox google map
However, it seams to use a different route of attacking the same issue. Plus, I can't seem to get their script to work by itself, let alone integrate it with my code. So, while I get how the solution works for them, it doesn't seem to help me.
My code is as follows:
var map;
var MY_MAPTYPE_ID = 'custom_style';
function initialize() {
var featureOpts = [
{
stylers: [
{ hue: '#CCCCCC' },
{ saturation: '-100' },
{ visibility: 'simplified' },
{ gamma: 2 },
{ weight: .4 }
]
},
{
elementType: 'labels',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'water',
stylers: [
{ color: '#efefef' }
]
}
];
var mapOptions = {
zoom: 9,
scrollwheel: false,
keyboardShortcuts: false,
disableDefaultUI: true,
center: new google.maps.LatLng(34.0531553, -84.3615928),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var styledMapOptions = {
name: 'Custom Style'
};
var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
setMarkers(map, schools);
}
var schools = [
['Canton', 34.2352063, -84.4846274, 4, 'popup.htm'],
['Austell', 33.8158106, -84.6334938999999, 3, 'popup.htm'],
['Marietta', 33.9578674, -84.5532791, 2, 'popup.htm'],
['Atlanta', 33.7635085, -84.43030209999999, 1, 'popup2.htm']
];
function setMarkers(map, locations) {
var image = {
url: 'images/fml-home.png',
size: new google.maps.Size(67, 63),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 63)
};
var shadow = {
url: 'images/fml-shadow.png',
size: new google.maps.Size(45, 18),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 18)
};
var shape = {
coord: [1, 1, 1, 67, 60, 67, 60 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var schools = locations[i];
var myLatLng = new google.maps.LatLng(schools[1], schools[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: schools[0],
zIndex: schools[3]
});
var href = schools[4];
google.maps.event.addListener(marker, 'click', function() {
$.fancybox({
frameWidth : 800,
frameHeight : 600,
href : href,
type : 'iframe'
});
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);

Try this:
marker["href"] = schools[4];
google.maps.event.addListener(marker, 'click', function() {
$.fancybox({
frameWidth : 800,
frameHeight : 600,
href : this.href,
type : 'iframe'
});
});