Develop Reference

How to show initial marker in Google Maps?

As per my question, I want to add an initial marker for the map, but it only shows me the marker when I enter address on load. If I want to show a marker like for longitude 41.008238 and latitude 28.978359, how can I make this possible? And sorry for my bad English.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
function initialize() {
center: new google.maps.LatLng(41.008238, 28.978359),
zoom: 13
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
autocomplete = new google.maps.places.Autocomplete((document.getElementById('autocomplete')), {types: ['geocode']});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
var newPos = new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng());
map.setOptions({
center: newPos,
zoom: 15
});
var marker = new google.maps.Marker({
position: newPos,
map: map,
title:"market title"
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas">Loading map...</div>
<style>
#map {
/* float:right;*/
width: 100%;
height: 400px;
border: 1px solid #DDD;
}
#map-canvas {
width: 100%;
height: 350px;
}
</style>

add the following
var marker = new google.maps.Marker({
position: new google.maps.LatLng(41.008238, 28.978359),
map: map,
title: 'market title'
});
below
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var mapOptions = {
center: { lat: latitude, lng: longitude},
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.addListenerOnce(map, 'idle', function(){
//lat0 = map.getBounds().getNorthEast().lat();
//lng0 = map.getBounds().getNorthEast().lng();
//lat1 = map.getBounds().getSouthWest().lat();
//lng1 = map.getBounds().getSouthWest().lng();
get_markers();
});
function get_markers(){
marker = new google.maps.Marker({
position: new google.maps.LatLng(latit, longit,
map: map
});
}

Geolocation Change Marker Position

I use geolocation and I can view map my coordinates. Then, marker put the coordinate.
I want to change marker position.
My code here:
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
lat=position.coords.latitude;
lon=position.coords.longitude;
latlon=new google.maps.LatLng(lat, lon)
mapholder=document.getElementById('mapholder')
mapholder.style.height='250px';
mapholder.style.width='100%';
var myOptions={
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
};
var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
This code get my location coordinates. How can i change marker position?

I am sorry Eren about the my previous answer.I misunderstood.I think , this is correct one what you needed.
Display latitude and longitude on marker movement
Refer this site

I found a solution in this page. My problem is solved with this.
refer this
and this site
var map;
var myCenter = new google.maps.LatLng(37, 35);
var markersArray = [];
function clearOverlays() {
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
function initialize() {
var mapProp = {
center: myCenter,
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
google.maps.event.addListener(map, 'click', function (event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
clearOverlays();
var marker = new google.maps.Marker({
position: location,
map: map,
});
markersArray.push(marker);
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', initialize);

moveBus() is getting called before initialize(). Try putting that line at the end of your initialize() function. Also Lat/Lon 0,0 is off the map (it's coordinates, not pixels), so you can't see it when it moves. Try 54,54. If you want the center of the map to move to the new location, use panTo().
Demo: http: //jsfiddle.net/ThinkingStiff/Rsp22/
HTML:
<script src = "http://maps.googleapis.com/maps/api/js?sensor=false" > </script> <div id = "map-canvas"> </div>
CSS:
#map-canvas {
height: 400 px;
width: 500 px;
}
Script:
function initialize() {
var myLatLng = new google.maps.LatLng(50, 50),
myOptions = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
marker = new google.maps.Marker({
position: myLatLng,
map: map
});
marker.setMap(map);
moveBus(map, marker);
}
function moveBus(map, marker) {
marker.setPosition(new google.maps.LatLng(0, 0));
map.panTo(new google.maps.LatLng(0, 0));
};
initialize();

google map not rendering under .collapse bootstrap

I have looked every where and am starting to go crazy. I know I am close, but can't get it.
I have my html:
<div id="glasgow-map" class="collapse">
<div class="map">
<div id="map-canvas" style="width:100%; height:350px;"></div>
</div>
</div><!--end collapse-->
my JS is:
function initialize() {
var myLatlng = new google.maps.LatLng(55.860949,-4.244938);
var mapOptions = {
zoom: 16,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Taylor Hopkinson Associates'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$('#glasgow-map').on('shown.bs.collapse', function () {
google.maps.event.trigger(map, "resize");
map.setCenter(center);
})
From all the other info I have seen I know I need the (map, "resize) but I am getting this error in the console:
Uncaught ReferenceError: map is not defined
Any help would be fantastic. It's been a long day!!

Thanks for your Help #kamlesh, I think you are right, but this is the way I finally managed to get it to work, and also for multiple maps - if anyone needs help with that, it's below.
I stripped the google.maps.event.addDomListener(window, 'load', initialize); and added the initialize to the .collapse button for when it is clicked. This way there is no need for the resize.
function initialize() {
var myLatlng = new google.maps.LatLng(55.860949,-4.244938);
var myLatlng2 = new google.maps.LatLng(51.510142,-0.143314);
var myLatlng3 = new google.maps.LatLng(51.4004236,0.0172711);
var mapOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapOptions2 = {
zoom: 16,
center: myLatlng2,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapOptions3 = {
zoom: 16,
center: myLatlng3,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas1'), mapOptions);
var map2 = new google.maps.Map(document.getElementById('map-canvas2'), mapOptions2);
var map3 = new google.maps.Map(document.getElementById('map-canvas3'), mapOptions3);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Taylor Hopkinson Associates'
});
var marker2 = new google.maps.Marker({
position: myLatlng2,
map: map2,
title: 'Taylor Hopkinson Associates'
});
var marker3 = new google.maps.Marker({
position: myLatlng3,
map: map3,
title: 'Taylor Hopkinson Associates'
});
}
$('#glasgow-map').on('shown.bs.collapse', function (e) {
initialize();
})
$('#london-map').on('shown.bs.collapse', function (e) {
initialize();
})
$('#bromley-map').on('shown.bs.collapse', function (e) {
initialize();
})
Perhaps there is a way of streamlining this code, but it certainly works for me.

How to make a function to hide and show infobubble markers

I need a checkbox to get a function to hide and show a marker or an group of markers
for some reason idk (i'm new to google maps api) the function doesnt work with infobubbles, when i tried with infowindow it works.. any help ? thanks
var map;
function init() {
var mapCenter = new google.maps.LatLng(-22.967956,-43.197397);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: mapCenter,
streetViewControl: true,
mapTypeControl: true,
mapLabels:true,
mapTypeId: google.maps.MapTypeId.HYBRID
});
var myLatLng = new google.maps.LatLng(-22.973878,-43.192564);
var myLatLng1 = new google.maps.LatLng(-22.968373,-43.183176);
var marker = new google.maps.Marker({
map: map,
position: myLatLng,
title: 'marker'
});
var marker1 = new google.maps.Marker({
map: map,
position: myLatLng1,
title: 'marker1'
});
infoBubble = new InfoBubble({
maxWidth: 246,
maxHeight: 350
});
infoBubble.addTab('home', contenthome);
infoBubble.addTab('Info', content);
infoBubble.addTab('Fase', contentString);
google.maps.event.addListener(marker, 'click', infobut);
function infobut(event) {
if (!infoBubble.isOpen()) {
infoBubble.open(map, marker); }
}
infoBubble1 = new InfoBubble({
maxWidth: 246,
maxHeight: 350
});
infoBubble1.addTab('home', contenthome);
infoBubble1.addTab('Info', content);
infoBubble1.addTab('Fase', contentString);
google.maps.event.addListener(marker1, 'click', infobut1);
function infobut1(event) {
if (!infoBubble1.isOpen()) {
infoBubble1.open(map, marker1); }
}
function hidemarker() {
marker1.setVisible(false);
}
and the button
<input type="checkbox" onClick="hidemarker()" name="1qts" value="1 Quartos" class="botao2">

From your code it is not clear where init() function finishes. I put close } just before hidemarker() function. Problem is that variable marker1 is not visible and it should be made global like variable map.
And to close also info bubble, just call method close():
var map;
var marker1;
function init() {
...
marker1 = new google.maps.Marker({
map: map,
position: myLatLng1,
title: 'marker1'
});
...
}
function hidemarker() {
infoBubble1.close();
marker1.setVisible(false);
}
google.maps.event.addDomListener(window, 'load', init);

show a marker on a Google maps map

I build this script that initializes a map for a specific point:
Note: (x, y) are latitude-longitude coordinates.
<script type="text/javascript">
var businessMap;
function showBusinessMap(x, y) {
var xops =
{
zoom: 15,
center: new google.maps.LatLng(x, y)
}
var chosenPoint = new google.maps.Marker({
position: new google.maps.LatLng(x, y),
});
businessMap = new google.maps.Map(document.getElementById("businessMap"), xops);
chosenPoint.setMap(businessMap);
chosenPoint.setVisible(true);
}
</script>
It works good , but no marker is shown on the map.
I also have this jQuery function that resizes the map:
$('#showMap').on('shown', function() {
google.maps.event.trigger(businessMap, "resize");
});
How can I make the marker chosenPoint to be shown?
If I missed any info, please let me know and I'll add it.
Thanks in advance!
Edit:
var businessMap;
function showBusinessMap(x, y) {
var xops =
{
zoom: 15,
center: new google.maps.LatLng(x, y)
}
businessMap = new google.maps.Map(document.getElementById("businessMap"), xops);
var chosenPoint = new google.maps.Marker({
position: new google.maps.LatLng(x, y),
map: businessMap
});
}
Still doesn't work.

var address = "Address, City, ProvinceOrState, Country";
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//console.log("GeocoderStatus.OK : " + results[0].geometry.location);
var mapOptions = {
zoom: 8,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//load the map
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} //if
else { console.log("Geocode was not successful for the following reason: " + status); }
})
The following section is the part that adds the "Marker"
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});

Edit:
You need to add your created chosenPoint to the map.
From the Google Maps API,
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);
// To add the marker to the map, use the 'map' property
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
So, in your case, create the map object first, then the marker object second, and include map: businessMap in the options for the marker, much like the example above.
Look here for more information.

As a starting point, here's a simple example base on your code that works. I imagine your problem is caused by something outside of what you're showing us.
<script type="text/javascript">
var businessMap;
function showBusinessMap(x, y) {
var xops = {
zoom: 15,
center: new google.maps.LatLng(x, y)
};
var businessMap = new google.maps.Map(document.getElementById("businessMap"),
xops);
var chosenPoint = new google.maps.Marker({
position: new google.maps.LatLng(x, y),
map: businessMap
});
}
function initialize() {
showBusinessMap(-34.397, 150.644);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>