I'm adding some info windows on my map with clicking button:
$(document).ready(function() {
$("input:#ekle").click(function(){//balon ekle ve listeye ekle
infoWindow3 = new google.maps.InfoWindow();
var en=$("input:#x").val();
var boy=$("input:#y").val();
var yazi=$("input:isim2").val();
var windowLatLng3 = new google.maps.LatLng(en,boy);
infoWindow3.setOptions({
content: yazi,
position: windowLatLng3,
});
infoWindow3.open(map);
ekle(yazi);//adding Infowindow contecnt(value) to listbox
});
So I can creating InfoWindows.Now I will closing my InfoWindow with clicking an other button :
function cikar(){//listeden cikarma
var cikarilacak=$('#liste option:selected').val();//looking listbox selected item value
$("#liste option[value='"+cikarilacak+"']").remove();
//at this step I will close my InfoWındow where I selected it's value from listbox
}
I will close InfoWindow which I selected it's value from listbox.what can I do
pass the infoWindow-instance as argument to the function that creates the option.
When you create the option, store the reference to the infoWindow with the option(you e.g. may use $.data()).
It's easy then to retrieve the reference to the infoWindow in cikar() and to close the infoWindow.
Related
After loading The heremap i set markers with custom image on it. Then After click in the marker i'm getting the bubble popup. I want to change the marker icon when click on it. How can i change the marker icon when click on it?
Code for showing bubble after click the marker as given below.
map.addObject(group);
// add 'tap' event listener, that opens info bubble, to the group
group.addEventListener('tap', function (evt) {
// event target is the marker itself, group is a parent event target
// for all objects that it contains
var bubble = new H.ui.InfoBubble(evt.target.getPosition(), {
// read custom data
content: evt.target.getData()
});
// show info bubble
ui.addBubble(bubble);
}, false);
In my application I'm changing the original color of the marker when it is clicked. Have you tried using a markerTemplate, meaning a variable where you store the svg for your marker as a string?
var markerTemplate = '<svg xmlns="http://www.w3.org/2000/svg" width="28px" height="36px">... fill="${COLOR}"/></svg>'
You can then use e.g. fill="${COLOR}" in this string and in your EventListner replace this placeholder with a new color markerTemplate.replace('${COLOR}', 'rgba(231, 0, 0, 0.7)');
Hope this helps
I want show the info window for google maps. But the data or view is a ui5 view as below,
var oView = sap.ui.view({
type : sap.ui.core.mvc.ViewType.XML,
viewName :"com.example.view.ListView"
});
And this view is perfect.
Mainly I have the google info window and I need to place this inside that info window as follows,
var infowindow = new google.maps.InfoWindow({
content: view, //Here I am getting below error
position: coordinate
});
infowindow.open(map);
So i am getting
InvalidValueError: setContent: not a string; and Element-
In this I know I can place a domNode or string inside the google info window's content. So I need to know how can we convert this ui5 view to domNode or any other solution.
You can get the DOM Node of a SAPUI5 View or Control by using the method getDomRef
var infowindow = new google.maps.InfoWindow({
content: view.getDomRef(),
position : coordinate
});
infowindow.open(map);
Please be aware that a SAPUI5 View/Control only has a DOM Reference after it was first rendered. Furthermore after a potential rerendering you might have to re-apply the above code.
BR Chris
I have a repeater that outputs javascript for a Google Map
var marker5450635326848240000000 = new google.maps.Marker({
position: new google.maps.LatLng(31.2272,-85.4072),
map: map,
title: '4/10/2014'
});
markers.push(marker5450635326848240000000);
I have the map plus a pulldown inside an updatepanel. When the user changes the pulldown the updatepanel updates everything, but the pins on the map do not change.
Here is the example: http://prod.windcreekhospitality.bkwld.onyxtek.com/Giving-Back/Good-on-the-Go.aspx
I know it is the update panel because when I take the panel out of the equation it works.
http://windcreekhospitality.com/Giving-Back/Good-on-the-Go
Where is the whole code for the ascx http://pastebin.com/FqX0PndG
This is an ascx control and it is build for use with Kentico CMS. This limits my choices.
I had a similar problem recently trying to integrate a captcha script inside of an UpdatePanel.
Script blocks inside of an UpdatePanel only get recognized by the browser on the initial page load. Due to the way UpdatePanels work, any new script tags won't be injected into the browser correctly for them to actually be executed.
One work-around will be to use the ScriptManager.RegisterStartupScript method to register the script block dynamically from code-behind. The ASP.NET's ajax library will then handle registering the javascript code correctly and calling it to execute.
If you pass an UpdatePanel control as the first paramter to RegisterStartupScript(), the code will be included in the rendering on the first page load, any full postbacks, and every partial postback if that UpdatePanel is being updated.
In code-behind, build the javascript as a string and then pass it to RegisterStartupScript. Example:
protected override void OnPreRender(EventArgs e)
{
var s = new StringBuilder();
s.Append(#"
var markers = [];
var currentWindow;
var myLatlng = new google.maps.LatLng(32.3617,-86.2792);
var mapOptions = {
zoom: 6,
center: myLatlng,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
$('#map-canvas').mouseleave(function(){
if(currentWindow)
currentWindow.close();
});
google.maps.event.addListener(map, 'mousedown', function() {
if(currentWindow)
currentWindow.close();
} );");
// TODO: manually do whatever that cms:CMSRepeater control would be done to generate the additional JS and append it to the StringBuilder.
ScriptManager.RegisterClientScriptBlock(EventsUpdatePanel, GetType(), "InitMap", s.ToString(), true);
base.OnPreRender(e);
}
Better would be to separate out your function that inits the map, move it to be OUTSIDE of the UpdatePanel, and pass it as arguments the data you want it to initialize. Have the code-behind generate JS that is just a call to that function with the data as arguments.
One way our team handle this issueis by adding the following
on the Webpart(here your Map) -> Envelope->Content before
<script type="text/javascript">
function MyFunction() {
......
}
MyFunction();
Sys.Application.add_load(MyFunction);
</script>
Also , bring the repeater outside the script tag(see your Pastbin code) and call the pageLoad method as described up.
I'm using Google places AutoComplete on a textbox and it's essentially working, picking the locations and stuffing them into the textboxes.
The problem is that I want to only stuff the selection name - not the full name + address formatting out of the list that the AutoComplete list produces. I can't seem to find a way to override what goes into the textbox.
var $name = $("#txtName");
$name.focus();
var autocomplete = new google.maps.places.Autocomplete($name[0]);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
// explicitly update model
// but doesn't display in UI
$scope.locationData.Name = place.name;
// explicitly update the input box - doesn't update UI
$name.val(place.name);
return false; // doesn't work - updates UI
});
Basically what I'd like to do is take over the input box text assignment myself by doing the assignment myself and forcing autocomplete to not set the textbox value.
Is this possible?
Set the value with a short delay.
$('#NameBox').on('blur change', function () { $(this).val(place.name).off('blur change'); });
setTimeout(function () { $('#NameBox').val(place.name); }, 150);
Using .off() allows the user to edit the name if they wish. If you wish to only allow the places API name remove .off().
Each time the mouse is moving over a marker I display an infowindow:
var optionMarker = {position:point, map:map,icon:image,shadow:ombre};
var marker = new g.Marker(optionMarker);
var infowindow = new g.InfoWindow({content: texte});
g.event.addListener(marker, 'mouseover', function()
{
infowindow.open(map,marker);
});
If I click several markers, then I have several opened infowindows.
These infowindows are superposed.
Which could be the better way to move from a infowindow to another infowindow ?
- by clicking the selected infowindow ?
The InfoWindows don't seem to have any events associated with them (click, mouseover, etc) so the next best thing, I think, is to manipulate the markers. I set up the markers so that when the mouse is over them, the linked InfoWindow rises to the top.
http://jsfiddle.net/XCCSL/