H.Al H.Al - 3 months ago 17
Javascript Question

Cannot display another map on map click listener event

I am trying to create a page that loads a small google map and it is working fine. Now I want to add a map event click that shows a bigger div displaying another google map with the same lng and lat. The div is shown properly a google logo and a beige background color , but there is no map and I can't figure out the problem. I am working on visual studio 2012 and google map is shown using javascript.

Below is my code:

var latlng;

function initialize(lng, lat) {

var myOptions = {
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);

var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: "/Images/marker.png",
title: "This is the place."
});

var contentString = 'Hello <strong>World</strong>!';
var infowindow = new google.maps.InfoWindow({
content: contentString
});

google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});

document.getElementById("map_canvas").style.visibility = 'visible';

map.addListener('click', function (e) {

var myOptions2 = {
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map2 = new google.maps.Map(
document.getElementById("modal-body"),
myOptions2);

var marker2 = new google.maps.Marker({
position: latlng,
map: map2,
icon: "/Images/marker.png",
title: "This is the place."
});

var contentString2 = 'Hello <strong>World</strong>!';
var infowindow2 = new google.maps.InfoWindow({
content: contentString2
});

google.maps.event.addListener(marker2, 'click', function () {
infowindow2.open(map2, marker2);
});

document.getElementById("myModal").style.display = "block";
});
}


Those are my divs where I am displaying my maps:

<div id="map_canvas" class="mapDiv" style="visibility:hidden" > </div>
<div id="myModal" class="modal" style="display: none">
<div class="modal-content">
<span onclick="CloseMyDiv();" id="closeSpan" class="close">×</span>
<br /><br />
<div id="modal-body" class="modal-body">
Hello world !
</div>
</div>
</div>


I repeat: modal-body changes when I click on map-canvas (by adding google logo and changing background color), but it is not displaying a map, and I tried to fill map in div before click event but still have the same problem.

Any hints?

Note: If I comment everything concerning map-canvas and I i show myModal div at onload event, map is displayed properly!

Answer

1.Make sure modal-body have width and height set in CSS.

2.If the div containing the map, or it's parent, or it's parent's parent (any predecessor) has display:none set at some point, the map view won't initialise properly and you will only see gray map. I noticed that you show the modal only after the map is initialised. So for map to appear properly, either run this code

document.getElementById("myModal").style.display = "block";

before the map2 initialisation, or trigger resize event on map after visibility change, which would reinitialise the map view:

google.maps.event.trigger(map2,'resize'); 

Probably not relevant for your case, but you need to also trigger resize event on map if the map containing's div dimensions change.