Google map with css "transform: scale"
Good day,
I have a problem with google map and css "transform: scale". My goal is to scale the map to 1.1 if the map is hovering. But if I do this, I can no longer press the marker. I tried to solve the problem with jquery but I didn't get any success. Anyone with a solution?
Here is the fiddle: JSFIDDLE
I had to switch the scaled size first, then load the map, and then switch to the old size for it to work, but failed.
Here's my failed attempt.
$("#map").hover(function(){
$("#map").width(880).height(617.1).load('/index.html', function () {
initialize();
}).width(800).height(561);
});
thanks for the help
Manuel Strohmeier
source to share
The problem is fairly easy to explain, but unfortunately I don't have a good solution right now.
Take a look: http://take.ms/2E3fV
In the image, I mark a rectangle that shows exactly where the element is located, which is responsible for the click action on the google map market. So simple, when you scale the map with CSS, each image is scaled as well, but the position ( left, right, top, bottom
) coordinates do not change.
In theory, you can check the Google Map code and correct this position in any way, but:
- it is not a one-size-fits-all solution (e.g. not for dynamic inference)
- it can be changed in the future (class name or even whole solution)
- this is more a hack than a solution.
source to share
what's your intensity using transform: scale? why don't you use scaling for this?
check out my code snippet i edited from yours, maybe this will help you ...
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
var myLatlng2 = new google.maps.LatLng(-22.363882, 125.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var contentString = "Pls help me to get the right position :)"
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker1 = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'First Marker'
});
var marker2 = new google.maps.Marker({
position: myLatlng2,
map: map,
title: 'Sec Marker'
});
google.maps.event.addListener(marker1, 'mouseover', function () {
map.setZoom(14);
infowindow.open(map, marker1);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
#map {
height: 400px;
width: 400px;
margin: auto;
padding: 0px;
top:100px;
}
.scale {
transition: all .2s ease-in-out;
}
#map.scale:hover {
transform: scale(1.9);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<body>
<div id="map" class="map scale"></div>
</body>
source to share