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
Related
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>
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>
Hi I am trying to set marker icon in Google Map using javascript. My image is in Images.xcassets. Right now I am doing this to set icon. But its not working for me. What I am doing is this:
setMarkerWithIcon('/Images/MapScreen/MapviewIcon/MapviewIcon');
function initialize(latitude, longitude, maxzoom) {
var styles = [{
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}];
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
var mapOptions = {
zoom: initialZoomLevel,
center: new google.maps.LatLng(latitude + LatLngDeltas[ randomIntFromInterval(0, LatLngDeltas.length) ],
longitude + LatLngDeltas[ randomIntFromInterval(0, LatLngDeltas.length) ] ),
disableDefaultUI: true,
disableDoubleClickZoom: false,
minZoom: initialZoomLevel,
maxZoom: maxzoom,
scrollwheel: false,
scaleControl: false,
rotateControl:true,
rotateControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
mapTypeControl: false,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
google.maps.event.addListener(map, 'click', function(event) {
addMarker(map, event.latLng);
});
}
function addMarker(mapObject, location) {
deleteMarkers();
var marker = new google.maps.Marker({
position: location,
draggable:true,
animation: google.maps.Animation.DROP,
map: mapObject,
icon:markerPath
});
setTimeout(function() {infowindow.open(mapObject,marker);}, 500);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(mapObject,marker);
});
markers.push(marker);
}
function setMarkerWithIcon(myIcon) {
markerPath = myIcon;
}
Any help is highly appreciated.
I'm using heatmap.js + googlemap.
Heatmap displays perfectly and I can zoom in and out without problems.
but once I have dragged the map, the rendering gets jumpy.
That is, on refresh, it displays well (in sync with the drag), but immediatly translates the heatmap to the place it was before I dragged. It remains jumpy like this at every refresh.
code is as follow :
this.options = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: false,
scrollwheel: true,
draggable: true,
navigationControl: true,
mapTypeControl: false,
scaleControl: true,
disableDoubleClickZoom: false
};
this.map = new google.maps.Map(this.$el, this.options);
this.heatmap = new HeatmapOverlay(this.map, {
"radius":20,
"visible":true,
"opacity":60
});
// this is important, because if you set the data set too early, the latlng/pixel projection doesn't work
var that = this;
google.maps.event.addListenerOnce(this.map, "idle", function(){
that.updateMap(that.map);
});
google.maps.event.addListener(this.map, 'bounds_changed', function(e) {
that.updateMap(that.map);
});
...
updateMap: function (map, callback){
var bound = map.getBounds();
var queryObject = {
north: bound.getNorthEast().lat(),
south: bound.getSouthWest().lat(),
east : bound.getNorthEast().lng(),
west : bound.getSouthWest().lng(),
};
$.getJSON('areaGeolocations', queryObject, function(data) {
var geoData = new Array();
$.each(data.geolocationLogs, function(key, val) {
geoData.push({lng:val.longitude, lat:val.latitude, count:1});
});
that.heatmap.setDataSet({max: 5, data: geoData});
if(callback)
callback();
});
},
any idea ?
cheers!
I am struggling with the marker on a custom map. The map centers on the right place, but the marker doesn't show up on that place. Someone has the same problem already solved?
Thank you a lot for your help!
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
scrollwheel: false,
zoom: 16,
center: new google.maps.LatLng(51.840164,4.33244),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: false,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl: false,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
}
}
var map = new google.maps.Map(map_canvas, map_options)
}
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: 'locationpointer.png',
map: map_canvas
});
}
var features = [
{
position: new google.maps.LatLng(51.840164,4.33244),
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
google.maps.event.addDomListener(window, 'load', initialize);
You need to call your addMarker function in the initialize function so the markers are added after the map is initialized, not before. You have 2 options for initializing the map property of the marker either 1. make it global or 2. pass it in to the addMarker function (as below). Also note that map_canvas is a HTML DOM element, not a google.maps.Map, the name of that variable is "map".
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
scrollwheel: false,
zoom: 16,
center: new google.maps.LatLng(51.840164,4.33244),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: false,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl: false,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
}
}
var map = new google.maps.Map(map_canvas, map_options)
var features = [
{
position: new google.maps.LatLng(51.840164,4.33244),
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature, map);
}
}
function addMarker(feature, map) {
var marker = new google.maps.Marker({
position: feature.position,
icon: 'locationpointer.png',
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
You are missing to add the marker to the map.
Either use marker.setMap(map) or pass it via marker properties as you try to do.
But in your code the map and map_canvas variables are not in the global scope, this means your addMarker function cannot add it and map: map_canvas is null
var marker = new google.maps.Marker({
position: feature.position,
icon: 'locationpointer.png',
**map: map_canvas**
});
You would have to slightly change your code to pass the map into the addMarker function.