I have a map with two fusion tables layers and am using suppressInfoWindows so that an infowindow from one layer is not left open when a user clicks on a marker from the other layer. This works fine using the below code:
<script type="text/javascript">
var map;
var infowindow;
var layer;
var tableid = MY FUSION TABLE ID;
var layer2;
var tableid2 = MY FUSION TABLE ID;
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(10, 30),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, "click", function() { infoWindow.close(); });
layer = new google.maps.FusionTablesLayer(tableid, {suppressInfoWindows:true});
layer.setQuery("SELECT 'Country Geometry' FROM " + tableid);
layer.setMap(map);
google.maps.event.addListener(layer, "click", openIW);
layer2 = new google.maps.FusionTablesLayer(tableid2, {suppressInfoWindows:true});
layer2.setQuery("SELECT 'Site Location' FROM " + tableid2);
layer2.setMap(map);
google.maps.event.addListener(layer2, "click", openIW);
}
function openIW(FTevent) {
// infoWindow.setContent(FTevent.infoWindowHtml);
// infoWindow.setPosition(FTevent.latLng);
infoWindow.setOptions(
{
content: FTevent.infoWindowHtml,
position: FTevent.latLng,
pixelOffset: FTevent.pixelOffset
});
infoWindow.open(map);
}
</script>
How can I now add custom html to the infowindow rather than rely on the infowindow settings from Fusion Tables? The code I was using before adding the suppressInfoWindows option was as follows, but I'm not sure how to now add this back in, in the right format. Also, is it possible to use different html code for the infowindows on different layers, or must both layers use the same infowindow? Thanks.
e.infoWindowHtml = "<div id='SiteInfo' class='googft-info-window' style='font-family: sans-serif; width: 500px; height: 300px; overflow: auto;'>\
<b>" + e.row['Site Name'].value + "</b><br />\
</div></div>";
See my example in my answer to your last question on this.
Example of your map with 2 layers, 1 infowindow
To implement:
Suppress the infowindows on both layers
Write code to open a shared infowindow when either layer is clicked.
Related
I am using the google maps API and I am displaying polygons on a map using a GeoJSON file. When the user presses inside the polygon, I would like an InfoWindow to appear and display data that is stored in the properties. Seems easy enough but when I am clicking on the polygons, nothing is popping up. Can anyone explain what I am doing wrong?
Below is what I am currently attempting:
map.data.loadGeoJson('plant_bounds_2011.json');
map.data.setStyle({
fillColor: 'red',
strokeWeight: 1
});
var infowindow = new google.maps.InfoWindow({
content: "hello"
});
map.data.addListener('click', function(event) {
let id = event.feature.getProperty('ID');
let name = event.feature.getProperty('HORZ_ORG');
let html = id + " " + name;
infowindow.setContent(html); // show the html variable in the infowindow
infowindow.setPosition(event.feature.getGeometry().get()); // anchor the infowindow at the marker
infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)}); // move the infowindow up slightly to the top of the marker icon
infowindow.open(map);
});
There is a javascript error with the posted code: Uncaught TypeError: event.feature.getGeometry(...).get is not a function on the line:
infowindow.setPosition(event.feature.getGeometry().get()); // anchor the infowindow at the marker`
A Data.Polygon geometry doesn't have a .get() method. It has a .getArray() method (which returns an array of LineStrings)
One location to place the InfoWindow at would be the point clicked (which is in the polygon):
infowindow.setPosition(event.latLng);
(if you want to either add an fixed point for the infowindow to the GeoJson or you want to compute a fixed point from the polygon you can do that as well)
proof of concept fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
zoom: 4,
center: {
lat: -28,
lng: 137
},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.data.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/google.json');
map.data.setStyle({
fillColor: 'red',
strokeWeight: 1
});
var infowindow = new google.maps.InfoWindow({
content: "hello"
});
map.data.addListener('click', function(event) {
let id = event.feature.getProperty('ID');
let name = event.feature.getProperty('HORZ_ORG');
if (typeof id == "undefined") id = event.feature.getProperty('letter');
if (typeof name == "undefined") name = event.feature.getProperty('color');
let html = id + " " + name;
infowindow.setContent(html); // show the html variable in the infowindow
infowindow.setPosition(event.latLng);
infowindow.setOptions({
pixelOffset: new google.maps.Size(0, 0)
}); // move the infowindow up slightly to the top of the marker icon
infowindow.open(map);
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
This code takes a big list of (400) markers and adds it to the map, at the end, it shows the whole map including all the markers.
What I have tried to achieve is: when geolocation is available, center the map on location, zoom to level 16 and refresh the map to show it, otherwise, let the whole big map show... I have read and tried many different things, but the geolocation must happen before the map is created. I want to make it happen after. I show you my code here and the temporary link to the working site: http://studioteknik.co/brasseursillimites.com/detaillants/
function initialize()
{
var map = new google.maps.Map(document.getElementById('map-canvas'));
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
for (var i in locations) {
var p = locations[i];
var latlng = new google.maps.LatLng(p[1], p[2]);
bounds.extend(latlng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: p[0]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.title);
infowindow.open(map, this);
});
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
Here is a simple example of geolocation. Just add the geolocation code anywhere after the map object is created. If the user doesn't allow geolocation, the map will be shown at the default location / zoom level.
function initialize() {
var mapOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(0,0)
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// Geolocation code
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
map.setZoom(16);
});
}
}
initialize();
JSFiddle demo
I have a map thats populated with markers of places from a fusion table. I'm taking the users location and displaying a circle of radius 10 miles from their location. Here is my code - http://connormccarra.com/sandbox/map/. How can I use the api to count the number of markers bound by the circle and output that number in the footer?
Cheers!
Relevant code:
var map;
function Initialize() {
var MapOptions = {
zoom: 7,
center: new google.maps.LatLng(53.4125694, -8.245014),
mapTypeId: google.maps.MapTypeId.ROADMAP,
sensor: true
};
map = new google.maps.Map(document.getElementById("map_canvas"), MapOptions);
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'Address',
from: '1OPU6utSjRYwJSFK-EXdaGmt2KgLTq2loVIjS3AA'
}
});
layer.setMap(map);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var marker = new google.maps.Marker({
map: map,
position: pos,
content: 'You are here!'
});
// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
map: map,
radius: 16093, // 10 miles in metres
fillColor: '#AA0000'
});
circle.bindTo('center', marker, 'position');
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var count = mgr.getMarkerCount(circle);
document.getElementById("Address").innerHTML += count + "<BR>";
google.maps.event.addDomListener(window, 'load', initialize);
//Maps API loaded, now load customizations
var element = document.createElement('script');
element.src = 'template.js';
element.type = 'text/javascript';
var scripts = document.getElementsByTagName('script')[0];
scripts.parentNode.insertBefore(element, scripts);
}
The markers created by a FusionTableLayer are not real markers, there is no way to get them as a kind of list to filter them(you can't get any details for the markers, except you click them).
But you may request the FusionTableAPI with a spatial condition(via AJAX, jsonp is supported).
The syntax for the query:
SELECT COUNT() from tableId
WHERE ST_INTERSECTS('Address',CIRCLE(LATLNG(lat,lng),10000))
How to send a query : https://developers.google.com/fusiontables/docs/v1/sql-reference
Demo(using data of another FusionTable because your table is protected):
http://jsfiddle.net/doktormolle/bAtgf/
Simplest way: use the geometry library computeDistanceBetween method. If the distance from the user's location is less than 10 miles, the marker is in the circle.
I suggest you first fetch all the coordinates of your FusionTablesLayer.
Here is an example which was used in the sidebar
http://www.geocodezip.com/v3_FusionTables_AfricaMap_kml_sidebar.html
Then using a loop statement you can use the computeDistanceBetween function.
Detect If Marker is Within Circle Overlay
I created a google maps (api v3) with the number of markers depending on the search results. When I click a marker, it opens an infowindow. What's the best way to have that infowindow show information associated to its marker? The information related to all the markers is in a json object I receive from an ajax request.
for (i=0; i < result.point.length; i++) {
var latLng = new google.maps.LatLng(result.proint[i].Latitude,result.point[i].Longitude);
var marker = new google.maps.Marker({
position: latLng,
title: i.toString()
//map: map
});
markersArray.push(marker);
var infowindow = new google.maps.InfoWindow({
content: 'specific information associated to the marker clicked'
});
google.maps.event.addListener(markersArray[i], 'click', function(event) {
infowindow.open(map, this);
});
Create only 1 infoWindow as suggested above.
The content store inside the marker:
var marker = new google.maps.Marker({
position: latLng,
title: i.toString(),
//set your content here
content:'your specific content'
//map: map
});
The opening of the window:
google.maps.event.addListener(markersArray[i], 'click', function(event) {
infoWindow.setContent(this.content);
infowindow.open(map, this);
});
First, you should move the the creation of the infoWindow out of the for loop.
Next, change where you attach the click event to this:
google.maps.event.addListener(markersArray[i], 'click', function(content) {
return function(event){
infowindow.setContent(content);
infowindow.open(map, this);
}
}(WHATEVER_THE_CONTENT_SHOULD_BE_FOR_THIS_MARKER));
You want to use this instead of marker. this will refer to the object the event took place on, while marker will refer to the last marker created.
You have some typos in your example (proint) At the top of you loop:
for (i=0; i < result.point.length; i++) {
var info_window_content = result.point[i].Latitude + '<br />';
info_window_content += result.point[i].Longitue + '<br />';
// etc for any value in you json object
// create your marker as is.
...
var infowindow = new google.maps.InfoWindow({
content: info_window_content
});
// etc, etc.
You do need to add an eventListener to each marker, as you are doing. I don't see any problem with that.
Except I'd use infoWindow.open(map, marker) vs. this.
There is probably a more efficient way to do it, i.e. after infoWindow.open(); infoWindow.setContent(info_window_content)
Try this, it works I tested it already
// Add markers
for (i=0; i < result.point.length; i++) {
var latLng = new google.maps.LatLng(result.proint[i].Latitude, result.point[i].Longitude);
var marker = new google.maps.Marker({
position: latLng,
title: i.toString()
//map: map
});
// marker info start
var infowindow = new google.maps.InfoWindow();
(function (marker, result.point[i]) {
// add click event
google.maps.event.addListener(marker, 'click', function() {
var infoContent: "specific information associated to the marker clicked"
});
infoWindow.setContent(infoContent);
infowindow.open(map, marker);
});
// selected marker 4 infowindow
(marker, result.point[i]);
markersArray.push(marker);
}
Not entirely sure what it is you are trying to do. Where/ what content are you trying to load?
google.maps.event.addListener(marker, 'click', (function(event, index) {
return function(){
infowindow.content = markersArray[index].yourcontent;
// or
infowindow.content = yourcontentarray[index];
infowindow.open(map,this);
}
})(marker,i));
Make sure you declare your marker and infowindow variables outside of a function.
When I click a marker and the InfoWindow appears, the height does not adjust if the length of the content is longer that the InfoWindow default height (90px).
I am using text-only, no images.
I have tried maxWidth.
I have checked for inherited CSS.
I have wrapped my content in a div
and applied my CSS to that, including
a height.
I have even tried forcing the
InfoWindow to resize with jQuery
using the domready event on the
InfoWindow.
I only have a few hairs left. Here is my JS:
var geocoder;
var map;
var marker;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(41.8801,-87.6272);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress(infotext,address) {
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var image = '/path-to/mapMarker.png';
var infowindow = new google.maps.InfoWindow({ content: infotext, maxWidth: 200 });
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: image
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
});
}
function checkZipcode(reqZip) {
if ( /[0-9]{5}/.test(reqZip) ) {
$.ajax({
url: 'data.aspx?zip=' + reqZip,
dataType: 'json',
success: function(results) {
$.each(results.products.product, function() {
var display = "<span id='bubble-marker'><strong>"+this.name+"</strong><br>"+
this.address+"<br>"+
this.city+", "+this.state+" "+this.zip+"<br>"+
this.phone+"</span>";
var address = this.address+","+
this.city+","+
this.state+","+
this.zip;
codeAddress(display,address);
});
},
error: function() { $('#information-bar').text('fail'); }
});
} else { $('#information-bar').text('Zip codes are five digit numbers.'); }
}
$('#check-zip').click(function() { $('#information-bar').text(''); checkZipcode($('#requested-zipcode').val()); });
initialize();
InfoText and Address come from an AJAX query of an XML file. Data is not the issue, as it always comes through correctly. codeAddress() is called after the data has been retrieved and formatted.
HTML in the file:
<div id="google_map"> <div id="map_canvas" style="width:279px; height:178px"></div> </div>
CSS for my InfoWindow content (no other CSS applies to the map):
#bubble-marker{ font-size:11px; line-height:15px; }
I finally found a working solution for the problem. Is not as flexible as I wished, but it's pretty good. Fundamentally the key point is: don't use a string as window content but instead a DOM node.
This is my code:
// this dom node will act as wrapper for our content
var wrapper = document.createElement("div");
// inject markup into the wrapper
wrapper.innerHTML = myMethodToGetMarkup();
// style containing overflow declarations
wrapper.className = "map-popup";
// fixed height only :P
wrapper.style.height = "60px";
// initialize the window using wrapper node
var popup = new google.maps.InfoWindow({content: wrapper});
// open the window
popup.open(map, instance);
the following is the CSS declaration:
div.map-popup {
overflow: auto;
overflow-x: hidden;
overflow-y: auto;
}
ps: "instance" refers to the current custom subclass of google.maps.OverlayView (which I'm extending)
Just wrap your content with a div and specify it's height: <div style="height:60px">...</div>, e.g.
myMarker.setContent('<div style="height:60px">' + txt + '</div>');
- In my case it was fairly enough.
Your map canvas is too small. Increase the width/height of your <div id="map_canvas"> element and you should see larger InfoWindows automatically.
That said, I had the same problem on a site I was building. I solved it by creating a cloned div containing the InfoWindow content, measuring that div's width and height, and then setting the InfoWindow content div to have that measured width and height. Here's my code ported into the middle of your codeAddress function (also note that I removed the maxWidth: 200 from your InfoWindow declaration):
function codeAddress(infotext,address) {
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
// Create temporary div off to the side, containing infotext:
var $cloneInfotext = $('<div>' + infotext + '</div>')
.css({marginLeft: '-9999px', position: 'absolute'})
.appendTo($('body'));
// Wrap infotext with a div that has an explicit width and height,
// found by measuring the temporary div:
infotext = '<div style="width: ' + $cloneInfotext.width() + 'px; ' +
'height: ' + $cloneInfotext.height() + 'px">' + infotext +
'</div>';
// Delete the temporary div:
$cloneInfotext.remove();
// Note no maxWidth defined here:
var infowindow = new google.maps.InfoWindow({ content: infotext });
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
});
}
Just wrap you InfoBox content with DIV with padding-bottom: 30px;
JS:
map_info_window = new google.maps.InfoWindow();
var $content = $('<div class="infobox">').html(content);
map_info_window.setContent($content.get(0));
map_info_window.open(map, marker);
CSS:
.infobox{
padding-bottom: 30px;
}
It is not really an answer (daveoncode's solution to create a DOM node and use it as content is right), but if you need to dynamically change the content once set (e.g. with jQuery) then you can force gmail to resize the infoWindow with:
infoWindowLinea.setContent(infoWindowLinea.getContent());