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.
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 have been searching all over the internet for a solution - but no luck.
I'm setting up a website in Umbraco (AngularJS) - and I use UI-Google-Map plugin - and it works great!
I have implemented route directions, and it works like a charm - my only problem is, that I can't change the "A" and "B" icon when the directions show on the map.
This is what my scope looks like:
$scope.map = {
center: {
latitude: 55.711898,
longitude: 9.5387363
},
zoom: 12,
events: {
'tilesloaded': function (map) {
if (load) {
$timeout(function () {
maps.event.trigger(map, "resize");
var marker = new maps.Marker({
position: center,
map: map,
icon: biscuitIcon
});
marker.setMap(map);
map.setCenter(marker.getPosition());
directionsDisplay.setMap(map);
}, 500);
load = false;
} else {
maps.event.trigger(map, "resize");
}
}
},
options: {
disableDefaultUI: true,
zoomControl: false,
styles: [{'featureType':'water','elementType':'all','stylers':[{'color':'#f0f0f0'}]},{'featureType':'landscape','elementType':'geometry','stylers':[{'color':'#cccccc'}]},{'featureType':'road.highway','elementType':'geometry','stylers':[{'color':'#000000'}]},{'featureType':'road.arterial','elementType':'geometry.fill','stylers':[{'color':'#363636'}]},{'featureType':'poi.park','elementType':'geometry','stylers':[{'color':'#cccccc'}]},{'featureType':'poi.attraction','elementType':'geometry.fill','stylers':[{'color':'#cccccc'}]}]
},
control: {}
};
And here is what happens, when you fill out the "From" - "To" form:
$scope.getDirections = function(){
directionsService.route({
origin: $scope.startlocation,
destination: $scope.endlocation,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0].legs[0];
directionsDisplay.setPanel(document.getElementById('directions-panel'));
} else {
if(status === 'NOT_FOUND') {
window.alert('No results - Please try again');
}
}
});
}
I have tried the "makeMarker" method (http://jsfiddle.net/6LwgQ/1/) but no luck. Can any of you point out where I'm banging my head against the wall?
Oh, btw. I have tried to "console.log" the info when using "makeMarker" - and all the info is shown in my console, but it does not appear on my map :( I'm seriously desperate now...
Thanks in advance!
/ Kucko
For placing markers you could utilize ui-gmap-markers directive. The folliowing example shows how print route and set end/start styled markers:
var appMaps = angular.module('appMaps', ['uiGmapgoogle-maps']);
appMaps.controller('mainCtrl', function ($scope, uiGmapIsReady, $log) {
$scope.startlocation = 'New York, NY';
$scope.endlocation = 'San Diego, California';
$scope.markers = [];
$scope.icons = {
start: {
url: 'http://maps.google.com/mapfiles/ms/micons/blue.png',
size: { width: 44, height: 32 },
origin: { x: 0, y: 0 },
anchor: { x: 22, y: 32 }
},
end: {
url: 'http://maps.google.com/mapfiles/ms/micons/green.png',
size: { width: 44, height: 32 },
origin: { x: 0, y: 0 },
anchor: { x: 22, y: 32 }
}
};
$scope.map = {
center: {
latitude: 55.711898,
longitude: 9.5387363
},
zoom: 12,
options: {
disableDefaultUI: true,
zoomControl: false,
styles: [{ 'featureType': 'water', 'elementType': 'all', 'stylers': [{ 'color': '#f0f0f0' }] }, { 'featureType': 'landscape', 'elementType': 'geometry', 'stylers': [{ 'color': '#cccccc' }] }, { 'featureType': 'road.highway', 'elementType': 'geometry', 'stylers': [{ 'color': '#000000' }] }, { 'featureType': 'road.arterial', 'elementType': 'geometry.fill', 'stylers': [{ 'color': '#363636' }] }, { 'featureType': 'poi.park', 'elementType': 'geometry', 'stylers': [{ 'color': '#cccccc' }] }, { 'featureType': 'poi.attraction', 'elementType': 'geometry.fill', 'stylers': [{ 'color': '#cccccc' }] }]
},
control: {}
};
uiGmapIsReady.promise()
.then(function (instances) {
printRoute();
});
var printRoute = function () {
var directionsService = new google.maps.DirectionsService();
var directionsRequest = {
origin: $scope.startlocation,
destination: $scope.endlocation,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(directionsRequest, function (response, status) {
if (status === google.maps.DirectionsStatus.OK) {
var map = $scope.map.control.getGMap();
var directionsDisplay = new google.maps.DirectionsRenderer({
map: map,
directions: response,
suppressMarkers: true
});
var leg = response.routes[0].legs[0];
setMarker(0,leg.start_location, $scope.icons.start, 'title');
setMarker(1,leg.end_location, $scope.icons.end, 'title');
} else {
$log.error('Request failed: ' + status);
}
});
}
var setMarker = function (id,latLng, icon, title) {
var markerInfo = {
id: id,
latitude: latLng.lat(),
longitude: latLng.lng(),
title: title,
icon: icon
};
$scope.markers.push(markerInfo);
};
});
.angular-google-map-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<div id="map_canvas" ng-app="appMaps" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" control="map.control" options="map.options" events="map.events">
<ui-gmap-markers models="markers" coords="'self'" icon="'icon'">
</ui-gmap-markers>
</ui-gmap-google-map>
</div>
Plunker
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"
}
}
});
}
}
}
});
I am building an app which contains a list of addresses. This app is working in such a way that once the user clicks on each of the items (addresses) in the list, the next page shows a map, and the map has a marker which points to the exact location of the address clicked on. This is made possible due to the Latitude and Longitude coordinates stated in code.
My problem is that I have more than one address, and each of these addresses have a unique longitude and latitude. I want to make my app work in such a way that when a user clicks on any address they are interested in, the app will open a page and show the map and a marker pointing to the exact location of the address on the map. My code's below: it is working perfectly, BUT when the user clicks on the address, it takes them to the same logitude and latitude.
My store:
Ext.define('List.store.Presidents', {
extend : 'Ext.data.Store',
config : {
model : 'List.model.President',
sorters : 'lastName',
grouper : function(record) {
return record.get('lastName')[0];
},
data : [{
firstName : "Ikhlas HQ",
lastName : "Tower 11A, Avenue 5, Bangsar South, No.8 Jalan Kerinchi 59200 Kuala Lumpur",
latitude : 3.110649,
longitude : 101.664991,
id: 'm12',
},
{
firstName : "PEJABAT WILAYAH SELANGOR",
lastName : "No. 97, 97-1 & 97-2, Jalan Mahogani 5/KS7, Ambang Botanic, 41200 Klang, Selangor",
latitude : 3.003384,
longitude : 101.45256,
id: 'm1',
}, ]
}
});
My controller:
Ext.define('List.controller.Main', {
extend: 'Ext.app.Controller',
config: {
control: {
'presidentlist': {
disclose: 'showDetail'
},
}
},
showDetail: function(list, record) {
this.getMain().push({
xtype: 'presidentdetail',
title: record.fullName(),
listeners: {
maprender: function(comp, map) {
var position = new google.maps.LatLng(5.978132,116.072617);
var marker = new google.maps.Marker({
position: position,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
setTimeout(function() {
map.panTo(position);
}, 1000);
},
},
})
},
});
My view:
Ext.define('List.view.PresidentDetail', {
extend : 'Ext.Map',
xtype: 'presidentdetail',
config: {
title: 'Details',
styleHtmlContent: true,
scrollable: 'vertical',
//useCurrentLocation: true,
layout: 'fit',
mapOptions: {
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
}
});
My model:
Ext.define('List.model.President', {
extend : 'Ext.data.Model',
config : {
fields : ['firstName', 'middleInitial', 'lastName', 'latitude', 'longitude']
},
fullName : function() {
var d = this.data, names = [d.firstName, (!d.middleInitial ? "" : d.middleInitial + "."), d.lastName];
return names.join(" ");
}
});
Help me out please. I need each of the addresses on the list to be tagged with a latitude and longitude so that when the user clicks on the address, it will point to the exact location the map.
Your line:
var position = new google.maps.LatLng(5.978132,116.072617);
Is fixed to the same coordinates so it will never change.
In my application I have the view fire an event to the controller and then in the controller have a reference to the record's coordinates which are then set to the map.
In view:
config: {
layout: 'fit',
items: [
{
xtype: 'map',
listeners: {
maprender: function (extMapComponent, googleMapComp) {
this.fireEvent('googleMapRender', googleMapComp);
}
}
}
]
}
Controller:
refs: {
mapRef: 'map'
},
Control: {
mapRef: {
googleMapRender: 'onGoogleMapRender'
}
}
onGoogleMapRender: function (googleMap) {
// this.selectedRecord should be set when you select the item in the list
// so that you can pull the coordinates off
var record = this.selectedRecord;
var long = record.get("Longitude");
var lat = record.get("Latitude");
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, long);
});
marker.setMap(googleMap);
}