I have an application using Google maps, currently I have a number of markers added to the page and clicking on them opens up a info window.
I also have a pagniated list of results which I would like to open the corresponding info window when clicked. Currently clicking on one of these anchors opens all of the info windows, but this is as far as I can get currently.
I have a position marker function:
positionMarkers: function(lat, lng, user) {
var marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(lat, lng),
map: map
});
if (caption == null) {
var caption = 'No caption available';
} else {
var caption = caption.text;
}
var contentString = '<div class="infoWindow"><h2>' + user + '</h2></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 284
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
$('.instaframe').bind('click', function(){
infowindow.open(map, marker);
});
}
The trouble I am having is with the bind function towards the end of the snippet. I am not sure where to go to bind the click event with just the marker being added each time the positionMarkers function runs.
Marker one
Marker two
Marker three
Help would be greatly apprecaited.
Related
I am trying to show the markers based on checkbox selection and unselection,
but the problem i am facing is when the user continuously checks and unckecks the checkbox the marker will be multiplied and shown on maps.
Can anyone help me resolving this.
My html file is below looks like this.
<input type="checkbox" style="float: right;" id="w" ng-click="getworkers()"></input>
my javascript code to show markers and clusters is below
$scope.getworkers = function(){
clearOverlays();
bounds = new google.maps.LatLngBounds();
setTimeout(function(){
if(document.getElementById('w').checked){
for(var i=0;i<$scope.responseWorker.length;i++){
var latlng = new google.maps.LatLng($scope.responseWorker[i].rep_lat,$scope.responseWorker[i].rep_lon);
lat = $scope.responseWorker[i].rep_lat;
lng=$scope.responseWorker[i].rep_lon;
name=$scope.responseWorker[i].rep_name;
address=$scope.responseWorker[i].rep_address;
bounds.extend(latlng);
marker = new google.maps.Marker({
position: latlng,
map:map,
animation : google.maps.Animation.DROP,
icon: "lib/images/green-dot.png"
});
clusterobj.markers.push(marker);
//Info window
var infowindow = new google.maps.InfoWindow();
var content = "<table>" +"<head><h4>All Worker Details</h4></head>"+
"<tr><td>Name:</td> <td> "+name+" </td> </tr>" + "<tr><td>Address:</td> <td> "+address+"</td></tr>"+ "</table>";
google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) {
return function() {
if (infowindow)
infowindow.close();
infowindow.setContent(content);
infowindow.open(map, marker);
//map.setZoom(7);
};
})(marker, content, infowindow));
};
map.fitBounds(bounds);
var mcOptions = {styles: [{
gridSize: 40,
height: 53,
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png",
width: 53
},
]};
clusterobj.mc = new MarkerClusterer(map,clusterobj.markers,mcOptions);
}
else if(!document.getElementById('w').checked)
{
clusterobj.mc.clearMarkers();
}
},2000);
};
when the user continuously checks and unckecks the checkbox the marker
will be multiplied and shown on maps
The reason that markers keep multiplying is that the code that creates markers was generated inside a for loop and is triggered everytime the checkbox is ticked. What I would suggest you to do is to:
create a function that generates your markers using a for loop. This function only runs once.
create separate function that will hide the markers when checkbox is unchecked. Another separate function that will show the markers when the checkbox is ticked.
Demo code is here.
I added code for tool tip display when hovering the pointers in the google map.It is showing the tool tip but the content is "undefined". How can put the corresponding content related to the pointer into the tool tip box.The code is :
function initialize() {
var myOptions = {
zoom: 11,
center: new google.maps.LatLng(29.7,-95.4),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("salon_map"), myOptions);
var locations = [
__newmapdetls__
];
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var image = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+location[3]+"|FF0000|000000",
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34));
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: location[0],
zIndex: location[3],
tooltip:"testinggg"+i
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow1.open(map, this);
});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow1.close(map, this);
});
var infowindow1 = new google.maps.InfoWindow({
content: "'"+this.tooltip+"'"
});
}
}
Also url is : http://myshopsalon.com/find-a-shop-salon
A couple of things I noticed when looking at your page source:
Your page is loading both jQuery 1.10.1 and 1.7.2. But it isn't using noConflict(). So these two jQuery versions are stepping on each other.
You're also loading three copies of the Maps API: two copies of version 3 and a copy of the deprecated version 2 API.
Now to your question:
Use a closure to save your variables for each iteration of the marker loop. You can do this by simply calling a function in each iteration.
Instead of using this when you call infowindow.open(), use marker. (this and marker may be the same in this context, but use marker for consistency.)
The .close() method of an infowindow does not take any parameters.
Don't set the tooltip property when you create the marker. That may work, but it isn't documented that you can add your own properties in this fashion. Instead, simply use a local variable or parameter for tooltip.
I would create the infowindow before adding the event listeners. This will actually work fine in either order (since the event listeners are asynchronous), but it looks better to see the infowindow created first.
So, change your for loop to:
for (var i = 0; i < locations.length; i++) {
addMarker( locations[i], "testinggg" + i );
}
function addMarker( location, tooltip ) {
var image = new google.maps.MarkerImage(
"http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+location[3]+"|FF0000|000000",
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34)
);
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: location[0],
zIndex: location[3]
});
var infowindow = new google.maps.InfoWindow({
content: "'" + tooltip + "'"
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
}
That said, you may not like the result you get when you open an infowindow in response to moving the mouse over a marker. What if the marker is near the top of the window? The page will immediately move to make the infowindow fit on the screen, and now the marker won't be under the mouse any more.
You're already setting the title property when you create the marker. This should cause a normal browser tooltip to appear when the mouse is hovered over the marker, and it won't cause the map to move as the infowindow may do. Any reason not to just use that tooltip instead of the infowindow? You could just remove all of the infowindow code, or let the infowindow open on a click as it normally would.
Set the content of the infowindow onmouseover(you may access there the tooltip-property of the specific marker)
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow1.setContent(this.tooltip);
infowindow1.open(map, this);
});
the initializing of infowindow1 move to outside the loop and leave the arguments empty.
Use the below code:
var infowindow1 = new google.maps.InfoWindow({
content: "'"+marker.tooltip+"'"
});
EDIETD:
var contentString = "testinggg"+i;
var infowindow1[i] = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: location[0],
zIndex: location[3],
tooltip:"testinggg"+i
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow1[i].open(map, marker);
});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow1[i].close(map, marker);
});
You can not get the property of marker in the info window. So you need to define the content in other variable.
I am making a website over cyclists killed in Norway. For my project I have been using google maps api v3, but I have vague familiarity with javascript. You can see my result so far here: http://salamatstudios.com/googlemapstest/
Basicly I want to have multiple markers with infowindows on each one. Each one of the infowindows will contain:
Name (age),
Location,
Date of death,
Read more (which will be linked to a page on the website itself).
Like this example here: http://salamatstudios.com/bicycles/
I tried working with just one marker and infowindow and that worked just fine. When I want to add new markers with custom info windows on each I get stuck. At the moment I have 3 markers on different locations as seen in the first link, but none of the info windows appear when I click the marker..
How do I go around it to code it so the infowindows appear? And how can I have custom text in every infowindow? I am going to have about 30-40 markers on the map when it is done. All of the info windows will have different types of information.
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(65.18303, 20.47852),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// MAP CONTROLS (START)
mapTypeControl: true,
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_TOP
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
// MAP CONTROLS (END)
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
// -------------- MARKER 1
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(59.96384, 11.04120),
map: map,
icon: 'img/bike5.png'
});
// MARKER 1'S INFO WINDOW
var infowindow1 = new google.maps.InfoWindow({
content: 'Name<br />Location<br />Date<br /><br />Read more(test link)'
});
// End of infowindow code
// Adding a click event to the marker
google.maps.event.addListener(marker1, 'click', function() {
// Calling the open method of the infoWindow
infowindow1.open(map, marker);
});
// -------- END OF 1st MARKER
// -------------- MARKER 2
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(60.63040, 8.56102),
map: map,
icon: 'img/bike5.png'
});
// MARKER 2'S INFO WINDOW
var infowindow2 = new google.maps.InfoWindow({
content: 'Name<br />Location<br />Date<br /><br />Read more(test link)'
});
// End of infowindow code
// Adding a click event to the marker
google.maps.event.addListener(marker2, 'click', function() {
// Calling the open method of the infoWindow
infowindow2.open(map, marker);
});
// -------- END OF 2nd MARKER
// -------------- MARKER 3
var marker3 = new google.maps.Marker({
position: new google.maps.LatLng(60.39126, 5.32205),
map: map,
icon: 'img/bike5.png'
});
// MARKER 3'S INFO WINDOW
var infowindow3 = new google.maps.InfoWindow({
content: 'Name<br />Location<br />Date<br /><br />Read more(test link)'
});
// End of infowindow code
// Adding a click event to the marker
google.maps.event.addListener(marker3, 'click', function() {
// Calling the open method of the infoWindow
infowindow3.open(map, marker);
});
// -------- END OF 3rd MARKER
}
google.maps.event.addDomListener(window, 'load', initialize);
Would be great if some could give me a clue. I've tried searching around a bit, but I can't really find my answer. Thanks in advance! :-)
You need to attach the infowindow to the correct markers. Currently they are all associated with "marker", which doesn't exist (and should cause an error message in the javascript console when you click on the markers).
Inside the click listener change:
infowindow1.open(map, marker);
infowindow2.open(map, marker);
infowindow3.open(map, marker);
To:
infowindow1.open(map, marker1);
infowindow2.open(map, marker2);
infowindow3.open(map, marker3);
working example
In addition to HoangHieu Answer when you use for loop it better to use it this way:
marker.info = new google.maps.InfoWindow({
content: 'some text'
});
google.maps.event.addListener(marker, 'click', function() {
this.info.open(map, this);
});
google.maps.event.addListener(marker1, 'click', function() {
// Calling the open method of the infoWindow
infowindow1.open(map, marker);
});
change to
google.maps.event.addListener(marker1, 'click', function() {
// Calling the open method of the infoWindow
infowindow1.open(map, this);
});
I am having Google Map with InfoWindows being added dynamically. The issue is, when two InfoWindows overlap, the recent one won't always be on top of older ones.
How can I make sure latter InfoWindow always show up on top of all other InfoWIndows using Javascript/jQuery?
The InfoWindows are added when I receive new images and coordinates through websocket. Here is my code:
function addToMap(image) {
console.log("In addToMap...");
coordinates = image[2].split(',');
pin=new google.maps.LatLng(coordinates[0], coordinates[1]);
if(marker) {
marker.setMap(null);
}
var markerIcon = image_car_icon;
marker=new google.maps.Marker({
position:pin,
zIndexProcess: function( m )
{
return 9999999 + pin_count;
},
icon:markerIcon
});
marker.setMap(map);
map.setCenter(marker.getPosition());
pin_count++;
if(image[0] != "NOP") {
popup = new google.maps.InfoWindow({
content:'<image id="pin_' + pin_count + '" src="data:image/png;base64,' + image[1] +'"/>',
});
popup.open(map, marker);
}
}
popup is the InfoWindow created when I get a new image. Suppose two images have almost same coordinates, I want the second InfoWindow to be on top (z-index). But, most of the time, the first window stays on top.
I have found out a solution. I am manually modifying the z-index of the marker by using the image as the handle. marker_count is a running marker, so the z-index will be greater than the previous marker.
google.maps.event.addListener(popup, 'domready', function() {
console.log("DOM READY...........................");
// Bring latest Image to top
e = $('#pin_' + img_count).parent().parent().parent().parent();
e.css({
'z-index' : (99999 + marker_count),
});
});
I want to make a google map infowindow.
the infowindow should be editable when some event is fired.
there is a question and answer about google map infowindow editable,
How do I make the info window editable in the Google Maps API?
but, this is about version 2.
any idea how to infowindow editable?
refrence~
this is my addMarket function
this.addMarker = function(location) {
var iconImg = 'signpost.png';
var marker = new google.maps.Marker({
position: location,
map: this.mMap,
icon: iconImg,
});
var infowindow = new google.maps.InfoWindow(
{
maxWidth: '50px',
content: "some text"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(this.mMap, marker);
});
infowindow.open(this.mMap, marker);
this.mMarkerArray.push(marker);
}
Well, you can pass any HTML into the InfoWindow's content property. So the solution for Google Maps v2 that you mentioned, also applies here:
var infowindow = new google.maps.InfoWindow(
{
maxWidth: '50px',
content: '<div contentEditable="true">changeme...</div>'
});