Here is my code
function init_map() {
var bounds = new google.maps.LatLngBounds();
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(31.75664276376096, 35.56389920898436),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
var locations = [
['Name1', 0, 0],
['Name2', 1, 1]
];
var infoWindowContent = ['some content here']
var infoWindow = new google.maps.InfoWindow(),
marker, i;
for (i = 0; i < locations.length; i++) {
var position = new google.maps.LatLng(locations[i][1], locations[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
icon: './images/content/mapPin.png',
title: locations[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
map.panTo(marker.getPosition());
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
var iwOuter = jQuery('.gm-style-iw');
var iwBackground = iwOuter.prev();
iwBackground.children(':nth-child(2)').css({
'display': 'none'
});
iwBackground.children(':nth-child(4)').css({
'display': 'none'
});
var ceva = jQuery(window).width();
if(ceva <= 400){
iwOuter.parent().parent().css({
'left': '0',
'top': '0'
});
iwOuter.children(':nth-child(1)').addClass('gm-style-child').css({
'width': '100%'
});
} else if (ceva <= 768) {
iwOuter.parent().parent().css({
'left': '15px',
'top': '0'
});
map.panTo(marker.getPosition());
} else {
iwOuter.parent().parent().css({
'left': '220px',
'top': '180px'
});
}
iwOuter.parent().css({
'width': '260px'
});
iwOuter.children().css({
'max-height': 'none',
'overflow': 'visible'
});
iwOuter.children().children().css({
'overflow': 'visible'
});
iwBackground.children(':nth-child(1)').css({
'display': 'none'
});
iwBackground.children(':nth-child(3)').find('div').children().css({
'display': 'none'
});
var iwCloseBtn = iwOuter.next();
iwCloseBtn.addClass('close-icon').css({
'display': 'none'
});
}
})(marker, i));
map.fitBounds(bounds);
}
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(8);
google.maps.event.removeListener(boundsListener);
});
}
google.maps.event.addDomListener(window, 'load', init_map);
I have the infoWindow popup from right of the marker. Whenever i click on the mapPin it centers the map on the pin.
map.panTo(marker.getPosition());
So what i want is that when i click on a marker to move the map slightly bit to the left and top. So the marker would appear in the top and maybe -100 x offset so when i click the marker - the popup would be visible and you would not have to drag the map to see all the info in the popup.
I will add some images to have a better understanding.
Right now it looks something like this.
And i want something like this only for desktop version as for the mobile it works perfect.
Does anyone have any idea how to achieve this. Thank you!
