Develop Reference

Google marker disappearing when use setPosition to change position

I have a simple google maps , and I am creating a simple map with a marker with the below code:
var mapElement = document.getElementById('hr-map');
// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
// Let's also add a marker while we're at it
var marker = new google.maps.Marker({
position: new google.maps.LatLng(25.098353, 55.156124),
map: map,
title: 'HR',
scrollwheel: false,
icon: 'images/res/map-marker.png'
});
Now all I wanted to do is move the marker from the center of the map to somewhere below the center, I googled and check the below two links, one is a SO question and the fiddle demonstrating changing the marker position.
FIDDLE HERE
SO THREAD
Now I used the same line of code used in the fiddle and also in the SO thread and wrote the below line of code:
marker.setPosition(google.maps.LatLng(25.098353, 55.156124));
But adding the above line of code actually makes the entire marker disappear. So now my code looks line below:
var mapElement = document.getElementById('dynamic-hr-map');
// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
// Let's also add a marker while we're at it
var marker = new google.maps.Marker({
position: new google.maps.LatLng(25.098353, 55.156124),
map: map,
title: 'Dynamic HR',
scrollwheel: false,
icon: 'images/res/map-marker.png'
});
marker.setPosition(google.maps.LatLng(25.098353, 55.156124));
So well why is my marker disappearing in the first place ? Is there any solution to this ?

You are missing the new keyword. You need to create a new instance of LatLng object before using it.
marker.setPosition(new google.maps.LatLng(25.098353, 55.156124));

Different marker for each location in Google Maps JavaScript API v3

Noob here, trying to do something simple-yet-complicated. On this page I have succeeded in placing a red 52 of a certain size where I want it. I have done this by making my own changes to a no doubt familiar-looking code sample from the Google Developers site:
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(-38.153470, 145.141425)
}
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var image = 'http://pollbludger.0catch.com/numbers/alp-52-07.png';
var myLatLng = new google.maps.LatLng(-38.148594, 145.126124);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
What I want to do now is add nine other markers at different points on the map, each different in some way from all the others. Like my red 52, each marker I propose to use has its own PNG stored at pollbludger.0catch.com. Can I just do this by coding each marker sequentially, rather than have it go through a loop?

You need use the property "icon" with "url" property and change the new coordinates in "position". use icons with the size of 32x32.
If you do not know how to get the positions use this example and copy the values lat,lng
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon : {
url: 'img/yourimageurl.png',//full path of your image
scaledSize: new google.maps.Size(30,40)//this control the size of your icon
}
});

How to manually reload Google Map with JavaScript

I am using this piece of code within a Bootstrap template. I am facing issues when loading images within a Bootstrap Tab content pane.
This is the JavaScript code which I use to initialize the Map:
var latlng = new google.maps.LatLng(50, 50);
var myOptions = {
zoom: _zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Google Office!'
});
I have not found any method(s) on the internet to manually reload a Google Map instance.
Is this possible and how? Thanks!

Yes, you can 'refresh' a Google Map like this:
google.maps.event.trigger(map, 'resize');
This basically sends a signal to your map to redraw it.

You can refresh with this:
map.panBy(0, 0);

map.setZoom(map.getZoom());
For some reasons, resize trigger did not work for me, and this one worked.

Changing Google Maps V3 Maker Icon the correct way?

The code in example 1 works. I would like to understand the marker.setIcon(); function more (new to JavaScript also).
My question is. In the documentation for Google maps you see something like this for changing the marker.
MarkerImage(url:string, size?:Size, origin?:Point, anchor?:Point, scaledSize?:Size)
How does this relate to what I have done in example 1 for setting up marker Icon, shoud I have done somethign like this instead?
marker = google.maps.MarkerImage({
url: "newIcon.png"
});
marker.setIcon(marker);
and would that have worked?
here is my example
Example 1
function initialize(){
//MAP
var latlng = new google.maps.LatLng('xxx','xxx');
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("map_canvas"), options);
//GEOCODER
geocoder = new google.maps.Geocoder();
marker = new google.maps.Marker({
map: map,
draggable: true
});
marker.setPosition(latlng);
marker.setIcon("newIcon.png");
map.setCenter(latlng);
}

You're giving a V2 answer for a V3 question.
There is no GIcon in V3.
var image = new google.maps.MarkerImage("newIcon.png");
Can be used inside your marker as the icon.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
icon:image
});

Why clustering does not work? (google maps API V3)

I just started using the version 3 of the google maps api, and i am making a simple implementation of clustering, but i cant make it work. Maybe you can see where is my error, and help me making it work:
var map;
function runmap() {
//Prepare cordinates
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
//Prepare other options
var myOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
//,disableDefaultUI: true//Uncoment to disable map controls
};
//Prepare map using de destination id(in the html page) and the options
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
//Adding markers(Search marker options for more options)
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Zdravo",
icon:"djole.png"//Change the icon of the marker
});
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(-34.597, 150.744),
map: map,
title:"Zdravo",
icon:"djole.png"//Change the icon of the marker
});
var marker3 = new google.maps.Marker({
position: new google.maps.LatLng(-34.290, 150.444),
map: map,
title:"Zdravo",
icon:"djole.png"//Change the icon of the marker
});
var markers = [];
markers.push(marker);
markers.push(marker2);
markers.push(marker3);
var markerCluster = new MarkerClusterer(map, markers);
}
Update
This is the error i see:

You need the MarkerClusterer or MarkerClustererPlus for Google API version 3. It looks like you are using MarkerClusterer for Google Maps API version 2.

First, I assume you have loaded all the needed libraries (included the one for the clustering) and you get no JS errors. If that is not so and you have doubts, please report all the errors you get and libraries you load.
Try to supply maxZoom level:
var markerCluster = new MarkerClusterer(map, markers, { maxZoom: 10 });
Then when you see the map, zoom out and check if it would group the markers.