I want, when user click marker, sidebar scrolling the item what user click..like this web https://googlemaps.github.io/js-store-locator/examples/places.html
....but how do this? any idea thanks..
This div with map id & side_bar id.
<div style="width:100%; height:100vh;padding-bottom: 50px; ">
<div id="map" style="top:50px;height:100%;width:80%;float:left"></div>
<div id="side_bar" style="top:50px;width:20%;float:left;overflow-y: scroll; height:100%;margin-top:50px;padding:20px"></div>
</div><!-- Map Ends display -->
Add infowindow click from php data & add item in side_bar id
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
map: map,
visible: true,
animation: google.maps.Animation.DROP,
icon : icons[locations[i][4]],
});
// Event that closes the Info Window with a click on the map
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
markers.push(marker);
var side_bar_html = "<a href='javascript:google.maps.event.trigger(markers["+parseInt(markers.length-1)+"],\"click\");'style='text-decoration:none;'>"+locations[i][0]+"</a><br><hr><br>";
document.getElementById('side_bar').innerHTML += side_bar_html;
}
I found the solution. I add This
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.open(map, marker);
var no = marker.id;
$("div[class*='item']").removeClass("active");
$('div[class*=item_'+no+']').addClass("active");
var $selectedLocation = $('div[class*=item_'+no+']' );
var $container = $('#side_bar');
$container.animate({
scrollTop: $selectedLocation.offset().top - $container.offset().top + $container.scrollTop()
});
}
})(marker, i));
and add to my id marker
Related
I am Integrating google map.When I hover on marker it shows me location on marker.But my problem is when I hover on marker map moves. I want when I hover on marker position should be fixed.Here is My code:
function CreateMarker(Obj){
var $j=jQuery.noConflict();
var pos;
var allMarkers = [];
pos = new google.maps.LatLng(Obj['latitude'], Obj['longitude']);
var marker = new google.maps.Marker({
position: pos,
map: map,
zoom:14,
icon: gicons["blue"]
});
latlngbounds.extend(pos);
var str = '<div class="google_popup"><span style="color:#00aeef; font-weight:bold; font-size: 14px; ">'+Obj['name']+'</span></b><div>'+Obj['address']+'</div><div>'+Obj['city']+', '+Obj['state']+' '+Obj['zip']+'</div><div> '+Obj['email']+'</div><div>'+Obj['phone']+'</div></div>';
google.maps.event.addListener(marker, "click", function() {
map.panTo(pos);
map.setZoom(14);
info.setContent(str);
info.open(map, marker);
//openTrInfo($("#" + Obj['elemID'])[0], false);
var emid=Obj['elemID'];
merchant_deals(emid);
});
google.maps.event.addListener(marker, "mouseover", function () {
marker.setIcon(gicons["grey"]);
// map.panTo(pos);
info.setContent(str);
info.open(map, marker);
var emid=Obj['elemID'];
});
google.maps.event.addListener(marker, "mouseout", function () {
marker.setIcon(gicons["blue"]);
info.close(map, marker);
});
gmarkers.push(marker);
return marker;
}
When you create your infowindow, set the disableAutoPan property to false. By default this is true, so the map automatically pans when the infowindow opens, when you do info.open(map, marker);
https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions
var info = new google.maps.InfoWindow();
var info = new google.maps.InfoWindow({
disableAutoPan: true
});
This code working but when I mouse click each marker, Marker not Animation BOUNCE.
for(i=0; i<locations.length; i++) {
var position = new google.maps.LatLng(locations[i][2], locations[i][3]);
var marker = new google.maps.Marker({
position: position,
map: map,
icon: new google.maps.MarkerImage(locations[i][5]),
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.setOptions({maxWidth: 500});
infowindow.open(map, marker);
}
animation: google.maps.Animation.BOUNCE
}) (marker, i));
Markers[locations[i][4]] = marker;
}
set the animation in the click-callback:
return function() {
//set the animation
this.setAnimation(google.maps.Animation.BOUNCE);
infowindow.setContent(locations[i][1]);
infowindow.setOptions({maxWidth: 500});
infowindow.open(map, marker);
}
I'm following this code for Multiple Markers in Google map, my problem is once I put my data in the map their info window are all in the wrong coordinates, they seem scrambled. I am using US as my center. So here is the code below:
var locations = [
['Russ Martin</br>Montana',43.299428,-74.217933],
['Carey Fischer</br>New York',46.879682,-110.362566],
['Brandon Born</br>Connecticut',40.714353,-74.005973],
['Joe Tocyloski</br>Pennysylvania',41.603221,-73.087749]
];
var us = new google.maps.LatLng(42.746632,-75.770041);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: us,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
/*icon:{
strokeColor:'green',
scale:3
},*/
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
animation:google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
google.maps.event.addListener(marker, 'mouseout', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.close(map, marker);
}
})(marker, i));
console.log(locations);
}
Any help would be appreciated.
Fiddle
below statement may
this will surely help u
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, this);
}
I'm trying to show/hide some google map markers depending on the zoom level. I've had a look on here for the answers and while I've got a better idea of what I'm meant to be doing I haven't had any luck being able to implement it into my google map.
var infowindow = new google.maps.InfoWindow();
var marker, i;
var locations = [
['<div style="width: 170px;">Title1</div>', 50.794785, -1.116947, image],
['<div style="width: 190px;">Title2</div>', 50.797, -1.109, image],
['<div style="width: 120px;">Title3', 50.796928, -1.107119, '../images/map-pointer.png'],
['<div style="width: 150px;">Title4</div>', 50.794703, -1.117880, '../images/map-pointer.png']
];
/* Get the markers from the array */
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][3],
zIndex: 10
});
/* Open marker on mouseover */
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
/* Change markers on zoom */
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom = map.getZoom();
if (zoom <= 15) {
marker.setMap(null);
} else {
marker.setMap(map);
}
});
The markers are plotting okay but the zoom function I'm trying to do doesn't seem to work at all - am I doing it wrong?
You need to save the markers in an array and iterate over them to show/hide them on the zoom event. You're only saving the last marker in your marker variable. You need a markers array. Also, you can use the setVisible method of the marker rather than using setMap.
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = [];
var locations = [
['<div style="width: 170px;">Title1</div>', 50.794785, -1.116947, image],
['<div style="width: 190px;">Title2</div>', 50.797, -1.109, image],
['<div style="width: 120px;">Title3', 50.796928, -1.107119, '../images/map-pointer.png'],
['<div style="width: 150px;">Title4</div>', 50.794703, -1.117880, '../images/map-pointer.png']
];
/* Get the markers from the array */
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
visible: true, // or false. Whatever you need.
icon: locations[i][3],
zIndex: 10
});
/* Open marker on mouseover */
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
markers.push(marker); // save all markers
}
/* Change markers on zoom */
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom = map.getZoom();
// iterate over markers and call setVisible
for (i = 0; i < locations.length; i++) {
markers[i].setVisible(zoom <= 15);
}
});
I have this code where I display and set all my markers. How can I add a popup with some information on markers with this code? I add "i" variable on text, but it sets on all markers popup with "test - 723", where 723 is last value of the "i" variable. What is wrong?
for (var i = 0; i < arraylng.length-1; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(arraylng[i], arraylat[i])
});
var infowindow = new google.maps.InfoWindow({
content: " "
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('test: ' + i + '');
infowindow.open(map, this);
});
markers.push(marker);
}
First, change the loop condition to i < arraylng.length. Right now it is not capturing the last element of your array.
JavaScript variables works with function scope so you need to call a function for each marker listener to create the correct variable references. You can use an anonymous function, as seen here, or define a function for creating the click listener:
Multiple infoWindows:
function makeInfoWindowEvent(map, infowindow, marker) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
Most likely you will not want more than one InfoWindow open at the same time, because it is annoying to have to click on the close x. Then you will only want one InfoWindow object, and set the content as the marker is clicked:
Single InfoWindow:
...
var infowindow = new google.maps.InfoWindow();
for (var i = 0; i < arraylng.length-1; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(arraylng[i], arraylat[i]),
map: map
});
makeInfoWindowEvent(map, infowindow, "test" + i, marker);
markers.push(marker);
}
}
function makeInfoWindowEvent(map, infowindow, contentString, marker) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
}
this is the area where you can add your content of popup
var infowindow = new google.maps.InfoWindow({
content: "Add your popup content here"
});
and this is for showing your popup
marker.addListener('click', function() {
infowindow.open(map, marker);
});
Below code shows how its work and use.
features.forEach(function(feature) {
var infowindow = new google.maps.InfoWindow({
content: "Add your popup content here"
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,long),
icon: "image.png",
/*icon: icons[feature.type].icon,*/
title: "Title for marker",
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
});
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: myLatLng,
....
content: point[4]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.content);
infowindow.open(map, this);
});
Code inside loop. This worked for me perfectly.
That's because the variable i is not used in the loop but when the marker is clicked -- and then i is equal to the last index + 1... The addListener is asynchronous, not synchronous.
Remove infowindow.setContent('test: ' + i + ''); and replace content: " " with content: 'test: ' + i. This should fix your problem.