i just working with Wikitude and Google maps in AngularJS(Ionic). I need to set ng-click event for InfoWindow in my controller. My code:
google.maps.event.addListenerOnce($scope.map, 'idle', function(){
var marker = new google.maps.Marker({
map: $scope.map,
animation: google.maps.Animation.DROP,
position: latLng
});
var infoWindow = new google.maps.InfoWindow({
content: 'CATCH!'
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.open($scope.map, marker);
});
});
You cannot link dynamically created HTML directly to controller. There are two options mentioned in this link
Other option is to use jQuery. For this you can give an id to the anchor elementand find the element by ID and attach click event.
Solved.
google.maps.event.addListenerOnce($scope.map, 'idle', function() {
var marker = new google.maps.Marker({
map: $scope.map,
animation: google.maps.Animation.DROP,
position: latLng
});
google.maps.event.addListener(marker, 'click', function() {
$scope.launchAR('mana_catch_and_eat');
});
});
Related
I'm trying to add an infobox to a number of pins on a Google map.
I've got the infobox to work previous - JSfiddle.
But i've now altered the code to include a dropdown menu. I've tried to add the infoboxes again but it doesn't work and i don't understand why it doesn't. JSfiddle.
I've copied and pasted the code for the infoboxes, checked that the variable names still match up, and that the code is in the same order.
The following code is where the marker is added to the map and i'm trying to add an infobox. The function addMarker is sat within my initialisation function. And var infowindow is sat beneath the initialisation function.
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: feature.icon,
map: map,
size: 20,
title: name,
draggable: false,
//animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', (function (marker) {return function () {
var Infocontent = feature.desc;
infowindow.setContent(Infocontent);
infowindow.open(map, marker); //'mouseover'
}
})(marker));
}
var infowindow = new google.maps.InfoWindow();
May someone please tell me where i've gone wrong?
I just updated your code by creating a new fiddle and now it is showing infowindow. I just moved your infowindow code within listener definintion.
Please check
google.maps.event.addListener(marker, 'click', (function (marker) {return function () {
console.log('called');
var Infocontent = feature.desc;
infowindow = new google.maps.InfoWindow();
infowindow.setContent(Infocontent);
infowindow.open(map, marker); //'mouseover'
}
})(marker));
JSFiddle
I have an issue to add infoWindow to my markers generated by a FOR loop.
I want to generate a infoWindow to each marker.
I see only the last infoWindow is added, even if I clic to other marker, this infoWindow is shown in the last marker see screenshot
Here is my loop to create markers and infowindows :
for (var i in data) {
var rssi = data[i].rssi;
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(data[i].lat, data[i].lng),
title: data[i].rssi,
clickable: true
});
marker.info = new google.maps.InfoWindow({
content: 'This is the marker:'+i
});
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker);
});
markers.push(marker);
}
you need to find the current marker then get the info object from it.try this:
use:
google.maps.event.addListener(marker, 'click', function() {
this.info.open(map,this );
});
<script src="http://maps.google.com/maps/api/js?v=3.9&sensor=false"></script>
<script>
var markers=[];
function plotmap(){
var gm = google.maps;
var map = new gm.Map(document.getElementById('map_canvas'), {
mapTypeId: gm.MapTypeId.SATELLITE,
center: new gm.LatLng(17.00,78.43), zoom: 10
});
var data=[{'rssi':"fgfghfgh",'lat':"17.43",'lng':"78.43"},{'rssi':"new one",'lat':"17.49",'lng':"78.53"}];
for (var i in data) {
var rssi = data[i].rssi;
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(data[i].lat, data[i].lng),
title: data[i].rssi,
clickable: true
});
marker.info = new google.maps.InfoWindow({
content: 'This is the marker:'+i
});
google.maps.event.addListener(marker, 'click', function() {
this.info.open(map,this );
});
markers.push(marker);
}
}
</script>
<div id="map_canvas" style="width:600px;height:500px;"></div>
<script>
plotmap();
</script>
I think you should open infoWindow on given index, otherwise it's always referenced to the last loop item. So in click event you should open infoWIndow in a given i
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker[i]);
});
I guess if you click in a different marker then you will have a two open infoWindow. If you want to always keep a one open you can store currentOpen index and close it before open a new one.
In fact the problem was in
marker.info.open(map, marker);
Thet should be
marker.info.open(map, this);
I've got an issue, I can't make the marker clickable for my project. I've tried with google.com but nothing works. Can some one help me ?
var map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
<!--Add markers to map using previously specified locations-->
var marker = new google.maps.Marker({
position: myLatlng,
url:'http://www.google.com',
title: 'Tobermory Distillery',
map: map,
});
Thanks
you can bind onclick to markers like this:
google.maps.event.addListener(marker, 'click', function() {
location.href = 'http://www.google.com';
});
I'm trying to use this tool: http://software.stadtwerk.org/google_maps_colorizr/ to add colour to my google map, here is my example:
http://jsfiddle.net/xUUxn/851/
The colour works fine, but now I can't seem to add any markers to it, I've tried putting this example code in:
map.addMarker({
lat: -12.043333,
lng: -77.028333,
title: 'Lima',
infoWindow: {
content: '<p>HTML Content</p>'
}
});
But it doesn't seem to work, I'm not entirely sure where to put it or even if the references are correct.
In order to create a marker you need to do the following:
Demo forked from your example: http://jsfiddle.net/lucuma/xUUxn/852/
JS:
var marker = new google.maps.Marker({
position: new google.maps.LatLng( -12.043333,-77.028333),
map: map,
title: 'Hello World!'
});
To add an info window overlay:
var contentString = '<div id="content"><h1>Overlay</h1></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
The documentation says:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(0,0),
map: map,
title:"Hello World!"
});
In your Fiddle: http://jsfiddle.net/xUUxn/854/
I was able to use a loop, by this using 'this' as second parameters to to infoWindow.open()
google.maps.event.addListener(marker, 'click', function() {
infowindow = new ....;
infowindow.open(map,this);
});
I'm trying to remove a marker that was initialized like this:
marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
title: 'Marker 1',
icon: redPin
});
google.maps.event.addListener(marker, "click", function() {
showMarkerDialog(marker.position, "marker");
});
google.maps.event.addListener(marker, "dblclick", function() {
// Add a alert: Are you sure you want to remove this marker?
map.removeOverlay(marker);
});
Everything works perfectly except that when I double click it to remove what I get on the Error Console is this:
TypeError: Object # has no method 'removeOverlay'
What am I doing wrong?
There is no removeOverlay function on the map object. Sounds like you've got only one marker, why use an array? Just change this:
google.maps.event.addListener(marker, "dblclick", function() {
map.removeOverlay(marker);
});
to this:
marker.addListener("dblclick", function() {
marker.setMap(null);
});