I want to disable a marker when it is clicked so that the message is not repeated .
http://code.google.com/apis/maps/documentation/v3/reference.html#Marker
I found this method setClickable in another similar question but it only makes the marker disappear, it doesn't disable it.
<!DOCTYPE html>
<html>
<head>
#map {
height: 50%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="box"></div>
<script>
function initMap() {
var myLatlng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatlng
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Click to zoom'
});
marker.addListener('click', function() {
var box = document.getElementById("box");
var para = document.createElement("p");
var node = document.createTextNode("Paragrap ")
para.appendChild(node);
box.appendChild(para);
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB_nzqNDBfJopGdzH2sNBbgHS-iotxkN_c&callback=initMap">
</script>
</body>
</html>
https://codepen.io/anon/pen/ejLJOg
from the documentation:
Removing Event Listeners
To remove a specific event listener, it must have been assigned to a variable. You can then call removeListener(), passing the variable name to which the listener was assigned.
var listener1 = marker.addListener('click', aFunction);
google.maps.event.removeListener(listener1);
Remove the listener in the eventListener callback function:
var listener = marker.addListener('click', function() {
var box = document.getElementById("box");
var para = document.createElement("p");
var node = document.createTextNode("Paragrap ")
para.appendChild(node);
box.appendChild(para);
google.maps.event.removeListener(listener);
});
code snippet:
#map {
height: 50%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<div id="box"></div>
<script>
function initMap() {
var myLatlng = {
lat: -25.363,
lng: 131.044
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatlng
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Click to zoom'
});
var listener = marker.addListener('click', function() {
var box = document.getElementById("box");
var para = document.createElement("p");
var node = document.createTextNode("Paragrap ")
para.appendChild(node);
box.appendChild(para);
google.maps.event.removeListener(listener);
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
Related
If i want to move the marker and i click "YES" in confirmation alert the marker will move to dragend position but i have problem when i click "NO" in confirmation alert. the marker should move to dragstart position but in current code the marker stay in dragend position not in dragstart position. anyone please help me. thankyou
<!DOCTYPE html>
<html>
<body>
<p><span id="start"></span></p>
<p><span id="end"></span></p>
<div id="map" style="width:100%;height:500px"></div>
<script>
function initMap() {
var theLat = 51.508742;
var theLng = -0.120850;
var displayMap = document.getElementById("map");
var myLatlng = new google.maps.LatLng(theLat, theLng);
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(displayMap, myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function() {
if (confirm("Are You Sure You Want To Move this marker?")) {
var positionStartLatNew = this.position.lat();
var positionStartLngNew = this.position.lng();
document.getElementById('end').innerHTML = "Lat end : " + positionStartLatNew + ", " + "Lng end : " + positionStartLngNew;
} else {
google.maps.event.addListener(marker, 'dragstart', function() {
var positionStartLat = this.position.lat();
var positionStartLng = this.position.lng();
document.getElementById('start').innerHTML = "Lat start : " + positionStartLat + ", " + "Lng start : " + positionStartLng;
});
}
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuDtGMwgHfy9Nb07ARmHlsT-Zen228uK4&callback=initMap"></script>
</body>
</html>
Save the position in an accessible scope on dragstart. Use that position to revert the marker when the confirm dialog is cancelled:
var positionStart, positionStartNew;
google.maps.event.addListener(marker, 'dragstart', function() {
positionStart = this.position;
document.getElementById('start').innerHTML = "start position: " + positionStart.toUrlValue(6);
});
google.maps.event.addListener(marker, 'dragend', function() {
if (confirm("Are You Sure You Want To Move this marker?")) {
positionStartNew = this.position;
document.getElementById('end').innerHTML = "end position: " + positionStartNew.toUrlValue(6);
} else {
marker.setPosition(positionStart);
}
});
proof of concept fiddle
code snippet:
function initMap() {
var theLat = 51.508742;
var theLng = -0.120850;
var displayMap = document.getElementById("map");
var myLatlng = new google.maps.LatLng(theLat, theLng);
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(displayMap, myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable: true
});
var positionStart, positionStartNew;
google.maps.event.addListener(marker, 'dragstart', function() {
positionStart = this.position;
document.getElementById('start').innerHTML = "start position: " + positionStart.toUrlValue(6);
});
google.maps.event.addListener(marker, 'dragend', function() {
if (confirm("Are You Sure You Want To Move this marker?")) {
positionStartNew = this.position;
document.getElementById('end').innerHTML = "end position: " + positionStartNew.toUrlValue(6);
} else {
marker.setPosition(positionStart);
}
});
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-color: white;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="start"></div>
<div id="end"></div>
<div id="map"></div>
Based on my understanding, this is a possible solution:
google.maps.event.addListener(marker, 'dragend', function() {
if (confirm("Are You Sure You Want To Move this marker?")) {
var positionStartLatNew = this.position.lat();
var positionStartLngNew = this.position.lng();
document.getElementById('end').innerHTML = "Lat end : " +
positionStartLatNew + ", " + "Lng end : " + positionStartLngNew;
} else {
marker.setPosition(myLatlng);
}
});
Just change the code inside the else block so that the marker moves back to the original latLng position.
This is a JSBIN example
i use code in this example
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: { lat: 35.687719, lng: 139.702146 }
});
map.addListener('click', function(e) {
window.event = e;
placeMarkerAndPanTo(e.latLng, map);
});
}
function placeMarkerAndPanTo(latLng, map) {
var marker = new google.maps.Marker({
position: latLng,
map: map
});
map.panTo(latLng);
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwqIkJwBb6g4KirOaLnNgE1I6MtWnKxac&callback=initMap&language=ja">
</script>
Now, i want to show only one point in map by lng, lat.
And when i click one new point in map, i want to remove marker for old point in map to ensure only show one point.
Can you help me.
Thanks
var map;
var gmarkers = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: { lat: 35.687719, lng: 139.702146 }
});
map.addListener('click', function(e) {
removeMarkers();
window.event = e;
placeMarkerAndPanTo(e.latLng, map);
});
}
function placeMarkerAndPanTo(latLng, map) {
var marker = new google.maps.Marker({
position: latLng,
map: map
});
map.panTo(latLng);
gmarkers.push(marker);
}
function removeMarkers() {
for (i = 0; i < gmarkers.length; i++) {
gmarkers[i].setMap(null);
}
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwqIkJwBb6g4KirOaLnNgE1I6MtWnKxac&callback=initMap&language=ja">
</script>
We are using Google street view Api Version 3 for our product. We are facing an issue when the street view is loading for the first time. The view is breaking in to pieces/pix, where as when we see the same view in Google maps it is not breaking but the imaginary is showing Blur effect. How we can give the same blur effect in our product also?`
Click this link to see the breaking effect: http://jsfiddle.net/godwinthaya/4wfLkc3t/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Street View service</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var mapOptions = {
center: fenway,
zoom: 14
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//marker
var busMarker = new google.maps.Marker({
position: fenway,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
title: 'Bus Stop'
});
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('map-canvas'), panoramaOptions);
map.setStreetView(fenway);
panorama.setPov(/** #type {google.maps.StreetViewPov} */({
heading: 265,
pitch: 0
}));
google.maps.event.addListener(busMarker, 'click', function() {
alert("Hai");
infowindow.open(map,busMarker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<!--<div id="map-canvas" style="width: 400px; height: 300px"></div> -->
<div id="map-canvas" style="position:absolute; width: 1000px; height: 600px;"></div>
</body>
</html>
Are you calling the events correctly? What you are asking could most likely be a part of the API but there is no documentation or reference as to implement the "blurred effect". Although, if you call all the events correctly, it should give you the default behavior. Here's the sample code for the different events:
var cafe = new google.maps.LatLng(37.869085, -122.254775);
function initialize() {
var panoramaOptions = {
position: cafe,
pov: {
heading: 270,
pitch: 0
},
visible: true
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
google.maps.event.addListener(panorama, 'pano_changed', function() {
var panoCell = document.getElementById('pano_cell');
panoCell.innerHTML = panorama.getPano();
});
google.maps.event.addListener(panorama, 'links_changed', function() {
var linksTable = document.getElementById('links_table');
while (linksTable.hasChildNodes()) {
linksTable.removeChild(linksTable.lastChild);
}
var links = panorama.getLinks();
for (var i in links) {
var row = document.createElement('tr');
linksTable.appendChild(row);
var labelCell = document.createElement('td');
labelCell.innerHTML = '<b>Link: ' + i + '</b>';
var valueCell = document.createElement('td');
valueCell.innerHTML = links[i].description;
linksTable.appendChild(labelCell);
linksTable.appendChild(valueCell);
}
});
google.maps.event.addListener(panorama, 'position_changed', function() {
var positionCell = document.getElementById('position_cell');
positionCell.firstChild.nodeValue = panorama.getPosition() + '';
});
google.maps.event.addListener(panorama, 'pov_changed', function() {
var headingCell = document.getElementById('heading_cell');
var pitchCell = document.getElementById('pitch_cell');
headingCell.firstChild.nodeValue = panorama.getPov().heading + '';
pitchCell.firstChild.nodeValue = panorama.getPov().pitch + '';
});
}
google.maps.event.addDomListener(window, 'load', initialize);
:
I have a problem with Google Maps info windows. I have 2 markers and I want to open both info windows by default. But I can't figure out how to do it.
Here is my code:
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=<key>&sensor=false"></script>
<script type="text/javascript">
var locations = [
['loan 1', 46.166621, 8.853315, '<div style="width:250px">text info 1'],
['loan 2', 46.173000, 8.856315, '<div style="width:250px">text info 2'],
];
function initialize() {
var myOptions = {
center: new google.maps.LatLng(46.166621, 8.853315),
zoom: 15,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("default"), myOptions);
setMarkers(map,locations);
}
function setMarkers(map,locations){
var marker, i
for (i = 0; i < locations.length; i++) {
var loan = locations[i][0]
var lat = locations[i][1]
var long = locations[i][2]
var add = locations[i][3]
latlngset = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
map: map, title: loan , position: latlngset
});
map.setCenter(marker.getPosition())
var content = add
var infowindow = new google.maps.InfoWindow()
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
}
}
</script>
</head>
<body onLoad="initialize()">
<div id="default" style="width:100%; height:100%"></div>
</body>
</html>
I tried adding infowindow.open(map,marker); in various place but stil don't work.
Trigger the click-event for the markers.
Put this at the end of the for-loop:
google.maps.event.trigger(marker,'click',{});
working fiddle
Dear all i am a newbie to Google Maps API. I have a parsed a KML layer in Google Maps API using GeoXML3. Now how do i fetch placement marker value(Name of the place) of KML in Google Maps API onclick. Like when a kml layer gets loaded on google maps and i am clicking on any marker i should be able to fetch the placement value of the marker in an alert box. Please find the code that helps me parse a kml on google maps api. Please guide.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>KML Layer</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript">
function initialize()
{
var chicago = new google.maps.LatLng(75.602836700999987,32.261890444473394);
var myOptions = {
zoom: 2,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//var transitLayer = new google.maps.TransitLayer();
//transitLayer.setMap(map);
var geoXml = new geoXML3.parser({map: map, singleInfoWindow: true});
geoXml.parse('kmload.kml');
var geoXml1 = new geoXML3.parser({map: map, singleInfoWindow: true});
geoXml1.parse('lines.kml');
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
Is this what you are looking for? I have added the alert in the onclick function which displays me the name of the placemark in the alert box. Please check and let me know if you find any issues.
<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>
<title>KML Placement Value Test</title>
<style>
html, body, #map_canvas {
height: 100%;
margin: 0;
padding: 0;
}
#panel {
top: 5px;
left: 85%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
.infowindow * {font-size: 90%; margin: 0}
</style>
<script type="text/javascript" >
geocoder = new google.maps.Geocoder();
var geoXml = null;
var geoXmlDoc = null;
var map = null;
var myLatLng = null;
var myGeoXml3Zoom = true;
var marker = [];
var polyline;
function initialize()
{
myLatLng = new google.maps.LatLng(37.422104808,-122.0838851);
var test;
var lat = 37.422104808;
var lng = -122.0838851;
var zoom = 18;
var maptype = google.maps.MapTypeId.ROADMAP;
if (!isNaN(lat) && !isNaN(lng))
{
myLatLng = new google.maps.LatLng(lat, lng);
}
var myOptions = {zoom: zoom,center: myLatLng,mapTypeId: maptype};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
infowindow = new google.maps.InfoWindow({});
geoXml = new geoXML3.parser({map: map,infoWindow: infowindow,singleInfoWindow: true,zoom: myGeoXml3Zoom, markerOptions: {optimized: false},createMarker: createMarker});
geoXml.parse('test.kml');
};
var createMarker = function (placemark, doc) {
var markerOptions = geoXML3.combineOptions(geoXml.options.markerOptions, {
map: geoXml.options.map,
position: new google.maps.LatLng(placemark.Point.coordinates[0].lat, placemark.Point.coordinates[0].lng),
title: placemark.name,
zIndex: Math.round(placemark.Point.coordinates[0].lat * -100000)<<5,
icon: placemark.style.icon,
shadow: placemark.style.shadow
});
// Create the marker on the map
var marker = new google.maps.Marker(markerOptions);
if (!!doc) {
doc.markers.push(marker);
}
// Set up and create the infowindow if it is not suppressed
if (!geoXml.options.suppressInfoWindows) {
var infoWindowOptions = geoXML3.combineOptions(geoXml.options.infoWindowOptions, {
content: '<div class="geoxml3_infowindow"><h3>' + placemark.name +
'</h3><div>' + placemark.description + '</div></div>',
pixelOffset: new google.maps.Size(0, 2)
});
if (geoXml.options.infoWindow) {
marker.infoWindow = geoXml.options.infoWindow;
} else {
marker.infoWindow = new google.maps.InfoWindow(infoWindowOptions);
}
marker.infoWindowOptions = infoWindowOptions;
// Infowindow-opening event handler
google.maps.event.addListener(marker, 'click', function()
{
alert(placemark.name);
this.infoWindow.close();
marker.infoWindow.setOptions(this.infoWindowOptions);
this.infoWindow.open(this.map, this);
});
}
placemark.marker = marker;
return marker;
};
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="float: left; width: 70%; height: 100%;"></div>
</body>
</html>
If you use the "afterParse" function to add click listeners to the markers, you can access the data (if you use function closure), example accessing the name:
// assign "useTheData" as the after parse function
var geoXml = new geoXML3.parser({map: map, singleInfoWindow: true, afterParse: useTheData});
geoXml.parse('kmload.kml');
// function to retain closure on the placemark and associated text
function bindPlacemark(placemark, text) {
google.maps.event.addListener(placemark,"click", function() {alert(text)});
}
// "afterParse" function, adds click listener to each placemark to "alert" the name
function useTheData(doc) {
for (var i = 0; i < doc[0].placemarks.length; i++) {
var placemark = doc[0].placemarks[i].polygon || doc[0].placemarks[i].marker || doc[0].placemarks[i].polyline;
bindPlacemark(placemark, doc[0].placemarks[i].name);
}
};
working example
hope it can help ;)
/**
* map
*/
var myLatlng = new google.maps.LatLng(39.980278, 4.049835);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
var map = new google.maps.Map(document.getElementById('mapa'), myOptions);
var infoWindow = new google.maps.InfoWindow();
var markerBounds = new google.maps.LatLngBounds();
var markerArray = [];
function makeMarker(options){
var pushPin = new google.maps.Marker({map:map});
pushPin.setOptions(options);
google.maps.event.addListener(pushPin, 'click', function(){
infoWindow.setOptions(options);
infoWindow.open(map, pushPin);
});
markerArray.push(pushPin);
return pushPin;
}
google.maps.event.addListener(map, 'click', function(){
infoWindow.close();
});
function openMarker(i){
google.maps.event.trigger(markerArray[i],'click');
};
/**
*markers
*/
makeMarker({
position: new google.maps.LatLng(39.943962, 3.891220),
title: 'Title',
content: '<div><h1>Lorem ipsum</h1>Lorem ipsum dolor sit amet<div>'
});
openMarker(0);