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.
Related
I have this google map and everything works perfectly but the info windows are showing up as blank...
I've tried to use a for loop but I think I put it in the wrong place because the map just goes completely blank. I tried a foreach loop and the same thing happens. I also tried to move the infowindow variable inside the for each loop with no luck.
// Map variable
var map;
// Create and style the map
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: new google.maps.LatLng(25.7819743, -80.2006986),
mapTypeId: 'roadmap',
styles: [{"featureType":"all","elementType":"geometry","stylers":[{"visibility":"off"}]},{"featureType":"all","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.country","elementType":"labels.text","stylers":[{"visibility":"off"},{"color":"#ff0000"}]},{"featureType":"administrative.province","elementType":"labels.text.fill","stylers":[{"visibility":"on"},{"invert_lightness":!0},{"color":"#ffffff"}]},{"featureType":"administrative.locality","elementType":"labels.text.fill","stylers":[{"visibility":"on"},{"lightness":"-46"},{"color":"#ffffff"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#d8a361"},{"visibility":"on"}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"on"},{"color":"#c48c46"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#cf944b"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#cf944b"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#c48c46"}]},{"featureType":"road.local","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#c48c46"},{"lightness":"4"}]}]
}
);
// Custom Icons
var iconBase = 'img/';
var icons = {
main: {
icon: iconBase + 'map-icon.png'
}
};
// Icon Locations and infowindow content
var locations = [
{
position: new google.maps.LatLng(25.7819743, -80.2006986),
type: 'main',
content: 'This is a simple test'
}, {
position: new google.maps.LatLng(25.6543563, -80.4034173),
type: 'main',
content: 'This is a another test'
}, {
position: new google.maps.LatLng(25.7589664, -80.4495347),
type: 'main',
content: 'This is a just another test'
}, {
position: new google.maps.LatLng(25.7905606, -80.3455961),
type: 'main',
content: 'This is yet another simple test'
}, {
position: new google.maps.LatLng(25.7611357, -80.3293175),
type: 'main',
content: 'This is a simple test'
}, {
position: new google.maps.LatLng(25.8501614, -80.2520588),
type: 'main',
content: 'This is a simple test'
}, {
position: new google.maps.LatLng(25.653536, -80.3311367),
type: 'main',
content: 'This is a simple test'
}
];
var infowindow = new google.maps.InfoWindow({
content: locations.content
});
// Show all markers
locations.forEach(function(location) {
var marker = new google.maps.Marker({
position: location.position,
icon: icons[location.type].icon,
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
});
}
There is only one InfoWindow, but multiple markers, you need to set the content of the InfoWindow with the appropriate content for that marker. (also, locations.content is undefined, locations is an array of objects that have a .content property)
// Show all markers
locations.forEach(function(location) {
var marker = new google.maps.Marker({
position: location.position,
map: map
});
marker.addListener('click', function() {
infowindow.setContent(location.content)
infowindow.open(map, marker);
});
});
proof of concept fiddle
code snippet:
// Map variable
var map;
// Create and style the map
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: new google.maps.LatLng(25.7819743, -80.2006986),
mapTypeId: 'roadmap',
});
// Icon Locations and infowindow content
var locations = [{
position: new google.maps.LatLng(25.7819743, -80.2006986),
type: 'main',
content: 'This is a simple test'
}, {
position: new google.maps.LatLng(25.6543563, -80.4034173),
type: 'main',
content: 'This is a another test'
}, {
position: new google.maps.LatLng(25.7589664, -80.4495347),
type: 'main',
content: 'This is a just another test'
}, {
position: new google.maps.LatLng(25.7905606, -80.3455961),
type: 'main',
content: 'This is yet another simple test'
}, {
position: new google.maps.LatLng(25.7611357, -80.3293175),
type: 'main',
content: 'This is a simple test'
}, {
position: new google.maps.LatLng(25.8501614, -80.2520588),
type: 'main',
content: 'This is a simple test'
}, {
position: new google.maps.LatLng(25.653536, -80.3311367),
type: 'main',
content: 'This is a simple test'
}];
var infowindow = new google.maps.InfoWindow({
content: locations.content
});
// Show all markers
locations.forEach(function(location) {
var marker = new google.maps.Marker({
position: location.position,
map: map
});
marker.addListener('click', function() {
infowindow.setContent(location.content)
infowindow.open(map, marker);
});
});
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
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>
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
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"
}
}
});
}
}
}
});