We Keep Coding

How to change marker postion on Google Map API

I am using google map on my site and here is google map code:
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>
<div style='overflow:hidden;height:440px;width:700px;'>
<div id='gmap_canvas' style='height:440px;width:700px;'></div>
<style>
#gmap_canvas img {
max-width: none!important;
background: none!important
}
</style>
</div>
<script type='text/javascript'>
function init_map() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(51.5073509, -0.12775829999998223),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(51.5073509, -0.12775829999998223)
});
infowindow = new google.maps.InfoWindow({
content: '<strong>Title</strong><br>London, United Kingdom<br>'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
and getting this map output:
Currently, I have a div which highlight in Red color and marker is displaying beside Red area so I want to move to the left side.
Now I want to move marker on left side and don't want to use center position because I am showing contents on red area on below example:
Any idea how to move the marker on the top left side?
Thanks.

You can easly shift the map assigning a new center .. (the new coord are for sample)
var newCenter = new google.maps.LatLng(50.5073509, 0.1200)
map.setCenter(newCenter);

You can change the the marker by javascript function
function changeMarkerPosition(marker) {
var latlng = new google.maps.LatLng(-24.397, 140.644);
marker.setPosition(latlng);
}
For more information See this link

Wrong position of infowindow on small zoom levels. Google maps api v3

On small zoom levels one place will be displayed twice or more (world map is repeated horizontally). When I place marker on map with coordinates (e.g. -32.05604, 115.74718) I will see it on map more than once. It's normal.
But if I try to show infowindow on mouse hover I will get wrong behaviour. Infowindow will be always showed near one of my markers and never near other, without relation what marker was under mouse cursor.
See example here: (try to move mouse to left marker on map).
https://jsfiddle.net/m3wpk1gr/1/
How to show infowindow for marker which under mouse?
My code:
function initialize() {
var myLatLng = new google.maps.LatLng(-32.05604, 115.74718),
myOptions = {
zoom: 1,
center: new google.maps.LatLng(-32.05604, 0)
},
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
marker = new google.maps.Marker({
position: myLatLng,
map: map
});
marker.setMap(map);
var iw = new google.maps.InfoWindow();
marker.addListener('mouseover', function() {
iw.setContent('InfoWindow');
iw.open(map, this);
});
marker.addListener('mouseout', function() {
iw.close();
});
}
initialize();

I'm afraid there is nothing you can do to get the desired result(the position is correct, so when the position exists multiple times on a map, the API has to make a decision).
What you can do: set the optimized-option of the marker to false, then they will not be repeated at lower zoom-levels

google maps api marker zoom

I enter the coordinates of antwerp in my JavaScript code to place a marker on the map , but when I test it in my browser it places a marker in the middle of the map and if I zoom in it becomes more accurate until the marker is at the right place ... what am I doing wrong ??
The marker is not at the right place when zoomed out but it is when I zoom in. thanks in advance!
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(51.2239721,4.413785),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var myLatlng = new google.maps.LatLng(51.2239721,4.413785);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"ap hogeschool"
});
}
google.maps.event.addDomListener(window, 'load', initialize);

You can use google map latlngBounds as the code below will do that. u may need to read this
here
var locBounds = new google.maps.LatLngBounds();
locBounds.extend(LatLng1);
locBounds.extend(latlng2);
map.fitBounds(locBounds);

Gray rectangle appearing in Google Maps when I place a marker

I have a Google Map in my Python/GAE webapp, and when I place the map by itself, without a pin, it displays correctly. However, when I have a marker places on it, a good chunk of the map is wiped out with a gray rectangle.
Here is my JS code:
//Places a Google Map with a pin at the coordinates of the stopimap
function initialize(lat, lng) {
var mapProp = {
center:new google.maps.LatLng(37.761586,-122.4477),
zoom:12,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var point=new google.maps.LatLng(lat,lng)
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
marker = new google.maps.Marker({
position: point,
map: map,
});
}//initialize

google maps API v3 set marker and get point

I have a problem to set marker and get latitude and longitude for that marker. How can I do that in google maps v3 API
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("divGoogleMaps"), myOptions);
google.maps.event.addListener(map, 'click', function() {
});
this is my start code.

You should check Google Maps API doc web-site they have a fex example to help you started.
http://code.google.com/apis/maps/documentation/javascript/basics.html
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
Here you set a marker and get the position.

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
Taken directly from Google Maps API v3
If you want to attach an event listener to the marker, it is advisable to do it right after you add it to the map, while you still have a fresh reference to it (in the case where you're potentially looping through some marker adding code, as is common).