Develop Reference

Adding an Infobox to GoogleMaps?

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

Define html with ng-click in controller Angular

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');
});
});

Adding a marker to GMaps (google maps)

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);
});

Google markers click do function

I got an google maps on my site which are great at the moment, except i would like to call an function for javascript when the marker is clicked. this is the google code for the marker:
var marker = new google.maps.Marker({
position: latingZee,
map: map,
title:"Hello World!",
icon: ZeeImg,
})
And i would to start the next action to be used when the marker is clicked
$('.toggler').live('click',function(){
$(this).parent().children().toggle();
});
Is this possible?

You could try:
google.maps.event.addListener(marker, 'click', function() {
$('.toggler').click();
});
but I'm not sure about mixing jQuery and Google API code in the same place.

Simple marker click like this:
google.maps.event.addListener(marker, 'click', function() {
$('.toggler').parent().children().toggle();
});

Limit Google Maps V3 to 1 marker

I had code that was working for map V2 but have since upgraded to V3 and the constructors are different. I want to limit my map to 1 marker only. Here's the code to add a marker:
myListener = google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
....
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable: true
});
map.setCenter(location);
I need code that will remove myListener once a marker is placed. Thanks for any help you can provide.

try google.maps.event.addListenerOnce() method instead

I used this code and it did the trick:
myListener = google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng), google.maps.event.removeListener(myListener);
});