Currently, I am facing an issue with the Google Maps API as the map generated is not resizing to fit the div. Instead, it shows a large grey area which is quite frustrating for me. Can someone please assist me in resolving this problem?
Below is the code responsible for generating the map:
<div class="map" style='width: 750px; height: 200px;'></div>
This targeted div is located within a partial that gets rendered during an Ajax request.
$(".categorybox2").on('click', function() {
choice3 = $(this).text();
$.ajax({
url: "/result/" + choice1 + "/" + choice2 + "/" + choice3,
type: "GET",
dataType: "script",
data: { choice1: choice1,
choice2: choice2,
choice3: choice3 },
complete: function(data) {
function initialize()
{
var arrcount=0
var arr=$(".hidden").text().split(",")
for (var i=0; i<=2; i++) {
if (i === 0) {
arrcount=0
} else if (i === 1) {
arrcount = 2
} else if (i === 2) {
arrcount = 4
}
var mapProp = {
center:new google.maps.LatLng(parseFloat(arr[arrcount]),parseFloat(arr[arrcount+1])),
zoom:15,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var myLatlng= (parseFloat(arr[arrcount]),parseFloat(arr[arrcount+1]))
var map=new google.maps.Map($(".map")[i]
,mapProp);
var marker = new google.maps.Marker({
position: mapProp.center,
map: map,
});
google.maps.event.addListenerOnce(map, 'idle', function() {
//var center = map.getCenter();
//map.setCenter(center);
google.maps.event.trigger(map, "resize");
});
}
}
initialize()
}
})
});
Initially, the map appears like this:
As you can see, when I resize the window, the map changes despite being in an idle state for a long period. Only resizing the browser window triggers it to fill in the grey areas:
The map should be centered on the marker, like this:
I have also attempted using "bounds_changed" instead of "idle", but unfortunately, it did not solve the issue. Any help would be greatly appreciated! :)
Edit:
Here is the entire partial including the relevant CSS and JavaScript:
<% @result.each do |event| %>
<div class="eachresult">
<div class="matchscore">
Relevance score:
<a class="score"><%= event[0].round(1) %>%</a>
</div>
<div class="map" style='width: 750px; height: 200px;'></div>
</div>
<% end %>
The initial CSS on the div holding the map:
.wrapper .output,
.wrapper .output1,
.wrapper #blackness {
display: none;
}
And here is the JavaScript triggering the display of the map:
$(".price").on('click', function() {
$(".price, .question3, .bk2category").fadeOut( function() {
var black = setTimeout(function() {
$(".output, .question4, .output1")
.delay(500)
.show()
.animate({left:"+15", opacity: 1}, 1000);
}, 1000);
$(".blackness").fadeOut();
$("#foo").fadeOut("slow")
});
});