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.
Related
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;
}
}
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.
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>
I have found that dragend event in Google Map also trigger the click event in IE. It is OK in Firefox and Chrome. Open IE/FF/Chrome console and see the result of this fiddle. Any workaround will be appreciated.
http://jsfiddle.net/ABqMH/8/
Bug Submitted at here.
here is a quick workaround
var map;
var elevator;
var dragged = false;
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(46.87916, -3.32910),
mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map')[0], myOptions);
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(46.87916, -3.32910),
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function () {
console.log('dragend');
dragged = true;
setTimeout(function(){ dragged = false; }, 200);
});
google.maps.event.addListener(map, 'click', function (evt) {
if (dragged) return;
console.log('click')
});
Im currently doing this to create markers for my google map.
function createMarker(posn, title, html) {
var marker = new google.maps.Marker({ position: posn, title: title, draggable: false });
marker['infowindow'] = new google.maps.InfoWindow({ content: html });
infoWindows.push(marker['infowindow']);
google.maps.event.addListener(marker, "click", function () {
for (i = 0; i < infoWindows.length; i++) {
infoWindows[i].close();
}
this['infowindow'].open(map, this);
});
return marker;
}
im not happy with the for loop, for closing the markers, i know something similar to this can be done by using one refernce:
if (infowindow) infowindow.close();
the reason I am using code like above is because i am doing something like
markers[myPoint]['infowindow'].open(map, markers[myPoint]); else where, (myPoint is a number).
how can i avoid this for loop to close open infowindows and do it the nice way?
Just store last opened infoWindow in a global variable:
var activeInfoWindow;
function createMarker(posn, title, html) {
var marker = new google.maps.Marker({ position: posn, title: title, draggable: false });
marker['infowindow'] = new google.maps.InfoWindow({ content: html });
infoWindows.push(marker['infowindow']);
google.maps.event.addListener(marker, "click", function () {
if ( activeInfoWindow == this['infowindow'] ) {
return;
}
if ( activeInfoWindow ) {
activeInfoWindow.close();
}
this['infowindow'].open(map, this);
activeInfoWindow = this['infowindow'];
});
return marker;
}
Another way of doing it is only having one InfoWindow and on the marker click event you call the setContent property of the InfoWindow and then the open event with the map and the marker as parameters.
I have found this method better in my application where I have 10,000+ markers on the map.
see: http://code.google.com/apis/maps/documentation/javascript/reference.html#InfoWindow
infoWindow = new google.maps.InfoWindow();
function createMarker(posn, title, html) {
var marker = new google.maps.Marker({ position: posn, title: title, draggable: false });
marker['content'] = html;
google.maps.event.addListener(marker, "click", function () {
infoWindow.setContent(this['content']);
infoWindow.open(map, this);
});
return marker;
}