Develop Reference

Javascript exiting Onclick Function

I would like to exit onclick, I've tried this code here, but I want it to be one click, placing one marker, not one click, infinite markers.
document.getElementById("addWater").onclick = function()
{
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
infoWindow.setPosition(pos);
}
}

Are you talking about mimicking the "once" function in jquery? Maybe you could try this approach
var a = false;
document.getElementById("addWater").onclick = function () {
if (!a) {
google.maps.event.addListener(map, 'click', function (event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
infoWindow.setPosition(pos);
}
a = true;
}
}

Google map is not loaded when open Browser

I have integrate a Google map in my website but map is not load in my website.But when I open inspect element map will work when I close inspect element map will disappear automatically.I don't know why its going like this,Please let me know what the problem. Here is my map code
Thanks in Advance
<div id="mapCanvas" style="width:100%; height:400px"></div>
<input type="text" title="Latitude" id="latt_val">
<input type="text" title="Longitude" id="long_val">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
document.getElementById("latt_val").value = latLng.lat();
document.getElementById("long_val").value = latLng.lng();
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function initialize() {
var latLng = new google.maps.LatLng(15.486432009100538, 73.82759375);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 12,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
updateMarkerAddress('Dragging...');
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerStatus('Dragging...');
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});
google.maps.event.trigger(window,'resize',{});
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>

[UPDATE]
Hey, I'm still really curious what's going on here. Do you happen to have an AdBlocker enabled on your browser that might prevent the map from loading? Have you checked if this works in multiple browsers?
I made a codepen of our problem: http://codepen.io/trevorwhealy/pen/obRQdW.
And your map is working perfectly fine. If, on-load of this pen, you still do not see something, then I think we can safely say this is a browser issue.
[OLD POST]
Try putting your code:
google.maps.event.trigger(window,'resize',{}); // or trigger(map
after
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});
but still within your initialize function.

How do i let the infowindow stay on mouseout of the marker in google maps?

I need the info window to appear on mouseover over the marker.I want to close the info window when the mouse is anywhere except the info window itself. I need this because, i have a hyperlink on the info window and the user should be able to click on the hyperlink. Right now i have the below code:
marker.addListener('mouseover', function() {
infowindow.open(map, marker);
}, false);
marker.addListener('mouseout', function() {
infowindow.close(map, marker);
}, false);
This does not work because the minute i remove the focus from marker the infowindow goes off.
Please let me know.
Thanks

Your problem has three parts:
Setting a timeout for handler of marker's mouseover event so that InfoWindow would not disapear until you move your mouse on it.
Clearing that timeout if mouse comes on the InfoWindow:
var closeInfoWindowWithTimeout;
marker.addListener('mouseout', function() {
closeInfoWindowWithTimeout = setTimeout(() => infowindow.close(map, marker), 1000);
}, false);
infoWindowElement.mouseover(() => clearTimeout(closeMarkerInfoWithTimeout));
Setting mouseleave event on the parent of the parent of the parent of your InfoWindow's content. I Know it's dirty and dependent to how Google Maps implemented InfoWindow, but it's all you can do by now.
Be careful that you should do this after InfoWindow attached to your dom! You can wait for it by listening to domready event of InfoWindow:
infowindow.addListener('domready', () => {
infowindowelement.parent().parent().parent().mouseleave(() => infowindow.close(map, marker));
});
Note that you should use an Element to initialising your InfoWindow's content (Here I used variable infoWindowElement).

It sure isn't perfect, but look at this:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var markers = []; // store the marker objects here
var infoWindow;
var locations = [
[50, 4],
[50.5, 4.5],
[51, 5],
[51.5, 5.5]
]
var contentStrings = [
'Hello',
'World',
'Foo',
'Bar'
];
var mouseIn = false;
function initialize() {
var mapObject = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 8,
center: new google.maps.LatLng(locations[1][0], locations[1][1])
};
map = new google.maps.Map(document.getElementById("googleMap"), mapObject);
// make 1 infowindow. We will use it again and again
infoWindow = new google.maps.InfoWindow({
content: ''
});
loadMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);
function loadMarkers() {
for (var i=0; i<locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
map: map // replaces marker.setMap(map);
});
markers.push(marker); // store the marker in the array
google.maps.event.addListener(marker, 'mouseover', function () {
// first we want to know which marker the client clicked on.
var i=markers.indexOf(this);
// we set the content of infoWindow, then we open it.
infoWindow.setContent('<div onmouseout="mouseOutsideInfowindow()" onmouseover="mouseinsideInfowindow()">' + contentStrings[i] + '</div>')
infoWindow.open(map, markers[i]);
mouseIn = false;
});
}
}
function mouseinsideInfowindow() {
mouseIn = true;
}
function mouseOutsideInfowindow() {
if(mouseIn) {
infoWindow.close();
mouseIn = false;
}
}
</script>
<style>
#googleMap {
height: 400px;
}
</style>
<div id="googleMap"></div>

Determining specific user action that triggers a "bounds_changed" event

I want to be able to keep my map centred and zoomed according to my LatLngBounds when the viewport size changes, but not when a user drags or zooms. I'm using the "bounds_changed" event along with fitBounds() to keep it centred and zoomed properly for viewport changes, but when the map is dragged or zoomed the bounds also change so fitBounds() is essentially preventing these actions too.
function initialize() {
var mapProp = {
center:new google.maps.LatLng(49.8994, -97.1392),
zoom:1,
draggable: true,
zoomControl: true,
scrollwheel: false,
disableDoubleClickZoom: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(49.803060, -97.229094),
new google.maps.LatLng(49.963223, -97.054686)
);
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
google.maps.event.addListener(map, 'bounds_changed', function() {
map.fitBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
According to the docs I should be able to access event properties, so I thought I'd check for something that would indicate what specifically triggered the "bounds_changed" event, but the event is showing as undefined in the console.
google.maps.event.addListener(map, 'bounds_changed', function(event) {
console.log(event)
});
I can access properties for simple "click" event but not "bounds_changed", so I'm not sure if there is even supposed to be properties for "bounds_changed", or if there is a completely different approach to accomplishing what I'm trying to do.

var drag = false;
var zoom = false;
google.maps.event.addListener(map, 'bounds_changed', function() {
if (!drag && !zoom) {
map.fitBounds(bounds);
}
zoom = false;
});
google.maps.event.addListener(map, 'dragstart', function() {
drag = true;
});
google.maps.event.addListener(map, 'dragend', function() {
drag = false;
});
google.maps.event.addListener(map, 'zoom_changed', function() {
zoom = true;
});

Marker icon not show on jquery load

When I load this page into a div (using jQuery.load()), marker icon is not showed. The icon will show after reloaded the page. Is that caused map not initialized when i pass it into placeMarker function? How to solve it.
<script type="text/javascript">
var map;
var markers = new Array();
var marker;
var infoWindow = new google.maps.InfoWindow();
function initialize() {
var myLatlng = new google.maps.LatLng(-6.19605333333333,106.79684);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
fillPositionForm(event.latLng);
});
}
function placeMarker(location) {
if ( marker ) {
marker.setPosition(location);
} else {
marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.DROP,
draggable: true
});
}
google.maps.event.addListener(marker, 'dragend', function(event) {
clearOverlays();
fillPositionForm(event.latLng);
});
}
function fillPositionForm(location){
jQuery("#latitude").val(location.lat());
jQuery("#longitude").val(location.lng());
}
function clearOverlays() {
if (markers) {
for (i in markers) {
markers[i].setMap(null);
}
}
}
jQuery(document).ready(function() {
initialize();
jQuery("#frmAddPoi").validate({
messages: {
latitude: "Please click on map to select poi center position",
longitude: "Please click on map to select poi center position",
},
submitHandler: function(form) {
return postForm(form, "savepoi", "listcustopoi", false, false);
}
});
});
</script>
<div id="map_canvas" class="widgettitle" style="height:240px;"></div>

You are attaching placeMarker to map.click event listener.
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
fillPositionForm(event.latLng);
});
You need to load it after map is called.
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
placeMarker(myLatlng);
See jsFiddle

You should have your function Initialize() called after your load() success. It's better to have your javascript in your main page, not in the page loaded.
Or you can use an iFrame, the easiest way.