Develop Reference

Off-setting a Google Map Icon using JavaScript API

I have a Google Map on my website and I am also using a Custom marker to mark the location of the business. I want to bring the icon about 100px to the left as it's currently center of the map... How can I do this?
My code:
function initMap() {
var LatLng = {
lat: REMOVED, lng: REMOVED
};
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 15,
center: LatLng
});
var image = 'REMOVED';
var customMarker = new google.maps.Marker({
position: LatLng,
map: map,
icon: image
});
}

You've almost done. The problem is that you are centering the map in the same position than your marker.
So, set another LatLang for your marker or center the map in another position.
var markerLatLang={lat: WHATEVER, lng: WHATEVER}
var customMarker = new google.maps.Marker({
position: markerLatLang,
map: map,
icon: image
});
Checkout this for further information.

Google maps Marker dissapear after zoom in function

Hi Im working with HTML5 and I have a simple js function where i set the center of my map and the zoom:
function goToMaxZoom(){
var map=new google.maps.Map(document.getElementById("map"));
map.setCenter(new google.maps.LatLng(12.32323, -3.683639) );
map.setZoom(16);}
everything is going good except for the map markers, they are not displayed
i tryed also to add:
marker.setMap(map);
to make a new one but it doesnt work, even if i add the whole marker build:
var map=new google.maps.Map(document.getElementById("map"),mapProp);
var marker=new google.maps.Marker({
position:(12.32323, -3.683639),
});
So i think im missing something.
Thanks in advance

You will need to create an object of LatLng before adding it to the marker as shown below
var myLatLng = new google.maps.LatLng(12.32323, -3.683639)
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
You can also create the LatLng object using the following constructor
var myLatLng = new google.maps.LatLng({lat: 12.32323, lng: -3.683639});
OR
var myLatLng = {lat: 12.32323, lng: -3.683639};
All three are valid ways to create a LatLng object

google maps marker is not defined

This is my code
var map_canvas = document.getElementById('map_canvas');
var map_options = { center: new google.maps.LatLng(44.5403, -78.5463), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }
map = new google.maps.Map(map_canvas, map_options);
google.maps.event.addListener(map, 'click', function(event) {
if(marker){
marker.setMap(null);
}
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
$("#latitude").val(event.latLng.lat());
$("#longitude").val(event.latLng.lng());
map.setCenter(event.latlng);
});
console.log($("#longitude").val());
if (($("#latitude").val()) && ($("#longitude").val())){
var point = new google.maps.LatLng(($("#latitude").val()), ($("#longitude").val()));
marker = new google.maps.marker({
position: point,
map: map
});
map.setCenter(point, 8);
}
please notice that I have added a listener for on click on the map to add the marker, and it is working. I mean when I click on the map, the marker appears.
However, when I submit the page, and if there is an error in the inputs, I return the page back to the user. In that case, if the use has added a map, I wanted to create the map for him. that is why I used this code:
console.log($("#longitude").val());
if (($("#latitude").val()) && ($("#longitude").val())){
var point = new google.maps.LatLng(($("#latitude").val()), ($("#longitude").val()));
marker = new google.maps.marker({
position: point,
map: map
});
map.setCenter(point, 8);
however, i got exception Uncaught TypeError: undefined is not a function in the line marker = new google.maps.marker({ could you help please?

Make sure you use the right capitalization for Google Maps API function names, google.maps.marker should be google.maps.Marker.

Adding basic marker to google maps api v3

I am trying to add a marker to my customised google map API v3. The map is displaying fine but i can't seem to add a marker. This seems to be a basic thing to do, but i keep getting stuck. I've tried following the instructions at https://developers.google.com/maps/documentation/javascript/overlays#AddingOverlays
However, my knowledge of javascript and API's in general is quite limited, so I feel must be missing something basic here. So basic that the Google instructions probably doesn't cover it. A missing colon, bracket. Maybe the variables are in the wrong sequence? Any input much appreciated! Here's the code below:
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(51.60505, -0.18989);
var mapOptions = {
center: myLatlng,
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
//the code for the marker, as copy pasted from google
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
var styles = [
{featureType: "landscape",
stylers: [
{ color: "#378fb5" }
]
},{
ETC
ETC
ETC
}
];
map.setOptions({styles: styles});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

You have to precise the map you want to use for the marker like this :
var marker = new google.maps.Marker({
map: map,
position: myLatlng,
title:"Hello World!"
});
Have a nice day !

You need to call
marker.setMap(map)
After you've created it, i.e
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(51.60505, -0.18989);
var mapOptions = {
center: myLatlng,
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
//the code for the marker, as copy pasted from google
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
// Add the marker to the map
marker.setMap(map);
var styles = [
{featureType: "landscape",
stylers: [
{ color: "#378fb5" }
]
},{
ETC
ETC
ETC
}
];
map.setOptions({styles: styles});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

If you want to drag and drop the marker to your desired location, set draggable = true.
var marker = new google.maps.Marker({
map: map,
draggable:true
});

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