Trying to add button in googlemap infoWindow - javascript
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
});
Related
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.
Undefined on tohere and fromhere message windows in google maps API V3
I have a map loading on my site (I am not a java coder this is code i have found on the internet). I have figured out mostly how to get it working for my needs. However when you click on the To Here or From Here links instead of populating the address from the marker over it shows as undefined in the message window. I am sure this is something easy I am missing but any help is appreciated var directionsDisplay = new google.maps.DirectionsRenderer(); var directionsService = new google.maps.DirectionsService(); // arrays to hold copies of the markers and html used by the side_bar // because the function closure trick doesnt work there var gmarkers = []; var htmls = []; // arrays to hold variants of the info window html with get direction forms open var to_htmls = []; var from_htmls = []; // global "map" variable var map = null; var infowindow = new google.maps.InfoWindow({ size: new google.maps.Size(150, 50) }); function initialize() { var location = new google.maps.LatLng(33.3440017700195, -111.96068572998); var mapOptions = { center: location, zoom: 14, scrollwheel: true }; map = new google.maps.Map(document.getElementById("map"), mapOptions); directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById("map")); google.maps.event.addListener(map, 'click', function() { infowindow.close(); }); var image = { url: 'http://maps.google.com/mapfiles/ms/micons/green.png' }; var marker = new google.maps.Marker({ position: new google.maps.LatLng(33.34396, -111.960606), map: map, animation: google.maps.Animation.DROP, icon: image, Title: 'Fusion Formulations<br>1430 W Auto Drive<br>Tempe, AZ 85284' }); var i = gmarkers.length; latlng = location; // The info window version with the "to here" form open to_htmls[i] = html + '<b>To here<\/b> - <a href="javascript:fromhere(' + i + ')">From here<\/a>' + '<br>Start address:<form action="javascript:getDirections()">' + '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' + '<INPUT value="Get Directions" TYPE="button" onclick="getDirections()"><br>' + 'Walk <input type="checkbox" name="walk" id="walk" /> Avoid Highways <input type="checkbox" name="highways" id="highways" />' + '<input type="hidden" id="daddr" value="' + latlng.lat() + ',' + latlng.lng() + '"/>'; // The info window version with the "from here" form open from_htmls[i] = html + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here<\/a> - <b>From here<\/b>' + '<br>End address:<form action="javascript:getDirections()">' + '<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' + '<INPUT value="Get Directions" TYPE="SUBMIT"><br>' + 'Walk <input type="checkbox" name="walk" id="walk" /> Avoid Highways <input type="checkbox" name="highways" id="highways" />' + '<input type="hidden" id="saddr" value="' + latlng.lat() + ',' + latlng.lng() + '"/>'; // The inactive version of the direction info var html = marker.getTitle() + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here<\/a> - <a href="javascript:fromhere(' + i + ')">From here<\/a>'; var contentString = html; google.maps.event.addListener(marker, 'click', function() { map.setZoom(15); map.setCenter(marker.getPosition()); infowindow.setContent(contentString); infowindow.open(map, marker); }); // save the info we need to use later for the side_bar gmarkers.push(marker); htmls[i] = html; } google.maps.event.addDomListener(window, 'load', initialize); // ===== request the directions ===== function getDirections() { // ==== Set up the walk and avoid highways options ==== var request = {}; if (document.getElementById("walk").checked) { request.travelMode = google.maps.DirectionsTravelMode.WALKING; } else { request.travelMode = google.maps.DirectionsTravelMode.DRIVING; } if (document.getElementById("highways").checked) { request.avoidHighways = true; } // ==== set the start and end locations ==== var saddr = document.getElementById("saddr").value; var daddr = document.getElementById("daddr").value; request.origin = saddr; request.destination = daddr; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } else alert("Directions not found:" + status); }); } // This function picks up the click and opens the corresponding info window function myclick(i) { google.maps.event.trigger(gmarkers[i], "click"); } // functions that open the directions forms function tohere(i) { //gmarkers[i].openInfoWindowHtml(to_htmls[i]); infowindow.setContent(to_htmls[i]); infowindow.open(map, gmarkers[i]); } function fromhere(i) { //gmarkers[i].openInfoWindowHtml(from_htmls[i]); infowindow.setContent(from_htmls[i]); infowindow.open(map, gmarkers[i]); }
You aren't defining the html variable which is used for that first field of the HTML in the infowindow. // The info window version with the "to here" form open to_htmls[i] = html + '<b>To here<\/b> - <a href="javascript:fromhere(' + i + ')">From here<\/a>' + // ... '"/>'; That should be the HTML you want displayed, in the case or your example, this works for me: html = 'Fusion Formulations<br>1430 W Auto Drive<br>Tempe, AZ 85284<br>'; Also, you have an issue with the title property of the marker. You are assigning the Title property, which is not the same (javascript is case sensitive). (Also, FYI, the MarkerOptions title property doesn't support HTML markup, so you shouldn't include HTML markup in the title string) proof of concept fiddle code snippet: var directionsDisplay = new google.maps.DirectionsRenderer(); var directionsService = new google.maps.DirectionsService(); // arrays to hold copies of the markers and html used by the side_bar // because the function closure trick doesnt work there var gmarkers = []; var htmls = []; // arrays to hold variants of the info window html with get direction forms open var to_htmls = []; var from_htmls = []; // global "map" variable var map = null; var infowindow = new google.maps.InfoWindow({ size: new google.maps.Size(150, 50) }); function initialize() { var location = new google.maps.LatLng(33.3440017700195, -111.96068572998); var mapOptions = { center: location, zoom: 14, scrollwheel: true }; map = new google.maps.Map(document.getElementById("map"), mapOptions); directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById("map")); google.maps.event.addListener(map, 'click', function() { infowindow.close(); }); var image = { url: 'http://maps.google.com/mapfiles/ms/micons/green.png' }; var marker = new google.maps.Marker({ position: new google.maps.LatLng(33.34396, -111.960606), map: map, animation: google.maps.Animation.DROP, icon: image, Title: 'Fusion Formulations<br>1430 W Auto Drive<br>Tempe, AZ 85284' }); html = 'Fusion Formulations<br>1430 W Auto Drive<br>Tempe, AZ 85284<br>'; var i = gmarkers.length; latlng = location; // The info window version with the "to here" form open to_htmls[i] = html + '<b>To here<\/b> - <a href="javascript:fromhere(' + i + ')">From here<\/a>' + '<br>Start address:<form action="javascript:getDirections()">' + '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' + '<INPUT value="Get Directions" TYPE="button" onclick="getDirections()"><br>' + 'Walk <input type="checkbox" name="walk" id="walk" /> Avoid Highways <input type="checkbox" name="highways" id="highways" />' + '<input type="hidden" id="daddr" value="' + latlng.lat() + ',' + latlng.lng() + '"/>'; // The info window version with the "from here" form open from_htmls[i] = html + '<a href="javascript:tohere(' + i + ')">To here<\/a> - <b>From here<\/b>' + '<br>End address:<form action="javascript:getDirections()">' + '<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' + '<INPUT value="Get Directions" TYPE="SUBMIT"><br>' + 'Walk <input type="checkbox" name="walk" id="walk" /> Avoid Highways <input type="checkbox" name="highways" id="highways" />' + '<input type="hidden" id="saddr" value="' + latlng.lat() + ',' + latlng.lng() + '"/>'; // The inactive version of the direction info var html = marker.getTitle() + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here<\/a> - <a href="javascript:fromhere(' + i + ')">From here<\/a>'; var contentString = html; google.maps.event.addListener(marker, 'click', function() { map.setZoom(15); map.setCenter(marker.getPosition()); infowindow.setContent(contentString); infowindow.open(map, marker); }); // save the info we need to use later for the side_bar gmarkers.push(marker); htmls[i] = html; } google.maps.event.addDomListener(window, 'load', initialize); // ===== request the directions ===== function getDirections() { // ==== Set up the walk and avoid highways options ==== var request = {}; if (document.getElementById("walk").checked) { request.travelMode = google.maps.DirectionsTravelMode.WALKING; } else { request.travelMode = google.maps.DirectionsTravelMode.DRIVING; } if (document.getElementById("highways").checked) { request.avoidHighways = true; } // ==== set the start and end locations ==== var saddr = document.getElementById("saddr").value; var daddr = document.getElementById("daddr").value; request.origin = saddr; request.destination = daddr; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } else alert("Directions not found:" + status); }); } // This function picks up the click and opens the corresponding info window function myclick(i) { google.maps.event.trigger(gmarkers[i], "click"); } // functions that open the directions forms function tohere(i) { //gmarkers[i].openInfoWindowHtml(to_htmls[i]); infowindow.setContent(to_htmls[i]); infowindow.open(map, gmarkers[i]); } function fromhere(i) { //gmarkers[i].openInfoWindowHtml(from_htmls[i]); infowindow.setContent(from_htmls[i]); infowindow.open(map, gmarkers[i]); } html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px } <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map"></div> (note the actual directions request doesn't work in the code snippet due to a security restriction: Blocked form submission to 'javascript:getDirections()' because the form's frame is sandboxed and the 'allow-forms' permission is not set., it does work in the fiddle)
Save Button Not attached to the Right InfoWindow, Google Map
After adding a delete function and adding my markers into an array the save button/ save function is no longer attached to the right infowindow on my google map. If I open two infowindows, enter the info in both, then click save on the first one I opened it will update the last infowindow created with "You submitted" and it will save it twice. I tried a few different things based on different stack overflow posts including adding an iterator around the initialization of my infowindow and also adding an external function for adding a marker, but this did not work. I also made sure my global variables (like map) are declared before initializing. I am a nube that has been struggling for days. I'm sure the issue surrounds my confusion about how the infowindow is attached to the markers in the array. My code is in the snippet below. var markers = []; var uniqueId = 1; var marker; var infowindow; var map; var html; function initialize() { var mapOptions = { zoom: 8, center: { lat: 48.591130, lng: -119.682349 }, mapTypeControlOptions: { mapTypeIds: ['roadmap'] } }; var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); //Attach click event handler to the map. google.maps.event.addListener(map, 'click', function(e) { //Determine the location where the user has clicked. var location = e.latLng; //Create a marker and placed it on the map. var marker = new google.maps.Marker({ position: location, map: map, }); //Set unique id marker.id = uniqueId; uniqueId++; markers.push(marker); //Attach click event handler to the marker. google.maps.event.addListener(marker, "click", function(e) { html = "<p style='color:#173e43;font-size:120%;font-weight:bold;text-align:center; width:150pxs; margin-top: 2px; margin-bottom:4px' >Add A Comment</p>" + "<table>" + "<tr><td>Issue/Idea:</td> <td> <textarea rows='1' cols='26' id='name' style='height: 30px; width:150px' name='reply'></textarea></td> </tr>" + "<tr><td>Address:</td> <td><input type='text' id='address' style='width:150px'/></td> </tr>" + "</td></tr>"; html += "<tr><td><input type = 'button' value = 'Delete' onclick = 'DeleteMarker(" + marker.id + ");' value = 'Delete' /></td>" + "<td><input type='button' value='Submit' onclick='saveData(" + marker.id + ")'/></td></tr>"; infowindow = new google.maps.InfoWindow({ content: html }); infowindow.setContent(html); infowindow.open(map, marker); }); //Add marker to the array. markers.push(marker); }); }; function DeleteMarker(id) { //Find and remove the marker from the Array for (var i = 0; i < markers.length; i++) { if (markers[i].id == id) { //Remove the marker from Map markers[i].setMap(null); //Remove the marker from array. markers.splice(i, 1); return; } } }; function saveData(id) { for (var i = 0; i < markers.length; i++) { if (markers[i].id == id) { var name = escape(document.getElementById("name").value); var address = escape(document.getElementById("address").value); var latlng = markers[i].getPosition(); var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address + "&lat=" + latlng.lat() + "&lng=" + latlng.lng(); downloadUrl(url, function(data, responseCode) { if (responseCode == 200 && data.length >= 1) { document.getElementById("message").innerHTML = "Location added. Contents: name=" + name +", address=" + address+ " latlng=" +latlng; } }); infowindow.setContent("You submitted Contents: name=" + name +", address=" + address+ " latlng=" +latlng); } } } 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.responseText, request.status); } }; request.open('GET', url, true); request.send(null); function doNothing() {} } google.maps.event.addDomListener(window, 'load', initialize); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script> <div id="dvMap" style="width: 1000px; height: 490px"></div> <div id="message"></div>
Ok, so I moved the push statement so that it is pushing the marker to the array after I declare the infowindow. This stopped the save function from saving the html contents multiple times. So the save is working great now, the only problem is my ability to update the right infowindow with the message "You submitted..." It is still just updating the last infowindow I opened with that message. var markers = []; var uniqueId = 1; var marker; var infowindow; var map; var html; function initialize() { var mapOptions = { zoom: 8, center: { lat: 48.591130, lng: -119.682349 }, mapTypeControlOptions: { mapTypeIds: ['roadmap'] } }; var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); //Attach click event handler to the map. google.maps.event.addListener(map, 'click', function(e) { //Determine the location where the user has clicked. var location = e.latLng; //Create a marker and placed it on the map. var marker = new google.maps.Marker({ position: location, map: map, }); //Set unique id marker.id = uniqueId; uniqueId++; //Attach click event handler to the marker. google.maps.event.addListener(marker, "click", function(e) { html = "<p style='color:#173e43;font-size:120%;font-weight:bold;text-align:center; width:150pxs; margin-top: 2px; margin-bottom:4px' >Add A Comment</p>" + "<table>" + "<tr><td>Issue/Idea:</td> <td> <textarea rows='1' cols='26' id='name' style='height: 30px; width:150px' name='reply'></textarea></td> </tr>" + "<tr><td>Address:</td> <td><input type='text' id='address' style='width:150px'/></td> </tr>" + "</td></tr>"; html += "<tr><td><input type = 'button' value = 'Delete' onclick = 'DeleteMarker(" + marker.id + ");' value = 'Delete' /></td>" + "<td><input type='button' value='Submit' onclick='saveData(" + marker.id + ")'/></td></tr>"; infowindow = new google.maps.InfoWindow({ content: html }); infowindow.setContent(html); infowindow.open(map, marker); }); //Add marker to the array. markers.push(marker); }); }; function DeleteMarker(id) { //Find and remove the marker from the Array for (var i = 0; i < markers.length; i++) { if (markers[i].id == id) { //Remove the marker from Map markers[i].setMap(null); //Remove the marker from array. markers.splice(i, 1); return; } } }; function saveData(id) { for (var i = 0; i < markers.length; i++) { if (markers[i].id == id) { var name = escape(document.getElementById("name").value); var address = escape(document.getElementById("address").value); var latlng = markers[i].getPosition(); var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address + "&lat=" + latlng.lat() + "&lng=" + latlng.lng(); downloadUrl(url, function(data, responseCode) { if (responseCode == 200 && data.length >= 1) { document.getElementById("message").innerHTML = "Location added. Contents: name=" + name +", address=" + address+ " latlng=" +latlng; } }); infowindow.setContent("You submitted Contents: name=" + name +", address=" + address+ " latlng=" +latlng); } } } 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.responseText, request.status); } }; request.open('GET', url, true); request.send(null); function doNothing() {} } google.maps.event.addDomListener(window, 'load', initialize); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script> <div id="dvMap" style="width: 1000px; height: 490px"></div> <div id="message"></div>
info window in for loop not functioning
I am trying to open some info windows on some markers. I am following another an example here. I am not being thrown any errors in the console. I would expect the info windows to open but don't see anything. I have tried making sure all the variables are global, moving around where I call the event listener and the structure of the for loop where I call both the markers and the info window. I have tried switching out markers and marker in the listening event but neither has worked. What am I doing wrong? Fiddle here. HTML: <head> <script src="http://maps.googleapis.com/maps/api/js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> </head> <body> <h1 style="text-align: center;">Parking Garage Availability</h1> <div id="map"></div> <ul id="list"></ul> <p id="GAR57"></p> <p id="GAR31"></p> <p id="GAR60"></p> <p id="GAR61"></p> </body> CSS: #map { height: 300px; width: 500px; margin: 0 auto; border: 1px solid black; } JavaScript: var map; var mapProp; var marker; var markers; var url; var myData; var time; var available; var total; var facility; var position; var infoWindow; function initialize() { mapProp = { center:new google.maps.LatLng(38.994890, -77.063416), zoom:13, mapTypeId:google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map"),mapProp); } $(document).ready(function() { initialize(); url = 'https://data.montgomerycountymd.gov/resource/qahs-fevu.json'; $.getJSON(url, function(data) { myData = data; console.log(myData); for (i = 0; i < myData.length; i++) { time = (myData[i].asofdatetime).slice(11); available = myData[i].space_count; total = myData[i].total_spaces; facility = myData[i].facilitynumber; if (facility === "GAR 57") { facility = "4841 Bethesda Avenue (Elm Street)"; $('#GAR57').html('As of ' + time + ' there are ' + available + ' of ' + total + ' at ' + facility); } else if (facility === "GAR 31") { facility = "7171 Woodmont Avenue"; $('#GAR31').html('As of ' + time + ' there are ' + available + ' of ' + total + ' at ' + facility); } else if (facility === "GAR 60") { facility = "921 Wayne Avenue"; $('#GAR60').html('As of ' + time + ' there are ' + available + ' of ' + total + ' at ' + facility); } else { facility = "801 Ellsworth Drive"; $('#GAR61').html('As of ' + time + ' there are ' + available + ' of ' + total + ' at ' + facility); } } }); //set markers markers = [ ["4841 Bethesda Avenue (Elm Street)", 38.980724, -77.0964], ["7171 Woodmont Avenue", 38.980097, -77.093662], ["921 Wayne Avenue", 38.995740, -77.025652], ["801 Ellsworth Drive",38.997778, -77.025071] ]; infoWindow = new google.maps.InfoWindow(); for (var i = 0; i < markers.length; i++) { position = new google.maps.LatLng(markers[i][1], markers[i][2]); marker = new google.maps.Marker({ position: position, map: map, title: markers[i][0] }); google.maps.event.addListener(markers, 'click', function () { infoWindow.setcontent("<div>Hello, World</div>"); infoWindow.open(map, this); }); }; });
Change the last code to this google.maps.event.addListener(marker, 'click', function () { infoWindow.setContent("<div>Hello, World</div>"); infoWindow.open(map, this); }); marker instead of markers, and setContent instead of setcontent updated fiddle
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?