I have tried to implement the last code at
https://developers.google.com/maps/articles/phpsqlinfo_v3
I want to have a cancel and close button.
So, i modified the code and uploaded it to
http://adsany.com/testclose.htm
(view source)
when i click on the map, a marker appears,
when I click on the marker, infowindow appears.
when I click on the cancel and close button, it closes the window, but a new marker appears.
So, i want to close the infowindow without creating a new marker.
Please suggest.
Thanks.
I hope this link will solve your Problem :-
http://gmaps-samples-v3.googlecode.com/svn/trunk/single-infowindow/single-infowindow.html.
<html>
<head>
<title>Single Info Windows</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(37.789879, -122.390442),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow;
var onMarkerClick = function() {
var marker = this;
var latLng = marker.getPosition();
infoWindow.setContent('<h3>Marker position is:</h3>' +
latLng.lat() + ', ' + latLng.lng());
infoWindow.open(map, marker);
};
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(37.789879, -122.390442)
});
var marker2 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(37.787814,-122.40764)
});
var marker3 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(37.767568,-122.391665)
});
google.maps.event.addListener(marker1, 'click', onMarkerClick);
google.maps.event.addListener(marker2, 'click', onMarkerClick);
google.maps.event.addListener(marker3, 'click', onMarkerClick);
});
</script>
<style type="text/css">
body {
font-family: sans-serif;
}
#map {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<h2>Demonstrates how to share a single info window on a map.</h2>
<ol>
<li>Click a marker to open a single info window containing the marker's position.</li>
<li>Close the opened info window by clicking anywhere on the map.</li>
</ol>
<div id="map"></div>
</body>
</html>
Related
Im triying to create a map with a marker from a position taken from a database. I succeed creating the map using this tutorial. The problem is that i have to enter manually the center position when i create the map.
¿Is there a way to center the map using the marker?. The code that im using is the following:
<!DOCTYPE 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>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("loadposition.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("Latitud")),
parseFloat(markers[i].getAttribute("Longitud")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
Also my XML generated file looks like this:
<markers>
<marker Latitud="-33.449148" Longitud="-70.552886"/>
</markers>
Thanks a lot!
I used this in an app after adding the marker. Might help you.
bounds = new google.maps.LatLngBounds();
bounds.extend(marker.position);
if (!bounds.isEmpty())
map.panTo(bounds.getCenter());
Original idea was to find the center of a bunch of markers, so this might be overkill.
I have been trying to implement markerclusterer into my website for the past few weeks and everything I have tried has failed. I have no experience with code at all so everything I've been doing is trial and error.
The website I'm trying to add markerclusterer to is rfmaps.com.au.
I'm unsure as to what I'm doing wrong, and what needs to be fixed and really just need some good advice and help.
Here is the html code that I've been trying to get working. This code is simply all the bits and pieces I've been able to find from forums, all stuck together, and slightly edited (what I could figure out from help from forums)
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layerl0;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-25, 133),
zoom: 5,
mapTypeId: google.maps.MapTypeId.HYBRID
});
for (var i = 0; i < 1000; ++i) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude)
var marker = new google.maps.Marker({
position: latLng,
draggable: true,
icon: markerImage
});
markers.push(marker);
}
var map = new google.maps.Map(document.getElementById("map"), options);
var mc = new MarkerClusterer(map);
layerl0 = new google.maps.FusionTablesLayer({
query: {
select: "'col2'",
from: '1UxncvVQSGcSvuN3t686sNuDQUsn8vQ6mws3zsvk'
},
map: map,
styleId: 4,
templateId: 1
});
}
function changeMapl0() {
var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
layerl0.setOptions({
query: {
select: "'col2'",
from: '1UxncvVQSGcSvuN3t686sNuDQUsn8vQ6mws3zsvk',
where: "'Location' CONTAINS IGNORING CASE '" + searchString + "'"
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div style="margin-top: 10px;">
<label>Location</label><input type="text" id="search-string-l0">
<input type="button" onClick="changeMapl0()" value="Search">
</div>
</body>
</html>
I think you have not added the 'map' object while creating the markers inside the map.
This is your code:
var marker = new google.maps.Marker({
position: latLng,
draggable: true,
icon: markerImage
});
Please add map: map while generating your markers, like this:
var marker = new google.maps.Marker({
map: map,
position: latLng,
draggable: true,
icon: markerImage
});
Regarding marker cluster you need to add this js file- markerclusterer.js
markerCluster = new MarkerClusterer(map, marker);
I am using google-maps-utility-library-v3.
I am trying to zoom in and zoom out, if the dot is not in screen anymore, I want to see count 0.
But it doesn't work. If I comment out mgr.addMarkers(markers,5); It works.... But it will always be 0 because no maker is managed by the manager.
Could someone tell me why?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<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=??????????????&sensor=false">
</script>
<script type="text/javascript" src="downloadxml.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/src/markermanager.js"></script>
<script type="text/javascript">
var map = null;
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(42.35428, -71.05525),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map'), myOptions);
//hard code a marker
var lat = 42.35428;
var lng = -71.05525;
var point = new google.maps.LatLng(lat,lng);
var html = "I am a hard-coded dot";
var marker = new google.maps.Marker({
map: map,
position: point,
icon: "http://www.google.com/mapfiles/arrow.png",
shadow: "http://www.google.com/mapfiles/arrowshadow.png"
});
var markers = [];
markers.push(marker);
var mgr = new MarkerManager(map);
mgr.addMarkers(markers,5);
mgr.refresh();
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoomLevel = map.getZoom();
var count = mgr.getMarkerCount(zoomLevel);
document.getElementById("Listing").innerHTML += count + "<BR>";
});
}
</script>
You appear to be using the MarkerManager before it is fully initialized. Here's an updated section of your code to fix the issue:
var markers = [];
markers.push(marker);
var mgr = new MarkerManager(map);
google.maps.event.addListenerOnce(mgr, 'loaded', function(){
mgr.addMarkers(markers, 5);
mgr.refresh();
});
See this example as reference: http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/docs/examples.html
I'm making a mobile web app.
Part of the app drops several markers, which can be clicked to open info windows. It irritates me that these do not go away if you continue using the map without acknowledging them, as in the iOS maps app.
Is there a way to set it so that if the user clicks the underlying map, all open info windows are closed?
Try this:
google.maps.event.addListener(map, "click", function(event) {
infowindow.close();
});
It is quite simple an should work as well.
add listener to map's click event and close infoboxes in its handler
google.maps.event.addListener(map, "click", function(event) {
for (var i = 0; i < ibArray.length; i++ ) { //I assume you have your infoboxes in some array
ibArray[i].close();
}
});
I do that on typical websites, but don't see any reason it wouldn't work on mobile
google.maps.event.addListener(marker, 'click', function() {
if(!marker.open){
infoWindow.open(map,marker);
marker.open = true;
}
else{
infoWindow.close();
marker.open = false;
}
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
marker.open = false;
});
});
Works perfectly
I noticed some problems with the other answers.
Answer of Marcus Rommel and slawekwin:
When a marker is clicked, the map click event is fired afterwards. So when marker click opens the window, the propagation of the click event to map will close the window again immediately.
Answer of user1724001:
Creating a listener everytime a marker is clicked is also not a good idea. This pollutes the memory.
Therefore i just want to add some additional information to the first answers, to stop event propagation to the map. The Windows will then only be closed, if no marker is clicked.
marker.addListener("click", function(event) {
// open your window here
event.stopPropagation(); // this prevents propagation of marker click to map click
});
map.addListener("click", function() {
// close your window
});
I have better solution for all senario.
Try this: JSFiddle
const infoWindow = new google.maps.InfoWindow();
function init() {
const map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(39.9646, 30.8259),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
map.addListener('click', () => {
if (infoWindow) {
infoWindow.close();
}
});
const istanbulMark = new google.maps.Marker({
position: new google.maps.LatLng(41.0876, 28.9288),
map: map,
label: 'I'
});
istanbulMark.addListener('click', () => {
infoWindow.setContent(`
<h1>Hi mate</h1>
<hr>
<p>Welcome to İstanbul!</p>
`)
infoWindow.open(map, istanbulMark);
});
const ankaraMark = new google.maps.Marker({
position: new google.maps.LatLng(39.9162, 32.8437),
map: map,
label: 'A'
});
ankaraMark.addListener('click', () => {
infoWindow.setContent(`
<h1>Hi mate</h1>
<hr>
<p>Welcome to Ankara!</p>
`)
infoWindow.open(map, ankaraMark);
});
}
google.maps.event.addDomListener(window, 'load', init);
html, body, #map {
height: 100%;
margin: 0px;
padding: 0px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true">
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
dear professionals.
I want to make info window for each markers on google maps.
My code:
google.maps.event.addListener(marker, 'click', function() {
new google.maps.InfoWindow({content: content}).open(map, marker);
});
show infowindow only for last marker.
Please, give me example or link to tutorial.
This is a modification of my answer to this question: Maps API Javascript v3 how to load markers with a mouse click
It loads an array of markers with info windows, and displays the last one added.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>boats</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
</script>
</head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var infowindow = null;
var map = null;
function initialize() {
var washington = new google.maps.LatLng(47.7435, -122.1750);
var myOptions = {
zoom: 7,
center: washington,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
infowindow = new google.maps.InfoWindow({ content: "loading..." });
boats(map, seller);
}
var seller = [
['joe boat', 48.0350,-122.2570, 4, 'This is in good shape.'],
['bobs boat', 48.7435, -122.1750, 2, 'This is in bad shape.'],
['bubas boat', 47.3435, -122.1750, 1, 'This is in ok shape'],
['daveys boat', 47.7435, -122.1750, 3, 'dont buy this one.']
];
function boats(map, markers) {
for (var i = 0; i < markers.length; i++) {
var seller = markers[i];
var sellerLatLng = new google.maps.LatLng(seller[1], seller[2]);
var marker = new google.maps.Marker({
position: sellerLatLng,
map: map,
title: seller[0],
zIndex: seller[3],
html: seller[4]
});
var contentString = "content";
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
// display the last marker infowindow
infowindow.setContent(marker.html);
infowindow.open(map,marker);
}
</script>
<body onLoad="initialize()">
<div id="map_canvas" style="width: 450px; height: 350px;">map div</div>
</body>
</html>