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

Display Marker on Custom Google Map

I am using JQuery mobile, HTML5 to develop a real time vehicle tracking application. I would like to know how to place a marker at the current location on a 'custom' map. I am using the getLocation function to get the current coordinates.
var mapOptions={
zoom:15
mapTypeControl: true;
navigationControlOptions:{style:google.maps.navigationControl.Style.Small}mapTypeID.ROADMAP};
map=google.maps.Map(document.getElementByID("map_container"),mapOptions);
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "You Are Here!"
});
}
the google.maps.Map function loads a 'new' map. I would like to display the marker on a custom map.

you need to load the coords into a LatLng object before passing it to the marker.
eg
var myLatlng = new google.maps.LatLng(coords[0], coords[1]);
here coords[0] and coords[1] are float type latitudes and longitudes values.
after this pass the variable myLatlng inplace of coords in the marker.

This is some code i used in a project:
function CurrentPosition(){
getPosition(function(mylat, mylng){
drawPosition(mylat, mylng);
});
}
function getPosition(callback) {
navigator.geolocation.getCurrentPosition(function(position){
callback(position.coords.latitude, position.coords.longitude);
}, function(){
alert(texte['myPositionErrorAlert']);
},{enableHighAccuracy: false, timeout: 20000, maximumAge: 0});
}
function drawPosition(mylat, mylng){
LatLng = new google.maps.LatLng(mylat, mylng);
yourMarker = new google.maps.Marker({
position: LatLng,
map: map,
title:"MyPosition"
});
yourMarker.setMap(map);
}
Force the CurrentPosition funcition, the getPosition() will locate your position and the drawPosition() will create the marker.

Dropping marker with google maps api and javascript

Hi so I'm working a google maps element into an app I'm writing and am having trouble dropping a pin on the user's current location.
I can get the map to load a fusion table layer of pins, and center on the user's current location, but I'd like to be able to then drop a marker at the user's current location, and resize the map to fit all the markers. Is this possible? If not I can just set the zoom to an appropriate level.
This is the code I'm working with:
var geocoder = new google.maps.Geocoder();
function initialize() {
map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
center: new google.maps.LatLng([app:user-lat], [app:user-lon]),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col2, col0",
from: "1pbba_dFcpWQKQDXQUt9RNXp16GqX5Jz-NraafEI",
where: ""
},
options: {
styleId: 3,
templateId: 3
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I should also say that the [app:user-lat] and [app:user-lon] calls are application specific, taking data from the mobile device, and will work to insert the current user's location. This is the reason I'm not doing a call for the current position through google maps api, thanks in advance for anyone taking the time to help.

To place a marker at the user's position, add this after you define your map:
var marker = new google.maps.Marker({
position: new google.maps.LatLng([app:user-lat], [app:user-lon]),
map: map
});
If you want to move it as the user moves, that will be a little more complicated, keep a reference to it and use marker.setPosition.
function initialize() {
map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
center: new google.maps.LatLng([app:user-lat], [app:user-lon]),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng([app:user-lat], [app:user-lon]),
map: map
});
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col2, col0",
from: "1pbba_dFcpWQKQDXQUt9RNXp16GqX5Jz-NraafEI",
where: ""
},
options: {
styleId: 3,
templateId: 3
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
To center the map on the markers (or zoom the map to show them all, you will need to query the FusionTable for all the markers, construct a google.maps.LatLngBounds object from their locations, then use that as an argument to map.fitBounds.
Here are a couple of examples that do that (but with a different column layout (two column location) than your table. The concept can be adjusted for your column layout (query for the single column location, parse it to create a google.maps.LatLng and add it to the google.maps.LatLngBounds):
http://www.geocodezip.com/v3_FusionTablesLayer_centerOnMarkers.html
http://www.geocodezip.com/www_vciregionmap_comC.html
example that zooms and centers the map on the data in your table. Notes:
The GViz API that is used is limited to 500 rows, if you have more data that that you probably don't want to do this anyway.
The maps is centered on the data not the user.

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