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
Related
I am trying to get a Google Maps instance with a marker in a pop-up window in Webix but I am getting initMap is not a function error. There is a direct way of initializing Google Maps in Webix but this time marker object isn't recognized. Here is my code:
$$("showMapButton").attachEvent("onItemClick", function (id, e) {
if (!$$("mapwin"))
webix.ui({
view: "window",
adjust: true,
id: "mapwin",
position: "center",
move: true,
width: 600,
height: 600,
//top: 100, left: 50,
position: "center",
head: {
view: "toolbar",
elements: [
{ view: "label", label: "OpenStreet Map", align: 'left' },
{
view: 'button', label: 'Close', width: 70, click: function () {
$$("mapwin").hide();
}
}
]
},
body: {
width: 300,
height: 300,
template: "<div id='mapBody'> </div>"
},
});
// google.maps.event.addDomListener(window, "load", initMap);
function initMap() {
var uluru = { lat: 32, lng: 32 };
var map = new google.maps.Map(document.getElementById('mapBody'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
$$("mapwin").show();
});
I could sure use some help... Thanks in advance!
$$("showMapButton").attachEvent("onItemClick", function (id, e) {
//create a window if it is does not exist
if (!$$("mapwin"))
webix.ui({
view: "window",
id: "mapwin",
position: "center",
move: true,
width: 600,
height: 600,
head: {
view: "toolbar",
elements: [
{
id:"mapClose", view: 'button', label: 'Close', width: 120, click: function () {
//hide windows (.close() will destroy)
$$("map").getMap(true).then(function (map) {
marker.setMap(null);
map.setOptions({ styles: [] });
});
$$("mapwin").hide();
}
},
{
align:"right", id:"setStyleButton", view: 'button', label: 'Koyu Tema', width: 120, click: function () {
$$("map").getMap(true).then(function (map) {
});
}
}
]
},
body: {
view: "google-map",
id: "map",
key: "AIzaSyBzviXHLV5cRdCOatv5oBatf5EGJ019npQ",
zoom: 9
},
});
$$("map").getMap(true).then(function (map) {
var myLatlng = new google.maps.LatLng(latitude, longtitude);
map.setCenter(myLatlng);
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!',
//icon: 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png'
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + myLatlng.lat() +
'<br>Longitude: ' + myLatlng.lng()
});
var str = 'Araç: ' + myLatlng.lat() + '<br>Enlem: ' + myLatlng.lat() + '<br>Boylam: ' + myLatlng.lng() + '<br>Konum: ' + location;
infowindow.setContent(str);
marker.addListener('click', function () {
infowindow.open(map, marker);
});
// infowindow.open(map, marker);
});
$$("mapwin").show();
});
All right then it is just a matter of promise function. First you should fetch the map object and after that with 'then' function you can play with it. In case anyone needs google-map with webix i write the code here.
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.
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>
Can someone help me and tell me why the showWindow boolean is not changing onclick or mouseover? Or did I not setup the infowindow correctly? I am using http://angular-ui.github.io/angular-google-maps/ . Everything seems to be working but I want the info window to come up when I click on the marker.
.controller('marker',['$scope', 'companies', function($scope, companies) {
$scope.map = {
center: {
latitude: 37,
longitude: -122
},
zoom: 4,
options: {
streetViewControl: false,
panControl: false,
maxZoom: 20,
minZoom: 3
},
dragging: false,
bounds: {},
randomMarkers: [],
doClusterRandomMarkers: true,
currentClusterType: 'standard',
clusterOptions: {
title: 'Hi I am a Cluster!', gridSize: 60, ignoreHidden: true, minimumClusterSize: 2
}
};
$scope.map.markersEvents = {
mouseover: function (marker, eventName, model, args) {
model.options.labelContent = model.title;
newmarker.showWindow = true;
$scope.$apply();
},
mouseout: function (marker, eventName, model, args) {
model.options.labelContent = " ";
newmarker.showWindow = false;
$scope.$apply();
},
click: function (marker, eventName, model, args) {
model.options.labelContent = model.title;
model.showWindow = true;
$scope.$apply();
}
};
companies.success(function(data) {
var markers = [];
data.forEach(function (item){
var newMarker = {
id: item.id,
latitude: item.latitude,
longitude: item.longitude,
content: item.address,
title: item.name,
showWindow: false,
options: {
labelContent: ' ',
labelAnchor: "22 0",
labelClass: "marker-labels",
draggable: false
}
};
markers.push(newMarker);
});
$scope.markers = markers;
})
}]);
Here is the html:
<div ng-controller="marker">
<ui-gmap-google-map center="map.center" zoom="map.zoom" dragging="map.dragging" bounds="map.bounds"
events="map.events" options="map.options" pan="true" control="map.control">
<ui-gmap-markers models="markers" coords="'self'" icon="'icon'"
doCluster="map.doClusterRandomMarkers" clusterOptions="map.clusterOptions" modelsbyref="true"
events="map.markersEvents" options="'options'"
>
<ui-gmap-windows show="showWindow">
<div>
<p>This is an info window</p>
</div>
</ui-gmap-windows>
</ui-gmap-markers>
</ui-gmap-google-map>
</div>
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"
}
}
});
}
}
}
}
});
}
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"
}
}
});
}
}
}
});