Fusion Tables map broken after search - javascript
here's a Fusion Tables map that's broken after a search. It does everything well before I do a search. The points on the map just don't show (although the information in the table below it gets updated).
What am I doing wrong?
//write the map on page load
$(document).ready(function() {
createMap();
});
//ft layer
var layer;
//ft table
var tableid = 4176964;
//map
var map;
//geocoder instance
var geocoder = new google.maps.Geocoder();
//infowindow
var infowindow;
//gviz
var table;
//FT data in gviz object
var datatable;
//center of map
var center = new google.maps.LatLng(52.146973340644735, 4.7021484375);
//default zoom
var zoom = 7;
google.load('visualization', '1', {
'packages': ['table']
});
function createMap() {
//map options
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: center,
zoom: zoom,
minZoom: 2,
maxZoom: 12,
scrollwheel: true,
disableDragging: true,
mapTypeControl: false,
navigationControl: true,
streetViewControl: false,
scaleControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP
}
});
//intial fusion layer & supress fusion info window
layer = new google.maps.FusionTablesLayer(tableid, {
suppressInfoWindows: true,
query: "SELECT Latitude FROM " + tableid,
map: map
});
//adds click listener on layer
google.maps.event.addListener(layer, 'click', function(e) {
if (infowindow) infowindow.close();
else infowindow = new google.maps.InfoWindow();
//write FT data to info window
text = infowindow.setContent('<p>Op <b>' + e.row['Datum'].value + '</b> storte een ' + e.row['Type'].value + ' van ' + e.row['Vliegmaatschappij'].value +' met registratienummer ' + e.row['Registratie'].value + ' neer bij <b>' + e.row['Locatie'].value + '</b>.<p><p>Hierbij overleden ' + e.row['Slachtoffers'].value + ' van de ' + e.row['Inzittenden'].value + ' inzittenden en ' + e.row['Grond'].value + ' overleden op de grond.<p><p>Meer informatie op Aviation Safety Network.');
infowindow.setPosition(e.latLng);
map.setCenter(e.latLng);
infowindow.open(map);
});
//query FT data for visualization
var queryText = encodeURIComponent("SELECT Datum, Locatie, Type, Registratie, Vliegmaatschappij, Slachtoffers, Inzittenden, Grond FROM 4176964 ORDER BY 'Datum' ASC");
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
query.send(getData);
}
//write FT data to table
var getData = function(response) {
console.log('getData');
console.log(response);
table = new google.visualization.Table(document.getElementById('visualization'));
datatable = response.getDataTable();
table.draw(datatable, {
showRowNumber: true
});
//add table listener when row clicked
google.visualization.events.addListener(table, 'select', selectHandler);
}
//match table data to map data
function selectHandler() {
//get lat/lng from FT
var selection = table.getSelection();
var Datum = datatable.getValue(selection[0].row, 0);
var Locatie = datatable.getValue(selection[0].row, 1);
var Type = datatable.getValue(selection[0].row, 2);
var Registratie = datatable.getValue(selection[0].row, 3);
var Vliegmaatschappij = datatable.getValue(selection[0].row, 4);
var Slachtoffers = datatable.getValue(selection[0].row, 5);
var Inzittenden = datatable.getValue(selection[0].row, 6);
var Grond = datatable.getValue(selection[0].row, 7);
infoWindowContent = ('<p>Op <b>' + e.row['Datum'].value + '</b> storte een ' + e.row['Type'].value + ' van ' + e.row['Vliegmaatschappij'].value +' met registratienummer ' + e.row['Registratie'].value + ' neer bij <b>' + e.row['Locatie'].value + '</b>.<p><p>Hierbij overleden ' + e.row['Slachtoffers'].value + ' van de ' + e.row['Inzittenden'].value + ' inzittenden en ' + e.row['Grond'].value + ' overleden op de grond.<p><p>Meer informatie op Aviation Safety Network.');
}
function changeSearch(dater) {
dater = document.getElementById('newDatum').value;
console.log('dater: ' + dater);
//with a query based on the variables
var sql = "SELECT Datum, Locatie, Type, Registratie, Vliegmaatschappij, Slachtoffers, Inzittenden, Grond FROM " + tableid + " WHERE Datum CONTAINS '" + dater + "' ORDER BY 'Datum' ASC";
var polySql = "SELECT Latitude FROM " + tableid + " WHERE Datum CONTAINS '" + dater + "'";
console.log('SQL: ' + sql);
console.log('Polygon-SQL: ' + polySql);
layer.setOptions({
query: polySql,
map: map
});
var queryText = encodeURIComponent(sql);
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
query.send(getData);
//adds a click listener on search layer
google.maps.event.addListener(layer, 'click', function(e) {
if (infowindow) infowindow.close();
else infowindow = new google.maps.InfoWindow();
//writes the info window on search layer
infowindow.setContent('<p>Op <b>' + e.row['Datum'].value + '</b> storte een ' + e.row['Type'].value + ' van ' + e.row['Vliegmaatschappij'].value +' met registratienummer ' + e.row['Registratie'].value + ' neer bij <b>' + e.row['Locatie'].value + '</b>.<p><p>Hierbij overleden ' + e.row['Slachtoffers'].value + ' van de ' + e.row['Inzittenden'].value + ' inzittenden en ' + e.row['Grond'].value + ' overleden op de grond.<p><p>Meer informatie op Aviation Safety Network.');
infowindow.setPosition(e.latLng);
map.setCenter(e.latLng);
infowindow.open(map);
});
}
//end function
This works for a query on the map:
SELECT Latitude FROM 4176964 WHERE Datum <= '16 JAN 1950'
I suspect you need to treat the data as a number (even though you specify it as a string)
Related
Trying to add button in googlemap infoWindow
I'm trying to add a button in googlemap infoWindow but I'm beginner in javascript and I have spent weeks on this and still not working... So I hope one of you will be able to help me. To explain you a litle bit... I get markers from a bdd to display them on a map. Then on marker click, a infoWindow opens with all info marker on it. This is all working perfectly but then is when I don't get it. I have added a submit button to each infoWindow markers and I would like an action on submit button click (save to database). But the button is not responding at all... I removed all the code containing the save function to keep it all clear as there is a alert("click") to test the button... <script type="text/javascript"> var bounds; var markers = []; var markerCount = 0; function initialize(){ bounds = new google.maps.LatLngBounds(); var myLatLng = new google.maps.LatLng(46.775090, 2.507969); var mapOptions={ zoom: 6, center: myLatLng, maxZoom: 11, }, map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); setMarkers(map,marker); const geocoder = new google.maps.Geocoder(); document.getElementById("submit").addEventListener("click", () => { geocodeAddress(geocoder, map); }); } function setMarkers(map,locations){ for(var i=0; i<locations.length; i++){ var station = locations[i]; var myLatLng = new google.maps.LatLng(station['marker_latitude'], station['marker_longitude']); var infoWindow = new google.maps.InfoWindow(); var image = 'https://marchad.fr/wp-includes/images/marchad.png'; var description = station['marker_text']; var marker = new google.maps.Marker({ position: myLatLng, map: map, icon: image, title: station['marker_ville'], id: station['marker_id'] }); (function(marker, i){ google.maps.event.addListener(marker, "click",function(){ var station = locations[i]; var mId = station['marker_id']; //description input field value var contentString = ("<div id='infoWindow"+station['marker_id']+">" +"<p class='texte'><strong>"+station['marker_text']+"</strong><p>" +"<p class='texte'>Ce staliad est géré par un "+station['marker_user_type']+"<p>" +"<p class='texte'><strong>Adresse : </strong>"+station['marker_adresse']+"<p>" +"<p class='texte'><strong>Jour de permanence : </strong>"+station['marker_day']+"<p>" +"<p class='texte'><strong>Dépôts : </strong>de "+station['marker_depot_start_time']+" à "+station['marker_depot_end_time']+"<p>" +"<p class='texte'><strong>Retraits : </strong>de "+station['marker_start_time']+" à "+station['marker_end_time']+"<p>" +"<p class='texte'><strong>Téléphone : </strong>"+station['marker_user_contact']+"<p>" +"<p class='texte'><strong>Mail : </strong>"+station['marker_contact_mail']+"<p>" +"<p class='texte'><strong>Commentaire : </strong>"+station['marker_commentaire']+"<p>" +'<form action="ajax-save.php" method="POST" name="SaveMarker" id="SaveMarker'+station['marker_id']+'">' +'<input id="idInput'+station['marker_id']+'" type="hidden" name="marker-id" class="marker-id'+station['marker_id']+'" value='+station['marker_id']+' />'+station['marker_id']+'</input>' +'</form>' +'<input id="inputButton'+station['marker_id']+'" type="button" id="save-marker'+station['marker_id']+'" name="save-marker" class="save-marker'+station['marker_id']+'" data-id="'+station['marker_id']+'" value="M\'inscrire" />' +'<div id="test'+station['marker_id']+'">'+vendorId+'</div>' +'<span class="info-content'+station['marker_id']+'">' +'<h1 class="marker-heading"></h1>' +'</span>' +"</div>" ); infoWindow.close(); infoWindow.setContent(contentString); infoWindow.open(map,this); var class_name_removeBtn = 'remove-marker'+station['marker_id']; var class_name_saveBtn = 'save-marker'+station['marker_id']; var removeBtn = document.getElementsByClassName(class_name_removeBtn); var saveBtn = document.getElementsByClassName(class_name_saveBtn); console.log(removeBtn); console.log(saveBtn); //add click listner to save marker button google.maps.event.addDomListener(saveBtn, "click", function(event) { var class_name_mReplace = 'info-content'+station['marker_id']; var class_name_mName = 'marker-id'+station['marker_id']; var mReplace = document.getElementsByClassName(class_name_mReplace); //html to be replaced after success var mName = document.getElementsByClassName(class_name_mName); //name input field value var mId = station['marker_id']; var vId = vendorId; console.log(mReplace); console.log(mName); console.log(mId); console.log(vId); if(mId !=='') { alert("click"); save_marker( mName, mId, mReplace,vId); //call save marker function }else{ alert("Something went wrong. Please contact admin"); } }); if(typeof removeBtn !== 'undefined') //continue only when save button is present { google.maps.event.addDomListener(removeBtn, "click", function(event) { var class_name_mName = 'marker-id'+station['marker_id']; var mName = document.getElementsByClassName(class_name_mName); //name input field value var vId = vendorId; remove_marker(mName,vId); }); } }); })(marker, i); } } </script>
Your first problem is the saveBtn is not part of the DOM until the InfoWindow has been opened as you are adding as a string in the InfoWindow content. Relate questions: using addDomListener with googlemaps not working Turn off google map's infowindow.open(map) asynchronous behaviour Adding Event Listener on button - Javascript The second problem is that document.getElementsByClassName(class_name_saveBtn); returns an array. Instead of: document.getElementsByClassName(class_name_saveBtn); for a single marker, you need: document.getElementsByClassName(class_name_saveBtn)[0]; for multiple markers/infowindows (get the last one created): var removeBtn = document.getElementsByClassName(class_name_removeBtn); removeBtn = removeBtn[removeBtn.length-1]; var saveBtn = document.getElementsByClassName(class_name_saveBtn); saveBtn = saveBtn[saveBtn.length-1]; proof of concept fiddle code snippet: var bounds; var markers = []; var markerCount = 0; /* var marker = [{ marker_latitude: 47.394144, marker_longitude: 0.68484, marker_id: 1 }] */ var marker = [{"marker_id":"6","marker_user_id":"0","marker_user_type":"","marker_user_stal":null,"marker_categorie":"5","marker_adresse":"","marker_numero_voie":"","marker_voie":"","marker_zip":"","marker_ville":"Toulouse","marker_departement":"31","marker_region":"0","marker_longitude":"1.434917","marker_latitude":"43.573085","marker_day":"","marker_depot_start_time":"00:00:00","marker_depot_end_time":"00:00:00","marker_start_time":"00:00:00","marker_end_time":"00:00:00","marker_text":"Casino Barri\u00e8re","marker_user_contact":"","marker_contact_mail":"","marker_enable_contact_telephone":"","marker_enable_contact_mail":"","marker_commentaire":null,"marker_actif":"Oui","id":null,"mark_id":null,"user_id":null,"user_actif":null},{"marker_id":"7","marker_user_id":"0","marker_user_type":"","marker_user_stal":null,"marker_categorie":"6","marker_adresse":"","marker_numero_voie":"","marker_voie":"","marker_zip":"","marker_ville":"Toulouse","marker_departement":"31","marker_region":"0","marker_longitude":"1.447856","marker_latitude":"43.604573","marker_day":"","marker_depot_start_time":"00:00:00","marker_depot_end_time":"00:00:00","marker_start_time":"00:00:00","marker_end_time":"00:00:00","marker_text":"Cinema Gaumont Wilson","marker_user_contact":"","marker_contact_mail":"","marker_enable_contact_telephone":"","marker_enable_contact_mail":"","marker_commentaire":null,"marker_actif":"Oui","id":null,"mark_id":null,"user_id":null,"user_actif":null},{"marker_id":"8","marker_user_id":"0","marker_user_type":"","marker_user_stal":null,"marker_categorie":"6","marker_adresse":"","marker_numero_voie":"","marker_voie":"","marker_zip":"","marker_ville":"Lab\u00e8ge","marker_departement":"31","marker_region":"0","marker_longitude":"1.511496","marker_latitude":"43.53992","marker_day":"","marker_depot_start_time":"00:00:00","marker_depot_end_time":"00:00:00","marker_start_time":"00:00:00","marker_end_time":"00:00:00","marker_text":"Cinema Gaumont Lab\u00e8ge","marker_user_contact":"","marker_contact_mail":"","marker_enable_contact_telephone":"","marker_enable_contact_mail":"","marker_commentaire":null,"marker_actif":"Oui","id":null,"mark_id":null,"user_id":null,"user_actif":null},{"marker_id":"9","marker_user_id":"0","marker_user_type":"","marker_user_stal":null,"marker_categorie":"6","marker_adresse":"","marker_numero_voie":"","marker_voie":"","marker_zip":"","marker_ville":"Blagnac","marker_departement":"31","marker_region":"0","marker_longitude":"1.373341","marker_latitude":"43.644029","marker_day":"","marker_depot_start_time":"00:00:00","marker_depot_end_time":"00:00:00","marker_start_time":"00:00:00","marker_end_time":"00:00:00","marker_text":"Cinema Mega CGR Blagnac","marker_user_contact":"","marker_contact_mail":"","marker_enable_contact_telephone":"","marker_enable_contact_mail":"","marker_commentaire":null,"marker_actif":"Oui","id":null,"mark_id":null,"user_id":null,"user_actif":null},{"marker_id":"10","marker_user_id":"0","marker_user_type":"","marker_user_stal":null,"marker_categorie":"4","marker_adresse":"","marker_numero_voie":"","marker_voie":"","marker_zip":"","marker_ville":"Toulouse","marker_departement":"31","marker_region":"0","marker_longitude":"1.435198","marker_latitude":"43.62186","marker_day":"","marker_depot_start_time":"00:00:00","marker_depot_end_time":"00:00:00","marker_start_time":"00:00:00","marker_end_time":"00:00:00","marker_text":"Bowling Minimes\r\n108 Bis Avenue des Minimes, 31200 Toulouse \u200e\r\n05 61 47 95 60","marker_user_contact":"","marker_contact_mail":"","marker_enable_contact_telephone":"","marker_enable_contact_mail":"","marker_commentaire":null,"marker_actif":"Oui","id":null,"mark_id":null,"user_id":null,"user_actif":null},{"marker_id":"11","marker_user_id":"0","marker_user_type":"","marker_user_stal":null,"marker_categorie":"4","marker_adresse":"","marker_numero_voie":"","marker_voie":"","marker_zip":"","marker_ville":"Montaudran","marker_departement":"31","marker_region":"0","marker_longitude":"1.496152","marker_latitude":"43.568863","marker_day":"","marker_depot_start_time":"00:00:00","marker_depot_end_time":"00:00:00","marker_start_time":"00:00:00","marker_end_time":"00:00:00","marker_text":"Bowling Montaudran Impasse Louise Lab\u00e9 31400 Toulouse 05 61 20 20 70","marker_user_contact":"","marker_contact_mail":"","marker_enable_contact_telephone":"","marker_enable_contact_mail":"","marker_commentaire":null,"marker_actif":"Oui","id":null,"mark_id":null,"user_id":null,"user_actif":null},{"marker_id":"12","marker_user_id":"0","marker_user_type":"","marker_user_stal":null,"marker_categorie":"4","marker_adresse":"","marker_numero_voie":"","marker_voie":"","marker_zip":"","marker_ville":"Colomiers","marker_departement":"31","marker_region":"0","marker_longitude":"1.304691","marker_latitude":"43.609902","marker_day":"","marker_depot_start_time":"00:00:00","marker_depot_end_time":"00:00:00","marker_start_time":"00:00:00","marker_end_time":"00:00:00","marker_text":"Bowling Stadium Colomiers\r\n29 Chemin du Loudet\r\n33770 Colomiers\r\n05 34 36 42 50","marker_user_contact":"","marker_contact_mail":"","marker_enable_contact_telephone":"","marker_enable_contact_mail":"","marker_commentaire":null,"marker_actif":"Oui","id":null,"mark_id":null,"user_id":null,"user_actif":null},{"marker_id":"13","marker_user_id":"0","marker_user_type":"","marker_user_stal":null,"marker_categorie":"10","marker_adresse":"","marker_numero_voie":"","marker_voie":"","marker_zip":"","marker_ville":"Plaisance-du-Touch","marker_departement":"31","marker_region":"0","marker_longitude":"1.260248","marker_latitude":"43.55854","marker_day":"","marker_depot_start_time":"00:00:00","marker_depot_end_time":"00:00:00","marker_start_time":"00:00:00","marker_end_time":"00:00:00","marker_text":"African Safari\r\n41 Rue des Landes\r\n31830 Plaisance-du-Touch\r\n05 61 86 45 03","marker_user_contact":"","marker_contact_mail":"","marker_enable_contact_telephone":"","marker_enable_contact_mail":"","marker_commentaire":null,"marker_actif":"Oui","id":null,"mark_id":null,"user_id":null,"user_actif":null},{"marker_id":"29","marker_user_id":"2","marker_user_type":"marchand","marker_user_stal":"Aux petits l\u00e9gumes","marker_categorie":"test","marker_adresse":"12 Rue du Bocage, Tr\u00e9gueux, France","marker_numero_voie":"12","marker_voie":"Rue du Bocage","marker_zip":"22950","marker_ville":"Tr\u00e9gueux","marker_departement":"C\u00f4tes-d'Armor","marker_region":"Bretagne","marker_longitude":"-2.7515737","marker_latitude":"48.4831891","marker_day":"Lundi","marker_depot_start_time":"09:00:00","marker_depot_end_time":"12:00:00","marker_start_time":"12:00:00","marker_end_time":"18:46:00","marker_text":"Aux petits l\u00e9gumes","marker_user_contact":"0783312456","marker_contact_mail":"nattydreadnatty#live.fr","marker_enable_contact_telephone":"yes","marker_enable_contact_mail":"yes","marker_commentaire":"test test test test test testing out","marker_actif":"oui","id":null,"mark_id":null,"user_id":null,"user_actif":null},{"marker_id":"30","marker_user_id":"3","marker_user_type":"marchand","marker_user_stal":"Poivrons et compagnie","marker_categorie":"","marker_adresse":"12t Rue du Vau Hello, 22360 Langueux, France","marker_numero_voie":"12","marker_voie":"Rue du Vau Hello","marker_zip":"22360","marker_ville":"Langueux","marker_departement":"C\u00f4tes-d'Armor","marker_region":"Bretagne","marker_longitude":"-2.7262882","marker_latitude":"48.50448799999999","marker_day":"Vendredi","marker_depot_start_time":"08:00:00","marker_depot_end_time":"10:00:00","marker_start_time":"10:00:00","marker_end_time":"18:00:00","marker_text":"Poivrons et compagnie","marker_user_contact":"","marker_contact_mail":"lucbinard4#gmail.com","marker_enable_contact_telephone":"yes","marker_enable_contact_mail":"yes","marker_commentaire":"","marker_actif":"oui","id":null,"mark_id":null,"user_id":null,"user_actif":null}]; var vendorId = "vendorId"; function initialize() { bounds = new google.maps.LatLngBounds(); var myLatLng = new google.maps.LatLng(46.775090, 2.507969); var mapOptions = { zoom: 6, center: myLatLng, maxZoom: 11, }, map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); setMarkers(map, marker); const geocoder = new google.maps.Geocoder(); document.getElementById("submit").addEventListener("click", () => { geocodeAddress(geocoder, map); }); } function setMarkers(map, locations) { for (var i = 0; i < locations.length; i++) { var station = locations[i]; var myLatLng = new google.maps.LatLng(station['marker_latitude'], station['marker_longitude']); var infoWindow = new google.maps.InfoWindow(); var image = 'https://marchad.fr/wp-includes/images/marchad.png'; var description = station['marker_text']; var marker = new google.maps.Marker({ position: myLatLng, map: map, icon: image, title: station['marker_ville'], id: station['marker_id'] }); (function(marker, i) { google.maps.event.addListener(marker, "click", function() { var station = locations[i]; var mId = station['marker_id']; //description input field value var contentString = ("<div id='infoWindow" + station['marker_id'] + ">" + "<p class='texte'><strong>" + station['marker_text'] + "</strong><p>" + "<p class='texte'>Ce staliad est géré par un " + station['marker_user_type'] + "<p>" + "<p class='texte'><strong>Adresse : </strong>" + station['marker_adresse'] + "<p>" + "<p class='texte'><strong>Jour de permanence : </strong>" + station['marker_day'] + "<p>" + "<p class='texte'><strong>Dépôts : </strong>de " + station['marker_depot_start_time'] + " à " + station['marker_depot_end_time'] + "<p>" + "<p class='texte'><strong>Retraits : </strong>de " + station['marker_start_time'] + " à " + station['marker_end_time'] + "<p>" + "<p class='texte'><strong>Téléphone : </strong>" + station['marker_user_contact'] + "<p>" + "<p class='texte'><strong>Mail : </strong>" + station['marker_contact_mail'] + "<p>" + "<p class='texte'><strong>Commentaire : </strong>" + station['marker_commentaire'] + "<p>" + '<form action="ajax-save.php" method="POST" name="SaveMarker" id="SaveMarker' + station['marker_id'] + '">' + '<input id="idInput' + station['marker_id'] + '" type="hidden" name="marker-id" class="marker-id' + station['marker_id'] + '" value=' + station['marker_id'] + ' />' + station['marker_id'] + '</input>' + '</form>' + '<input id="inputButton' + station['marker_id'] + '" type="button" id="save-marker' + station['marker_id'] + '" name="save-marker" class="save-marker' + station['marker_id'] + '" data-id="' + station['marker_id'] + '" value="M\'inscrire" />' + '<div id="test' + station['marker_id'] + '">' + vendorId + '</div>' + '<span class="info-content' + station['marker_id'] + '">' + '<h1 class="marker-heading"></h1>' + '</span>' + "</div>" ); infoWindow.close(); infoWindow.setContent(contentString); infoWindow.open(map, this); var class_name_removeBtn = 'remove-marker' + station['marker_id']; var class_name_saveBtn = 'save-marker' + station['marker_id']; google.maps.event.addListenerOnce(infoWindow,'domready', function() { var removeBtn = document.getElementsByClassName(class_name_removeBtn); removeBtn = removeBtn[removeBtn.length-1]; var saveBtn = document.getElementsByClassName(class_name_saveBtn); saveBtn = saveBtn[saveBtn.length-1]; console.log(removeBtn); console.log(saveBtn); //add click listner to save marker button google.maps.event.addDomListener(saveBtn, "click", function(event) { var class_name_mReplace = 'info-content' + station['marker_id']; var class_name_mName = 'marker-id' + station['marker_id']; var mReplace = document.getElementsByClassName(class_name_mReplace); //html to be replaced after success var mName = document.getElementsByClassName(class_name_mName); //name input field value var mId = station['marker_id']; var vId = vendorId; console.log(mReplace); console.log(mName); console.log(mId); console.log(vId); if (mId !== '') { alert("click"); save_marker(mName, mId, mReplace, vId); //call save marker function } else { alert("Something went wrong. Please contact admin"); } }); if (typeof removeBtn !== 'undefined') //continue only when save button is present { google.maps.event.addDomListener(removeBtn, "click", function(event) { var class_name_mName = 'marker-id' + station['marker_id']; var mName = document.getElementsByClassName(class_name_mName); //name input field value var vId = vendorId; remove_marker(mName, vId); }); } }) }); })(marker, i); } } /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map-canvas { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } <!DOCTYPE html> <html> <head> <title>Simple Map</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <!-- jsFiddle will insert css and js --> </head> <body> <input id="submit" type="button" value="submit" /> <div id="map-canvas"></div> <!-- Async script executes immediately and must be after any DOM elements used in callback. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&libraries=&v=weekly" async></script> </body> </html>
Mine works like this.. detect click event within info window google.maps.event.addListener(infowindow, 'domready', function() { $('.classname').click(function(){ // code });
url.content not loading image javascript and asp.net mvc
I have my javascript in my view and I am trying to load an image from my database into an info window for my google maps but the image does not load. Javascript code in view: $.get("#Url.Action("GetMarkers","Donator")", function (json, status) { //Global infoWindow object that will be reused by all markers var infoWindow = new google.maps.InfoWindow(); var marker, data; //Loop through the json data for (var i = 0; i < json.length; i++) { data = json[i]; var latLng = new google.maps.LatLng(data.Latitude, data.Longitude) //Creating marker and putting it on the map marker = new google.maps.Marker({ position: latLng, map: map, title: data.NpoName + ' says Click Me!' }); // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data) (function (marker, data) { // Attaching a click event to the current marker google.maps.event.addListener(marker, "click", function (e) { var imageUrl = '<%=Url.Content(' + data.VerificationIcon + ')%>'; infoWindow.setContent('<h3 class="info-window-title">' + data.NpoName + '</h3>' + '<hr />' + '<p>Npo type: ' + data.NpoType + '</p>' + '<p>' + data.VerificationStatus + '<img src="' + imageUrl + '" alt="verification icon" class="verification-icon" />' + '</p>' + 'Click here to donate!'); infoWindow.open(map, marker); }); })(marker, data); }; }); Code in controller: public JsonResult GetMarkers() { //Disable lazy loading db.Configuration.ProxyCreationEnabled = false; //Map marker section var DynamicMapMarkers = db.tblNpo.Include(zz => zz.tblVerification).Include(xx => xx.tblNpo_Type); //Set map marker values foreach (var item in DynamicMapMarkers) { DonatorUserViewModel MapMarkers = new DonatorUserViewModel(); MapMarkers.NpoID = item.npo_id; MapMarkers.NpoName = item.npo_name; MapMarkers.NpoType = item.tblNpo_Type.description; MapMarkers.VerificationStatus = item.tblVerification.description; MapMarkers.VerificationIcon = item.tblVerification.verification_icon; MapMarkers.Longitude = Convert.ToDouble(item.longitude); MapMarkers.Latitude = Convert.ToDouble(item.latitude); MapMarkerList.Add(MapMarkers); } var json = MapMarkerList; return Json(json, JsonRequestBehavior.AllowGet); } Main focus area from the code above: var imageUrl = '<%=Url.Content(' + data.VerificationIcon + ')%>'; infoWindow.setContent('<h3 class="info-window-title">' + data.NpoName + '</h3>' + '<hr />' + '<p>Npo type: ' + data.NpoType + '</p>' + '<p>' + data.VerificationStatus + '<img src="' + imageUrl + '" alt="verification icon" class="verification-icon" />' + '</p>' + 'Click here to donate!'); The format of the way the image is stored in the database ~/Images/DbImages/verified.png I am not sure why the image isn't loading, or how to work around it. Any help would be appreciated.
Google Maps V3- Place marker and polyline with interval
I have been trying for hours and also referred to a post in this forum but failed. I have a large number of markers, up to 1000 markers on the map. It slows down my map when I try to move the map's position. So I need to set an interval of markers to be shown on the map. Let's say with interval of 10 when there are more than 300 markers. How can I do that? Below is my code : var trace_markers= []; var pins = []; var pin; function Trace_Pin(Lat, Long, immat, type, site, vitesse, date){ pin = { latitude: document.getElementById('Lat'), longitude: document.getElementById('Long'), immat: document.getElementById('immat'), date: document.getElementById('date'), type: document.getElementById('type'), site: document.getElementById('site'), speed: document.getElementById('vitesse') }; pins.push(pin); ListPin();} function ListPin() { var image_trace = new google.maps.MarkerImage('http://maps.google.com/mapfiles/kml/pal3/icon61.png', new google.maps.Size(32, 32), new google.maps.Point(0,0), new google.maps.Point(16, 16)); if (pins.length > 200){ for ( var i=0; i< pins.length ;i+10){ var vehlatlng = new google.maps.LatLng(pins[i].latitude, pins[i].longitude) ; var trace_marker = new google.maps.Marker({ map: map, position: vehlatlng, icon: image_trace }); trace_marker.tooltip_html = '<div class="tooltip">' + 'Date : ' + pins[i].date + '<br>' + 'Vitesse : ' + pins[i].vitesse + ' km/h' + '<br>' + '<\/div>'; trace_markers.push(trace_marker); trace_marker.setMap(map); Liste_Points.push(trace_marker.getPosition()); TraceBounds.extend(trace_marker.position); } } if (pins.length < 200){ for ( var i=0;i< pins.length ;i++){ var vehlatlng = new google.maps.LatLng(pins[i].latitude, pins[i].longitude) ; var trace_marker = new google.maps.Marker({ map: map, position: vehlatlng, icon: image_trace }); trace_marker.tooltip_html = '<div class="tooltip">' + 'Date : ' + pins[i].date + '<br>' + 'Vitesse : ' + pins[i].vitesse + ' km/h' + '<br>' + '<\/div>'; trace_markers.push(trace_marker); trace_marker.setMap(map); Liste_Points.push(trace_marker.getPosition()); TraceBounds.extend(trace_marker.position); } } // Evenement MouseOver //----------------------------------------------------- google.maps.event.addListener(map, 'mouseover', function() { showTooltip(trace_marker); }); } // ------------------------------------------------------------------------------------ //************************************************************************************** // On joint les points du parcours //************************************************************************************** // ------------------------------------------------------------------------------------ function Trace_Route() { if (route) { route.setMap(null); } if (Liste_Points.length > 1) { route = new google.maps.Polyline({ path: Liste_Points, strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2}); route.setMap(map); } }
Create an array where you have all your markers (300 of them). Lets assume that is called allMarkersArray[] When you create a marker you do not set the map, but you leave it null so it won't be shown on the map. When you want to show the markers you do some math. Lets say that you want to show only the 1/30 (10 out of 300) of the markers. You create another array shownMarketsArray[] where you place the markers you want to show and when you put them there you set the map marker.setMap(map) Now the criteria of which markers will be shown, and which markers will remain hidden are up to you. If you want the 1/30 of the markers just have a for loop for(var i = 0; i < allMarketsArray.length/30; i++) You should take some precautions though (i.e. the array is too small and you want to show all of them). UPDATE if (pins.length > 200){ for ( var i=0; i< pins.length ;i+10){ var vehlatlng = new google.maps.LatLng(pins[i].lat, pins[i].long) ; var trace_marker = new google.maps.Marker({ map: map, position: vehlatlng, icon: image_trace }); trace_marker.tooltip_html = '<div class="tooltip">' + 'Date : ' + pins[i].date + '<br>' + 'Vitesse : ' + pins[i].vitesse + ' km/h' + '<br>' + '<\/div>'; trace_markers.push(trace_marker); trace_marker[i].setMap(map); Liste_Points.push(trace_marker.getPosition()); TraceBounds.extend(trace_marker.position); } } if (pins.length < 200){ for ( var i=0;i< pins.length ;i++){ var vehlatlng = new google.maps.LatLng(pins[i].lat, pins[i].long) ; var trace_marker = new google.maps.Marker({ map: map, position: vehlatlng, icon: image_trace }); trace_marker.tooltip_html = '<div class="tooltip">' + 'Date : ' + pins[i].date + '<br>' + 'Vitesse : ' + pins[i].vitesse + ' km/h' + '<br>' + '<\/div>'; trace_markers.push(trace_marker); trace_marker[i].setMap(map); Liste_Points.push(trace_marker.getPosition()); TraceBounds.extend(trace_marker.position); } }
Multiple Markers, Single Info Window, Anchored to the bottom of the map
I am having trouble rendering a google map infowindow anchored with multiple markers. I am using MVC 3 and javascript to render the map, the map renders fine, as well as relative info windows. But I want the info window to be displayed at the bottom of the map, rather than relative to the marker. The starting point for each map could be different based on the country used for search. My javascript is below (which is working)> i just don't know how to change the infowindow: function initializeMap() { var countryID = $("#CountryID :selected").val(); var cityID = $("#cities :selected").val(); var regionID = $("#regions :selected").val(); var locationtypeID = $("#LocationTypeID :selected").val(); var filtertype = $("#filtertype").val(); var latlng; $.ajax({ type: "GET", url: "/ajaxcalls/getCentre", data: "cid=" + countryID, datatype: "json", success: function (result) { var gpscoords = (result).split(","); latlng = new google.maps.LatLng(gpscoords[0], gpscoords[1]); }, error: function (req, status, error) { } }); var myOptions = { zoom: 7, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); $.ajax({ type: "GET", url: "/ajaxcalls/getmarkers", data: "cid=" + countryID + "&rid=" + regionID + "&xid=" + cityID + "&tid=" + locationtypeID + "&filterType=" + filtertype, datatype: "json", success: function (result) { var infowindow = null; infowindow = new google.maps.InfoWindow({ content: "holding..." }); $.each(result, function (i, item) { var gpscoords = (item.GPSCoOrds.toString()).split(","); var mpos = new google.maps.LatLng(gpscoords[1], gpscoords[0]); var markerobject = ""; if (item.LocationTypeID == 2) { markerobject = "atm.png"; } else { markerobject = "bank.png"; } marker = new google.maps.Marker({ map: map, position: mpos, draggable: false, icon: "/content/mapicons/" + markerobject, title: item.Designation.toString() + " " + item.Address.toString() }); google.maps.event.addListener(marker, 'mouseover', function () { var windowcontent = "<div>Site Name: "; windowcontent = windowcontent + item.Designation + "</div>"; windowcontent = windowcontent + "<div>Address: " + item.Address + "</div>"; windowcontent = windowcontent + "<div>Contact Number: " + item.contactNumber + "</div>"; windowcontent = windowcontent + "<div>Branch Type: " + item.BranchType + "</div>"; windowcontent = windowcontent + "<div>Network Provider: " + item.NetworkProvider + "</div>"; windowcontent = windowcontent + "<div>Network Capacity: " + item.NetworkCapacity + "</div>"; infowindow.setContent(windowcontent); infowindow.open(map, this); }); }); }, error: function (req, stats, error) { alert(error); } }); } $(document).ready(function () { $("#mapupdater").click(function () { initializeMap(); }); }); Any help would be appreciated.
Don't anchor the infowindow to the marker with infowindow.open(map, this); Just do infowindow.open(map); However you'll still have to tell the infowindow where to appear. Either use the position attribute when creating it, or setPosition() after it's been created.
how to make a clickable phone number in iphone application by using javascript and html5 applied mysql database?
and I know that 1-801-555-1212 will make this certain number be clickable. I tested it and it works fine. My question is if I do have a variable phone which will call from database via mysql, how can I make this variable be clickable? I've tried a lot of way but none of them work. I used the following link to create a store locator page http://code.google.com/apis/maps/articles/phpsqlsearch.html and my original code is here. <!DOCTYPE html> Store Locate <script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAtwc3xGzBndDAUOSllG2AkxTnNPa_SyQGEldLwhmK8Cfx_H4lPRTZuzWKU2EDVO1MyUD3Ym_0fNuEiw" type="text/javascript"></script> <script src="jquery-1.5.2.min.js"></script> <script> // One-shot position request. navigator.geolocation.getCurrentPosition(showMap); function showMap(position) { // Show a map centered at (position.coords.latitude, position.coords.longitude). } map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 13); <script type="text/javascript"> //<![CDATA[ var map; var geocoder; function load() { if (GBrowserIsCompatible()) { geocoder = new GClientGeocoder(); map = new GMap2(document.getElementById('map')); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(40, -100), 4); } } function searchLocations() { var address = document.getElementById('addressInput').value; geocoder.getLatLng(address, function(latlng) { if (!latlng) { alert(address + ' not found'); } else { searchLocationsNear(latlng); } }); } function searchLocationsNear(center) { var radius = document.getElementById('radiusSelect').value; var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius; GDownloadUrl(searchUrl, function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName('marker'); map.clearOverlays(); var sidebar = document.getElementById('sidebar'); sidebar.innerHTML = ''; if (markers.length == 0) { sidebar.innerHTML = 'No results found.'; map.setCenter(new GLatLng(40, -100), 4); return; } var bounds = new GLatLngBounds(); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute('name'); var address = markers[i].getAttribute('address'); var distance = parseFloat(markers[i].getAttribute('distance')); var phone = markers[i].getAttribute('phone'); var url = markers[i].getAttribute('url'); var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')), parseFloat(markers[i].getAttribute('lng'))); var marker = createMarker(point, name, address, phone, url); map.addOverlay(marker); var sidebarEntry = createSidebarEntry(marker, name, address, distance, phone, url); sidebar.appendChild(sidebarEntry); bounds.extend(point); } map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds)); }); } function createMarker(point, name, address, phone, url) { var marker = new GMarker(point); var html = '<b>' + name + '</b> <br/>' + address + '</b> <br/>' + phone + '</b> <br/>' + url + '</b> <br/>' GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } function createSidebarEntry(marker, name, address, distance, phone, url) { var div = document.createElement('div'); var html = '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/>' + address + '</b> <br/>' + phone + '</b> <br/>' + url; div.innerHTML = html; div.style.cursor = 'pointer'; div.style.marginBottom = '5px'; GEvent.addDomListener(div, 'click', function() { GEvent.trigger(marker, 'click'); }); GEvent.addDomListener(div, 'mouseover', function() { div.style.backgroundColor = '#eee'; }); GEvent.addDomListener(div, 'mouseout', function() { div.style.backgroundColor = '#fff'; }); return div; } //]]> </script> I add a variable phone which will call from mysql. and my question is how can I make it clickable?...I tried to modify following code in many ways function createSidebarEntry(marker, name, address, distance, phone, url) { var div = document.createElement('div'); var html = '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/>' + address + '</b> <br/>' + phone + '</b> <br/>' + url; but I always just got code error. anyone can help me?? thanks
You can surround the phone number by a "a" tag with a href="tel:{PHONE NUMBER}" How to mark-up phone numbers?