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!!
Related
So I have 4 maps all together on one page. I have them all working through the for loop. Now I need to add markers/ Infowindows any idea the best way to add that into the loop, thanks!
// array of lat and lng locations
let locations = [
{
lat:-33.91722,
lng:151.23064
},
{
lat:22.3193,
lng:114.1694
},
{
lat:22.3255,
lng:114.3532
},
{
lat:23.3532,
lng:115.1234
}
];
let elements = ['maps', 'map-rec-one', 'map-rec-two', 'map-rec-three']; // array of html element ids
window.addEventListener('load',
function() {
for (i = 0; i < elements.length; i++) {
initMap(locations[i], elements[i]);
console.log(elements[i]);
console.log(locations[i])}
}, false);
function initMap(location, element) {
console.log(location)
console.log(element)
map = new google.maps.Map(document.getElementById(element), {zoom:4, center: location});
}
One option would be to add the information for the markers to your array.
(if you want the same markers on each map, you can simplify the array or have a separate array for the markers)
let locations = [{
lat: -33.91722,
lng: 151.23064,
markers: [{
lat: -33.91722,
lng: 151.23064,
info: "this is a marker at -33.91722,151.23064"
}, {
lat: -33.8722,
lng: 151.03064,
info: "this is a marker at -33.8722,151.03064"
},
{
lat: -33.5722,
lng: 151.03064,
info: "this is a marker at -33.5722,151.03064"
}
]
},
{
lat: 22.3193,
lng: 114.1694,
markers: [{
lat: 22.3193,
lng: 114.1694,
info: "this is a marker at 22.3193,114.1694"
}]
},
{
lat: 22.3255,
lng: 114.3532
},
{
lat: 23.3532,
lng: 115.1234
}
];
Then in your initMap function, add those markers to the map:
function initMap(location, element, infowindow) {
console.log(location)
console.log(element)
map = new google.maps.Map(document.getElementById(element), {
zoom: 4,
center: location
});
if (location.markers) {
for (var i = 0; i < location.markers.length; i++) {
createMarker(location.markers[i], map, infowindow);
}
}
}
createMarker function:
function createMarker(location, map, infowindow) {
let marker = new google.maps.Marker({
position: location,
map: map
});
google.maps.event.addListener(marker, 'click', function(evt) {
infowindow.setContent(location.info);
infowindow.open(map, marker);
})
}
proof of concept fiddle
code snippet:
// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.
function initialize() {
// array of lat and lng locations
let locations = [{
lat: -33.91722,
lng: 151.23064,
markers: [{
lat: -33.91722,
lng: 151.23064,
info: "this is a marker at -33.91722,151.23064"
}, {
lat: -33.8722,
lng: 151.03064,
info: "this is a marker at -33.8722,151.03064"
},
{
lat: -33.5722,
lng: 151.03064,
info: "this is a marker at -33.5722,151.03064"
}
]
},
{
lat: 22.3193,
lng: 114.1694,
markers: [{
lat: 22.3193,
lng: 114.1694,
info: "this is a marker at 22.3193,114.1694"
}]
},
{
lat: 22.3255,
lng: 114.3532
},
{
lat: 23.3532,
lng: 115.1234
}
];
let elements = ['maps', 'map-rec-one', 'map-rec-two', 'map-rec-three']; // array of html element ids
window.addEventListener('load',
function() {
for (i = 0; i < elements.length; i++) {
initMap(locations[i], elements[i], new google.maps.InfoWindow());
console.log(elements[i]);
console.log(locations[i])
}
}, false);
function initMap(location, element, infowindow) {
console.log(location)
console.log(element)
map = new google.maps.Map(document.getElementById(element), {
zoom: 4,
center: location
});
if (location.markers) {
for (var i = 0; i < location.markers.length; i++) {
createMarker(location.markers[i], map, infowindow);
}
}
}
function createMarker(location, map, infowindow) {
let marker = new google.maps.Marker({
position: location,
map: map
});
google.maps.event.addListener(marker, 'click', function(evt) {
infowindow.setContent(location.info);
infowindow.open(map, marker);
})
}
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#maps,
#map-rec-one,
#map-rec-two,
#map-rec-three {
height: 100%;
width: 25%;
float: right;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Complex Marker Icons</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&libraries=&v=weekly" defer></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="maps"></div>
<div id="map-rec-one"></div>
<div id="map-rec-two"></div>
<div id="map-rec-three"></div>
</body>
</html>
I have 2 markers on a map. I want to make those two markers visible on the map when some event happens. But when I add restriction option on map fitBounds does not show markers. When I remove restriction option it seems to work correctly.
Here is the sample code:
var map, markers;
var locations = [{
lat: 50.8503396,
lng: 4.351710300000036
},
{
lat: 49.9570366,
lng: 36.3431478
},
];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 1,
center: {
lat: -28.024,
lng: 140.887
},
restriction: {
strictBounds: true,
latLngBounds: {
north: 85,
south: -85,
west: -180,
east: 180
},
},
});
markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location
});
});
markers.forEach(function(marker) {
marker.setMap(map);
});
}
setTimeout(function() {
var bounds = new google.maps.LatLngBounds();
markers.forEach(function(marker) {
bounds.extend(marker.position);
});
map.fitBounds(bounds);
}, 5000);
#map {
height: 400px;
}
<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>
https://jsfiddle.net/fedman/6eoty0vm/
While this bug of google.maps.api still exists you can set map center to bounds center as a workaround.
map.fitBounds(bounds);
map.setCenter(bounds.getCenter());
This looks like a bug. It works fine with version 3.34 of the API as shown in the code below. Seems to work also fine depending on the map container height (tried with a height of 200px and it worked even with the latest versions).
I have opened a bug in the issue tracker.
var map, markers;
var locations = [{
lat: 50.8503396,
lng: 4.351710300000036
},
{
lat: 49.9570366,
lng: 36.3431478
},
];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 1,
center: {
lat: -28.024,
lng: 140.887
},
restriction: {
strictBounds: true,
latLngBounds: {
north: 85,
south: -85,
west: -180,
east: 180
},
},
});
markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location
});
});
markers.forEach(function(marker) {
marker.setMap(map);
});
}
setTimeout(function() {
var bounds = new google.maps.LatLngBounds();
markers.forEach(function(marker) {
bounds.extend(marker.position);
});
map.fitBounds(bounds);
}, 5000);
#map {
height: 400px;
}
<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?v=3.34&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
I have just a simple question about the jQuery Google Maps code.
I've added a marker to a map and the infowindow doesn't show up on start, only after mousehover.
Here is the code:
(function ($) {
var map;
var lat = XX.XXXXXX;
var lng = X.XXXXX;
var htmlcontent = 'CONTENT';
$(document).ready(function(){
if ( document.getElementById("map") ) {
map = new GMaps({
el: '#map',
lat: lat,
lng: lng,
zoomControl : true,
zoomControlOpt: {
style : 'SMALL',
position: 'TOP_LEFT'
},
panControl : true,
streetViewControl : false,
mapTypeControl: true,
overviewMapControl: true
});
var marker = map.addMarker({
lat: lat,
lng: lng,
title: 'THE TITLE',
infoWindow: {
content: htmlcontent
},
mouseover: function(e){
this.infoWindow.open(this.map, this);
}
});
marker.infoWindow.open(map.self, marker);
map.setCenter(XX.XXXXXX, X.XXXXXX);
};
});
})(jQuery);
So, this is the part where I have problems with:
marker.infoWindow.open(map.self, marker);
It worked well, a few weeks (or months) ago.
I will get this error in the console
infowindow.js:4 Uncaught TypeError: Cannot read property 'get' of undefined
and this warning
Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
How to fix the infowindow of the marker?
Edit: I set the center of the marker individually because the popup of the marker isn't centered at all.
Edit2: Added API keys, no error or warning, but the infowindow of the marker won't show up at start
The google.maps.Map object is map.map:
code snippet:
(function($) {
var map;
var lat = 42;
var lng = -72;
var htmlcontent = 'CONTENT';
$(document).ready(function() {
if (document.getElementById("map")) {
map = new GMaps({
el: '#map',
lat: lat,
lng: lng,
zoomControl: true,
zoomControlOpt: {
style: 'SMALL',
position: 'TOP_LEFT'
},
panControl: true,
streetViewControl: false,
mapTypeControl: true,
overviewMapControl: true
});
var marker = map.addMarker({
lat: lat,
lng: lng,
title: 'THE TITLE',
infoWindow: {
content: htmlcontent
},
mouseover: function(e) {
this.infoWindow.open(this.map, this);
}
});
marker.infoWindow.open(map.map, marker);
map.setCenter(42, -72);
};
});
})(jQuery);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://hpneo.github.io/gmaps/gmaps.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
In my controller, I have this function to get the coordinates of an address:
function get_coor(city, callback)
{
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { "address": city }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
var location = results[0].geometry.location;
callback(location.lat(), location.lng());
}
else
{
callback(); // callback for error
}
});
}
Doing this works fine and outputs the correct latitude:
get_coor('Amsterdam', function(lat, lng) {
console.log('here is my lat:' + lat);
});
I want to use these coordinates in my google map, so I made it like this:
get_coor('Amsterdam', function(lat, lng) {
$scope.map = {center: {latitude: lat, longitude: lng }, zoom: 4 };
$scope.options = {scrollwheel: false};
$scope.marker = {
coords: {
latitude: lat,
longitude: lng
},
show: false,
id: 0
};
$scope.windowOptions = {
visible: false
};
$scope.onClick = function() {
$scope.windowOptions.visible = !$scope.windowOptions.visible;
};
$scope.closeClick = function() {
$scope.windowOptions.visible = false;
};
});
The map is centered correctly, so $scope.map = {center: {latitude: lat, longitude: lng }, zoom: 4 }; seems to work fine, but the marker is placed on it's default location, not Amsterdam. When I view the source, the coordinates of the marker are the right coordinates.
My guess is that it has something to do with asynchronous javascript, but I'm very new to this... Anyone who can help?
UPDATE:
Refreshing the page puts the marker on the right position, but it persists on first load.
Since geocoder.geocode function executes asynchronously and ui-gmap-marker is a child directive, you should call $apply() explicitly in that case:
$scope.marker = {
coords: {
latitude: location.lat(),
longitude: location.lng()
},
title: 'Amsterdam',
show: true,
id: 1
};
$scope.$apply();
Working example
var appMaps = angular.module('appMaps', ['uiGmapgoogle-maps']);
appMaps.controller('mainCtrl', function ($scope, uiGmapGoogleMapApi, uiGmapIsReady) {
$scope.windowOptions = {
visible: false
};
$scope.onClick = function () {
$scope.windowOptions.visible = !$scope.windowOptions.visible;
};
$scope.closeClick = function () {
$scope.windowOptions.visible = false;
};
$scope.options = { scrollwheel: false };
$scope.map = { center: { latitude: 30, longitude: 0 }, zoom: 4 };
var resolveAddress = function (address, callback) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ "address": address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
var location = results[0].geometry.location;
callback(location);
}
else {
callback(null);
}
});
}
uiGmapGoogleMapApi.then(function (gapi) {
resolveAddress('Amsterdam', function (location) {
$scope.$apply(function () {
$scope.map.center = { latitude: location.lat(), longitude: location.lng() };
$scope.marker = {
coords: {
latitude: location.lat(),
longitude: location.lng()
},
title: 'Amsterdam',
show: true,
id: 1
};
});
});
});
});
.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="//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 ng-app="appMaps" id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds">
<ui-gmap-marker idkey="marker.id" coords="marker.coords" options="marker.options" click="onClick()" events="marker.events" />
</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>