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

How can I use GMaps API to display a draggable pin that defaults to the user's HTML5 geolocation?

Title says it all, really. I'm trying to use the Google Maps JavaScript API to create a map with a draggable pin that defaults to the user's current geolocation as defined by the HTML5 geolocation API, but the code I'm using won't output anything at all. It's probably something really simple (I'm new to web dev, be kind!), but I can't figure out for the life of me what it is.
This is the code I'm using:
<input type="text" name="ilat" style="display: none;">
<input type="text" name="ilong" style="display: none;">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div style="overflow:hidden;height:500px;width:600px;">
<div id="gmap_canvas" style="height:500px;width:600px;"></div>
<style>
#gmap_canvas img {
max-width: none!important;
background: none!important
}
</style><a class="google-map-code" id="get-map-data" /></div>
<script type="text/javascript">
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
var locmap = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
} else {
var locmap = new google.maps.LatLng(51.50532252465797, -0.14202490290529113);
}
}
function init_map() {
var myOptions = {
zoom: 16,
center: locmap,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
marker = new google.maps.Marker({
draggable: true,
map: map,
position: locmap)
});
infowindow = new google.maps.InfoWindow({
content: "<b>Last known location</b> "
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
google.maps.event.addListener(marker, 'dragend', function(event) {
document.getElementById("ilat").value = this.getPosition().lat();
document.getElementById("ilong").value = this.getPosition().lng();
});
</script>
Would someone enlighten me as to what I'm doing wrong?
Thanks!

Your code is a bit of a mess, I'm afraid! There are a number of syntax errors in it, so you should always check the JavaScript Console (Hamburger->More Tools->JavaScript Console on Chrome) for help in these situations.
After the syntax errors, the main problem is that your variable scope is all wrong. Please consult this tidied-up version, and see the sample Google code here.
var locmap = new google.maps.LatLng(51.50532252465797, -0.14202490290529113);
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(locmap) {
locmap = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
},
function() {});
}
}
function init_map() {
getLocation();
var myOptions = {
zoom: 16,
center: locmap,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
marker = new google.maps.Marker({
draggable: true,
map: map,
position: locmap
});
infowindow = new google.maps.InfoWindow({
content: "<b>Last known location</b> "
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
google.maps.event.addListener(marker, 'dragend', function(event) {
document.getElementById("ilat").value = this.getPosition().lat();
document.getElementById("ilong").value = this.getPosition().lng();
});
}
google.maps.event.addDomListener(window, 'load', init_map);
<input type="text" name="ilat" style="display: none;">
<input type="text" name="ilong" style="display: none;">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div style="overflow:hidden;height:500px;width:600px;">
<div id="gmap_canvas" style="height:500px;width:600px;"></div>
<style>
#gmap_canvas img {
max-width: none!important;
background: none!important
}
</style><a class="google-map-code" id="get-map-data" />
</div>

Rewriting content in Google Map InfoWidow

I have a simple google map with markers and infowindows (like in example at Google Maps API documentation:
<html>
<meta charset="utf-8" />
<style>
.redtext {
color: red;
}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var contentString = '<div id="content">click me<P class="iwtext">Hello world!';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function aclick(){
$(".iwtext").toggleClass("redtext");
}
</script>
<body onload="initialize()">
<div id="map-canvas" style="width: 100%; height: 100%"></div>
</body>
</html>
If you try this, you will see an info window after click on a marker with link (click me) and text - Hello world. If you click on a link, text become red.
But if you close infowindow, clicking on a [X], and then open it again, you will see, that text become black again, the same problem if you click again on a marker.
Is there any ways to solve this problem with rewriting content in a infowindow?

I solve it like like this:
function aclick(){ $(".iwtext").toggleClass("redtext"); contentString = '<div id="content">' + $("#content").html() + "</div>"; infowindow.setContent(contentString); }

what should i do to create custom menu appear when i click the marker instead of deleting it

here is my code i have done upto this point where when i add marker and hover it infowindow appears, but all of them has the same infowindow i need it to be change for each marker, second instead of clicking on the marker it gets deleted i want to creat a custom menu box on the top of marker where there should be options to add info and delete whe i click the marker.
<html>
<head>
<title>example</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
#map_canvas {
width: 100%;
height: 500px;
background-color: #CCC;}
#menu_bar{
width: 100%;
height: 150px;
position:absolute;
bottom:0px;
background-color:#008080;
border-top:1px solid red;}
body{
padding:0px;
margin:0px;}
</style>
<!-- google maps Scripting start -->
<script type="text/javascript">
var markers = [];
function initialize() {
var myLatlng = new google.maps.LatLng(44.5403, -78.5463);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
// add marker to positon
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
// deleting
google.maps.event.addListener(marker, 'click', function(event) {
this.setMap(null);
});
// adding info window to gMaps
var infowindow = new google.maps.InfoWindow({
content: "holdings content area"
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map, this);
});
// assuming you also want to hide the infowindow when user mouses-out
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
markers.push(marker);
}
// Sets the map on all markers in the array.
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<!-- google maps Scripting ends -->
</head>
<body>
<div id="map_canvas"></div>
<div id="menu_bar">
</div>
</body>
</html>

First create a menu or popup or whatever you want in a html copy this html into javascript variable, next create gMap infoWindow and set content to your custom design, in last step bind event to your marker and in that event open your infowindow.
var map = new google.maps.Map(document.getElementById('yourmap'), mapOptions);
var popup= '<div>Design your whatever styled popup you want</div>';
var infowindow = new google.maps.InfoWindow({
content: popup
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'ABC'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});

Google Maps is showing some misbehavior

I'v managed to implement the Google Maps Api which shows multiple marker, but the Maps Div is always showing some misbehavior like in the picture below (shadow is incorrect, there is a wave (?!) under the "vienna" title, and on the left side the control-buttons are missing).
I'm using chrome on mac, has restarted my mac a few times, and it is reproducible on firefox and safari.
My code looks like:
<head>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3&sensor=false"></script>
</head>
<div id="map" style="width:500px;height:500px;"></div>
<script type="text/javascript">
var locations = [
['Vienna',48.2144203,16.383573,1]
['Test',48.53234,16.32367,2]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(48.2144203,16.383573),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>

this problem commonly comes from bootstrap. just add inline style in your gmaps page with max-width:none; and it will be fixed.
<style>
img {max-width: none !important;}
</style>