Show window on Marker's click in Angular Google Maps - javascript

I am using http://angular-google-maps.org/api in order to work with a Google map.
So far I am able to show the markers but somehow I can't get to show the windows on click.
<markers models="markers" coords="'last_known_location'" icon="'icon'" click="'onClicked'">
<windows show="'showWindow'" closeClick="'closeClick'" ng-cloak>
<p ng-non-bindable style="width:200px">{angular{ options.title }angular}</p>
<p ng-non-bindable>{angular{ latitude | number:4 }angular}, {angular{ longitude | number:4 }angular}!</p>
</windows>
</markers>
As you can see, it uses the showWindow property to show the window
I add this to each marker by doing
angular.forEach($scope.markers,function(marker){
marker.closeClick = function() {
marker.showWindow = false;
$scope.$apply();
};
marker.onClicked = function(){
alert(marker.id);
onMarkerClicked(marker.id);
};
});
The alert shows up on click, and
var onMarkerClicked = function(marker){
marker.showWindow = true;
$scope.$apply();
}
The property is also changed, but the window doesn't show up.
Any ideas? thanks

Your code actually works fine here...
The problem with it is that you're passing marker.id to onMarkerClicked, not the marker itself...
Also, I didn't need $scope.$apply() to make it work...
Now I'm trying to figure out how to access the model obj inside the windows tag...

Related

How to simply change marker icon on click and then back to original state when click elsewhere?

I'm trying to get this function on my custom map https://rodadagua.netlify.app/
I've found some very close examples and questions on here but being a complete novice unfortunately I have no idea what I´m doing.
This is essentially the same question Change (and change back) leaflet icon on click but with such basic knowledge I can't work it out. Also I found this question Leaflet map: on click changing color of all markers and example https://jsfiddle.net/vz7jmnqs/2/ is essentially what I'm after but again I can't work out how to include it in my code and make it work.
I want to change marker icon when clicked (so that it shows a different coloured version) and then return back to original state (original icon/colour) when click elsewhere, anywhere, eg. close the associated popup or click on the map or click on another marker.
The closet I've got to is I can change the icon on a click, but I want to change it back.
var defaultIcon = L.icon({
iconUrl: 'scripts/leaflet/images/marker-icon.png',
shadowUrl: 'scripts/leaflet/images/marker-shadow.png',
});
var brownIcon = L.icon({
iconUrl: 'scripts/leaflet/images/marker-icon-brown.png',
shadowUrl: 'scripts/leaflet/images/marker-shadow.png',
});
var testmarker = L.marker([0.0, 0.0], {icon: defaultIcon}).addTo(map);
testmarker.on('click', function(e) {
testmarker.setIcon(brownIcon);
});
I'm using the basic Leaflet script to define the map etc. then all of my markers and popups are set up like this example:
var marker_Waldemar = L.marker([15.0, -40.0]).addTo(map);
marker_Waldemar.bindPopup('<h3>EMEF Prof. Waldemar Rodrigues</h3><p><iframe src="https://galeriafeira.netlify.app/" width="500" height="354" style="border:none;"></iframe></p><p><b>Feira de Ciências</b></p>', {
maxWidth : 520,
maxHeight : 450,
});
I would like to know exactly what code I need to put in and where.
$("body").click(function(){
testmarker.setIcon(defaultIcon);
});
It will do the job!

Using <script> within a leaflet marker popup

This is going to be a very simple question.
Is there a way of using <script> .... </script> within a Leaflet marker popup ? If not, is there a way around it (ie is there a way to save what the script returns and implement that return in the marker popup) ?
You may be mixing 2 actions: loading the script and calling the rateYo() function
Loading the script has nothing particular ...
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
Then you must call the function when the popup opens:
var marker = L.marker([51.5, -0.09]).addTo(mymap)
.bindPopup("I am a popup.<div id=\"rateYo\"></div>");
marker.id = something;
marker.on('popupopen', function (e) {
// the id of the clicked marker is e.target.id
// retrieve the rating for this id and use it in the rateYo() call
$("#rateYo").rateYo({
rating: 3.6,
starWidth: "15px"
});
here is an example: https://plnkr.co/8PZIgd2g4Da6AHhWvC2o

Ng-map - infowindow on markers sometimes not appearing

I'm using the ng-map directive to display a map. The map has markers that show an infowindow whenever there's a mouseover on the marker. Sometimes however, the infowindow doesn't appear.
Other than this, I haven't been able to identify any pattern to what's happening, as the problem occurs for a different marker each time. I'm outputting data to the infowindow however the issue doesn't seem to be 'data related' as all data for the selected location seems to be correct at the point where the issue occurs.
I have a showInfo method that is being called on a mouseover like this:
showInfo(event, loc, infoWindowTemplate, map, mapsController) {
loc - data for the clicked location
infoWindowTemplate - the info window template to use (this is always the same for a particular map, however this is configurable, so if I'm showing a map for mobile, I use one infowindow template, if I'm showing a desktop map, I use a different one)
map - a reference to the NgMap object on the controller
mapsController - the controller itself (I strongly suspect that this is a bad code smell - it was the easiest way I could figure out to get reference back to the controller following the mouseover)
Here is the body of the method:
map.getMap(mapsController.mapId).then(function (myMap) {
var selectedMarker = myMap.markers["L: " + loc.position[0] + ", " + loc.position[1]];
selectedMarker.locationInfo = loc;
console.log("about to show infowindow - infoWindowTemplate = " + infoWindowTemplate);
// console output = "cached-myTemplate.html"
myMap.showInfoWindow(infoWindowTemplate, selectedMarker);
selectedMarker is definitely referring to the correct marker object. My template looks like this:
<script id="cached-myTemplate.html" type="text/ng-template">
<a class="map-location__link" href="/locations/{{anchor.locationInfo.locationId}}" target="_blank">
<img src="{{anchor.locationInfo.locationImageThumbnail}}" />
</a>
</script>
The issue seems to be that calling 'showInfoWindow' is intermittently failing somehow (although there are no errors in the console). Any comments or answers with ideas of what may be causing the issue or what else I can do to diagnose it will be appreciated!
I discovered that this is a timing issue. Delaying the 'turn' in which showInfoWindow is called (by adding a short timeout) fixed the issue:
map.getMap(mapsController.mapId).then(function (myMap) {
....
this.$timeout(function () {
dealmap.showInfoWindow(infoWindowTemplate, selectedMarker);
}, 100)
}.bind(this));

Leaflet.js add button to marker popup

I am desperately trying to dynamically add buttons into leaflet.js marker popups and assign a callback. However, I seem not to be able to wrap my head around it.
I am using this example https://github.com/calendee/ionic-leafletjs-map-demo and add the following line into line 105 in js/controller/mapController.js
<button class="icon-left ion-information" ng-click="stationInfoButtonClick('+location.name+')"></button>
However, clicking / taping the button does not invoke the specified callback function. Ideas somebody?
You are trying to add HTML to AngularJS Code. This is not possible just like that.
You need to use $compileProvider for that.
On a previous version of leaflet, I managed to do that by calling the $compileProvider on popUp open.
$scope.$on('leafletDirectiveMap.popupopen', function(event, args) {
var feature = args.leafletEvent.popup.options.feature;
var newScope = scope.$new();
newScope.stream = feature;
$compile(args.leafletEvent.popup._contentNode)(newScope);
});
Never done it on ionic indeed, but I'm interested on your return.

Getting the marker in on-click handler: AngularJS + Google Maps

I am trying to show the infowindow on top of a marker and I am struggling with it.
Currently I have the following HTML:
<map data-ng-model="mymap" zoom="4" center="[38.50, -95.00]">
<marker ng-repeat="item in list"
position="[{{item.coordinates}}]" title="{{item.name}}"
icon="./images/i.png"
on-click="onMarkerClicked(mymap, this)" />
<control name="overviewMap" opened="true" />
</map>`
Then, in the corresponding controller, I have:
$scope.onMarkerClicked = function(mymap, marker, event){
infowindow = new google.maps.InfoWindow("Hi I am the MARKER" + event.target.title);
infowindow.open( mymap, event.target );
//infowindow.open( mymap, marker);
$scope.$apply();
}
However, mymap is has the correct value, while event.target does not seem to work, as well as marker (commented in the reported code)
Cannot read property 'target' of undefined
When using marker, it is undefined.
How can I manage to fix this?
I have come across this GitHub where they discuss this issue - https://github.com/allenhwkim/angularjs-google-maps/issues/95
They then go on to share an example of using ng-repeat with infoWindow - https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/infowindow_compiled.html
Take a look at the source code on that page, I think it will help you
You should actually be passing the marker instance as the second parameter to the open call.
See here https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
You are sending the object this as an argument and naming that event later? On top of that if you are using Angular why not doing it with ng-click="onMarkerClicked(myMap, this, event)". I have never used Google Maps this way but it seems to me that your parameters somehow are incorrect.
See this simple fiddle to see what I mean
http://jsfiddle.net/ozbafyhh/
<button onclick="myFunction(this, event)">Click me</button>
function myFunction (x, event){
alert(x);
alert(event);
}

Categories