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>
Related
I am having the hardest time getting my angular project to display multiple map markers. I have a service called retsAPI where I am querying a local MLS database for home listings. I am trying to display these items on a google mapes. Here is my controller.
function retsMapController($scope, uiGmapGoogleMapApi, uiGmapIsReady, retsAPI) {
$scope.map = {
center: {
latitude: 43.6376107,
longitude: -116.314943
},
zoom: 10
};
$scope.options = {
scrollwheel: false,
streetViewControl: false,
mapTypeControl: false,
scaleControl: false,
rotateControl: false,
zoomControl: false
};
$scope.markers = [];
uiGmapIsReady.promise()
.then(function (instances) {
console.log(instances[0].map);
})
.then(function () {
retsAPI.default().success(function(result) {
$scope.results = result;
var i = 0;
result.forEach(function(item) {
$scope.markers.push({
id: Date.now()+i,
coords: {
latitude: item['LMD_MP_Latitude'],
longitude: item['LMD_MP_Longitude']
}
});
i++;
});
console.log("MARKER: ", $scope.markers);
});
});
uiGmapGoogleMapApi.then(function (maps) {
angular.extend($scope.map, {
options: {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
}
}
});
});
Here is my HTML file.
<div id="real_angular" ng-controller="retsMap" ng-app="real_angular">
<div rets-search-form></div>
{{ markers }}
<ui-gmap-google-map
ng-if="map.center"
center='map.center'
zoom='map.zoom'
options='options'
refresh="true">
<ui-gmap-markers
models="markers"
coords="'self'"
icon="'icon'">
</ui-gmap-markers>
</ui-gmap-google-map>
and this is the result of $scope.markers
[{"id":1481596995980,"coords":{"latitude":"43.7335624694824","longitude":"-116.400283813477"}},{"id":1481596995981,"coords":{"latitude":"44.9327393","longitude":"-116.0692291"}},{"id":1481596995982,"coords":{"latitude":"44.846809387207","longitude":"-116.179756164551"}},{"id":1481596995983,"coords":{"latitude":"44.0762062072754","longitude":"-116.978248596191"}},{"id":1481596995984,"coords":{"latitude":"44.6780061721802","longitude":"-116.120807826519"}},{"id":1481596995985,"coords":{"latitude":"44.8671951293945","longitude":"-116.026954650879"}},{"id":1481596995986,"coords":{"latitude":"43.0574607849121","longitude":"-114.13264465332"}},{"id":1481596995987,"coords":{"latitude":"43.7259407043457","longitude":"-116.800910949707"}},{"id":1481596995988,"coords":{"latitude":"42.55171340147","longitude":"-114.460141584277"}},{"id":1481596995989,"coords":{"latitude":"44.3812294006348","longitude":"-115.982734680176"}},{"id":1481596995990,"coords":{"latitude":"42.9506072998047","longitude":"-115.298492431641"}},{"id":1481596995991,"coords":{"latitude":"42.5505142211914","longitude":"-114.454963684082"}},{"id":1481596995992,"coords":{"latitude":"43.677565","longitude":"-116.0496032"}},{"id":1481596995993,"coords":{"latitude":"44.2447853088379","longitude":"-116.953323364258"}},{"id":1481596995994,"coords":{"latitude":"43.5853805541992","longitude":"-116.189315795898"}},{"id":1481596995995,"coords":{"latitude":"43.6678466796875","longitude":"-116.680221557617"}},{"id":1481596995996,"coords":{"latitude":"43.6502661556005","longitude":"-116.251468285918"}},{"id":1481596995997,"coords":{"latitude":"43.6551094055176","longitude":"-116.685394287109"}},{"id":1481596995998,"coords":{"latitude":"44.5916213989258","longitude":"-116.669593811035"}},{"id":1481596995999,"coords":{"latitude":"42.6074829101563","longitude":"-114.768821716309"}}]
it also appears that i have lost my google controls. I am not sure what happened to make those disappear.
Given the data format for $scope.markers you need to replace markers binding from coords="'self'" to coords="'coords'":
<ui-gmap-markers models="markers" coords="'coords'" icon="'icon'">
</ui-gmap-markers>
Example
Demo
I have a map that uses Google Maps for AngularJS, it has two markers, and every marker shows a infoWindow with data.
The first time I click on a marker, everything works correctly. If I click the second marker, still works correctly. But when I click the first marker again, the infoWindow does not change its position: the data associated to the first marker is shown on a infoWindow over the second marker, and not over the first.
What can cause this problem?
My html code:
<ui-gmap-google-map center='map.center' zoom='map.zoom' options='map.options' control='map.control'>
<ui-gmap-markers models="places" coords="'coords'" idKey="'idKey'" isLabel="true" options="'options'" events='map.markerEvents'></ui-gmap-markers>
<ui-gmap-window coords="mapOptions.markers.selected.coords" show="windowOptions.show" options="windowOptions" closeClick="closeClick()" ng-cloak>
//SOME CODE HERE
</ui-gmap-window>
</ui-gmap-google-map>
The click event associated to a marker:
$scope.map = { center: { latitude: 43, longitude: -8.3 }, zoom: 8, control: {}, markerEvents: {
click: function(marker){
if(marker.model.title != USER_LOCATION){
$scope.onClick(marker.model);
$scope.mapOptions.markers.selected = marker.model;
}
}
}, options: $scope.mapOptions};
The content of windowOptions:
$scope.windowOptions = {
show: false,
boxClass: "infobox",
boxStyle: {
backgroundColor: "transparent",
border: "1px solid #C7CECE",
borderRadius: "5px",
width: "85%"
},
disableAutoPan: false,
maxWidth: 0,
infoBoxClearance: new google.maps.Size(1, 1),
pixelOffset: new google.maps.Size(-175, -250),
zIndex: null,
/*closeBoxMargin: "10px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",*/
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
If I use the button "x" to close the marker, this issue does not happen anymore. But I don't want the user to need to close manually the infoWindow.
Any help would be appreciated! Thanks
EDIT: I include my mapOptions code:
$scope.mapOptions = {
minZoom: 3,
zoomControl: false,
draggable: true,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
disableDoubleClickZoom: false,
keyboardShortcuts: true,
markers: {
selected: {}
}
};
I was not able to reproduce the issue you are experiencing but the following example demonstrates how to display info window on marker click:
angular.module('appMaps', ['uiGmapgoogle-maps'])
.controller('mapCtrl', function($scope, uiGmapGoogleMapApi) {
$scope.places = [
{ idKey: 1, name: "Brisbane", coords: { latitude: -33.867396, longitude: 151.206854 } },
{ idKey: 2, name: "Sydney", coords: { latitude: -27.46758, longitude: 153.027892 } },
{ idKey: 3, name: "Perth", coords: { latitude: -31.953159, longitude: 115.849915 } }
];
var USER_LOCATION = '';
uiGmapGoogleMapApi.then(function(maps) {
$scope.map = {
center: { latitude: -30, longitude: 135.0 },
zoom: 4,
control: {},
markerEvents: {
click: function(marker) {
if (marker.model.title != USER_LOCATION) {
$scope.onClick(marker.model);
$scope.mapOptions.markers.selected = marker.model;
}
}
},
options: $scope.mapOptions
};
$scope.windowOptions = {
show: false,
pixelOffset: new google.maps.Size(0, -32),
/*boxClass: "infobox",
boxStyle: {
backgroundColor: "transparent",
border: "1px solid #C7CECE",
borderRadius: "5px",
width: "85%"
},
disableAutoPan: false,
maxWidth: 0,
infoBoxClearance: new google.maps.Size(1, 1),
zIndex: null,
isHidden: false,
pane: "floatPane",
enableEventPropagation: false*/
};
});
$scope.mapOptions = {
minZoom: 3,
zoomControl: false,
draggable: true,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
disableDoubleClickZoom: false,
keyboardShortcuts: true,
markers: {
selected: {}
}
};
$scope.onClick = function(data) {
$scope.windowOptions.show = true;
};
$scope.closeClick = function() {
$scope.windowOptions.show = false;
};
});
.angular-google-map-container { height: 480px; }
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="http://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.2.1/angular-google-maps.min.js"></script>
<div ng-app="appMaps" ng-controller="mapCtrl">
<ui-gmap-google-map center='map.center' zoom='map.zoom' options='map.options' control='map.control'>
<ui-gmap-markers models="places" coords="'coords'" idKey="'idKey'" isLabel="true" options="'options'" events='map.markerEvents'></ui-gmap-markers>
<ui-gmap-window coords="mapOptions.markers.selected.coords" show="windowOptions.show" options="windowOptions" closeClick="closeClick()" ng-cloak>
Some info goes here
</ui-gmap-window>
</ui-gmap-google-map>
</div>
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
I'm currently having some trouble adding a marker on click to Google Maps. I'm using http://angular-ui.github.io .
Here is my code:
HTML:
<ui-gmap-google-map center='map.center' zoom='map.zoom' events="map.events">
<ui-gmap-marker coords="map.marker.coords" idKey="map.marker.id"></ui-gmap-marker>
</ui-gmap-google-map>
And there is my JS:
$scope.map = {
center: {
latitude: alat.value, longitude: alon.value },
zoom: 15,
streetViewControl: false,
events: {
click: function (map, eventName, originalEventArgs) {
var e = originalEventArgs[0];
var lat = e.latLng.lat(),lon = e.latLng.lng();
$scope.map.marker = {
id: 1,
coords: {
latitude: lat,
longitude: lon
}
};
$scope.$apply();
}
}
};
I've been following the Angular-Google-Maps API, but I'm not entirely excellent at the Google Maps API as yet. So far, I've deduced that my click event does work, but my marker is not being added to the map. Help would be appreciated.
I have created the fiddle. Here is the HTML.
<div ng-app="main" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" events="map.events">
<ui-gmap-marker ng-repeat="m in map.markers" coords="m.coords" icon="m.icon" idkey="m.id"></ui-gmap-marker>
</ui-gmap-google-map>
</div>
The controller is like this.
angular.module('main', ['uiGmapgoogle-maps'])
.controller('mainCtrl', function ($scope) {
angular.extend($scope, {
map: {
center: {
latitude: 42.3349940452867,
longitude:-71.0353168884369
},
zoom: 11,
markers: [],
events: {
click: function (map, eventName, originalEventArgs) {
var e = originalEventArgs[0];
var lat = e.latLng.lat(),lon = e.latLng.lng();
var marker = {
id: Date.now(),
coords: {
latitude: lat,
longitude: lon
}
};
$scope.map.markers.push(marker);
console.log($scope.map.markers);
$scope.$apply();
}
}
}
});
});
It seems you need give $scope.map.marker.id one init value. Otherwise, below error would occur.
gMarker.key undefined and it is REQUIRED!!