We Keep Coding

Laravel, how to call route from javascript function, using Google Map Marker

I'm trying to create a marker/direction pointer to route on the Google map, but I don't know how to.
I have added several markers with the information window, and within that window, the title should redirect me to a route.
I hope you can help me. Thank you very much! :)
var data = '{!! json_encode($destinos) !!}';
//console.log(data);
data = JSON.parse(data);
//THIS IS THE HTML INFO IN THE MARKER
function htmlInfo(name, descrip){
var text = "";
text += '<div class="content_maps">' ;
text += '<a href="{{ route(\'destinos.detalle\', [\'id\' => data.id]) }}" ><h5>'+name+'</h5></a>' ;
text += '<p>'+descrip+'</p>' ;
text += '</div>';
return text;
}

How to show corresponding infoWindow when click marker on Google map with javascript and JSTL

I am facing about the problem of displaying markers and infoWindows on a Google Map using JSTL in JSP (Taglib)
I have a listener setup in order to click a marker, the corresponding info window will shows (attached to the marker).
My problem is: I click any marker it only show 1 infowindow, when I another marker it can not show corresponding marker and infowindow..
my script:
<script>
function initMap() {
var latLng = {lat:21.027763, lng:105.834160};
var map = new google.maps.Map(document.getElementById('googleMap'), {
mapTypeControlOptions: {
mapTypeIds: ['mystyle', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN]
},
zoom: 13,
center: latLng,
mapTypeId: 'mystyle'
});
map.mapTypes.set('mystyle', new google.maps.StyledMapType(myStyle, { name: 'My Style' }));
<c:forEach var="item" items="${itemList}">
var content = '<div id="div-main-infoWindow">' +
'<div id="iw-container">' +
'<div class="iw-title">' +
'<img src="${pageContext.request.contextPath}/photo/<c:out value="${item.THUMBNAIL_1}"/>" class="imgMarkerLabel">' +
'</div>' +
'<h2><c:out value='${item.NAME}'/></h2>' +
'<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>' +
'</div>' +
'</div>' +
'</div>';
var infowindow = new google.maps.InfoWindow({
content: content,
maxWidth: 291
});
google.maps.event.addListener(infowindow, 'domready', function () {
$('#div-main-infoWindow').closest('.gm-style-iw').parent().addClass('custom-iw');
});
var marker = new google.maps.Marker({
position: {lat: <c:out value="${item.LAT}"/>, lng: <c:out value="${item.MAPLONG}"/>},
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
</c:forEach>
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
I wish when I click any marker, that marker will show corresponding infowindow, and it will show property of list within infowindow
So, how can I access the info windows outside of this listener?

You cannot mix JSTL with javascript like that. JSTL is rendered on the server side, which means the server will run that code before it runs the javascript. Javascript is rendered on the client side.
You can test this yourself by doing this:
<button onclick="doTest();">Test</button>
<script>
function doTest() {
//this should only run when we click on the button right?
<c:set var="testMe" value="Wrong." scope="session" />
}
</script>
<p>There should be no text below until we click the button right?</p>
<h1><c:out value="${testMe}"/></h1>
So you need to relook at your code keeping this in mind, that any jstl you have in your javascript will run first. This is why it will only show one infowindow.
What you need to do in order for this to work is pass your ${itemList} to a hidden input.
<input type="hidden" value="${itemList}" id="getItemList">
then in javascript you can access it and create the loop with javascript not jstl. Although you will need to convert the object to a string or json string first in order to use it in javascript.
You could do that with something like this in your java:
String someObjectAsJson = new Gson().toJson(itemList);
request.setAttribute("someObjectAsJson", someObjectAsJson);
then in js (instead of input method):
<script>var foo = ${someObjectAsJson};</script>
Note: that the EL in the javascript above works because the output is syntactically valid. If you don't make it a string first in your java you need to do it like this:
<script>var foo = '${foo}';</script>

Adding image src in the inline html under javascript

Hi I am showing a infoWindow on click of the marker on google map , the content of the infoWindow is an inline html along with img tag the src of the image changes for every marker,I want to get the img src dynamicaly the code what iv done is
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'<img id="image" alt="No Photograph to Display" src="" width="400px" height="250px" />'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">'+title+'</h1>'+
'<div id="bodyContent">'+
'<p>'+probdesc+'</p><br>'+
'<p><b>Open Date:</b>'+opendate+'</p><br>'+
'<p><b>Status:</b>'+status+'</p><br>'+
'</div>'+
'</div>';
the image tag must get the src value must be replaced by url value which contains the dynamic path of the image
var url = '<%=imageURL %>'+ "&<portlet:namespace/>imagepath=" + imagepath;

You can use jQuery for it, after print the HTML code on your page:
$("#image").attr("src", url); //"url" is your var.
Only Javascript:
document.getElementById("image").setAttribute("src", url);
document.getElementById("image").src = url; //it works too - http://www.w3schools.com/js/js_htmldom_html.asp
Just for make it simple, after Paul S' comment. If you don't print the HTML on your page, the "attr" code wouldn't work. For print the HTML code on your page, you can use:
$("#anchor_element").html(contentString);
// and then
$("#image") .....
Using pure Javascript:
document.getElementById("anchor").innerHTML = contentString;
// and then
document.getElementById("image")......

Google-maps:Triggering event in infowindow

Trying to trigger an event in the infowindow..i have the following content string
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">'+data.name+'</h2>'+
'<div id="bodyContent">'+
'<p>'+data.address+'</p>'+
'<p></p>'+
'<p>Do You Want to change search location</p>'+
'<input type="button" value="click me" onclick="alert(\"infoWindow\")">'+
'</div>'+
'</div>';
here the alert statement is no triggering..Actually i need to implement a event that whenever i click the button i need to store that particular coordinates into local storage
any suggestions would be appreciated

Change '<input type="button" value="click me" onclick="alert(\"infoWindow\")">'+
To '<input type="button" value="click me" onclick="saveData()">'+
saveData() Function used latlng from marker which should be set GLOBAL (At start of script)
function saveData() {
var latlng = marker.getPosition();
var lat=latlng.lat();
var lng=latlng.lng();
//store data
}
EDIT
Changed from(cut & paste error in origonal)
var lat=" + latlng.lat();
var lng=" + latlng.lng();

How to write into div using javascript

I want to make a for example content variable in javascript which will have a html tags inside with certain values.
How can I put that in the div when button is pressed.
For example :
This is a content which I want to use:
var contentString = '<div id="info">'+
'<h2><b> Info:</b></h2>'+
'<div id="bodyContent">'+
'<div style=width:220px;display:inline-block;>'+
'<p> Name: '+ this.name + '</p>' +
'<p> Last name: '+ this.last+ '</p>' +
'<p>
'</div>'+
'</div>'+
'</div>'+
'</form>';
And I want to put it into : <div id=something"></div>
In javascript I can have something like:
$("#button").on('click', function() {
// What to put in here?
});

How can I put that in the div when button is pressed.
Like this:
$("#button").on('click', function() {
$('#something').html(contentString);
});
More info about html();
http://api.jquery.com/html/

It goes like this:
$("#button").on('click', function() {
$("#something").html(contentString);
});

If I'm not misunderstanding, then this will work:
$("#button").on('click', function() {
$('#something').html(contentString);
});
This does, of course, assume that you have an element with an id of button (though I assume you do, otherwise you wouldn't have put that jQuery).
JS Fiddle demo.
References:
html().

You should fix up your markup. You have unbalanced elements, and you can't have new lines in the string without escaping it. Try this instead:
var contentString = '<div id="info">'+
'<h2><b style="text-indent: 40px">Info:</b></h2>'+
'<div id="bodyContent">'+
'<div style="width:220px;display:inline-block;">'+
'<p style="text-indent: 1em">Name: '+ this.name + '</p>' +
'<p style="text-indent: 1em">Last name: '+ this.last+ '</p>' +
'</div>';
Note that I skipped the and replaced them with style attributes. You really should put these styles in a stylesheet, though.
$("#button").on('click', function() {
$('#something').html(contentString);
});
Keep in mind that the variables in contentString will not be evaluated when the click event on the button fires, meaning that this.name and this.last will not change. Do you need to update these values on click as well?