We Keep Coding

Google Maps shows nothing until i minimize the screen

On my website i have a Google Map but it don´t show the thing i want.
When its loaded it shows this.
Then i minimize my screen and it shows the map.
This is my code:
<div id="view1">
<?php
$location = get_field('locatie_beschrijving');
if( ! empty($location) ):
?>
<div id="map" style="width: 800px; height:300px "></div>
<script src='http://maps.googleapis.com/maps/api/js?sensor=false' type='text/javascript'></script>
<script type="text/javascript">
//<![CDATA[
function load() {
var lat = <?php echo $location['lat']; ?>;
var lng = <?php echo $location['lng']; ?>;
// coordinates to latLng
var latlng = new google.maps.LatLng(lat, lng);
// map Options
var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//draw a map
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map
});
}
// call the function
load();
//]]>
</script>
</div>
Anyone an idea what's wrong?

The key is that your map is hidden when initialized and therefore, you need to trigger a resize event once the tab has been shown.
google.maps.event.trigger(map, "resize");
Developers should trigger this event on the map when the div changes size.
Bootstrap tabs
This library exposes events:
Events
When showing a new tab, the events fire in the following order:
hide.bs.tab (on the current active tab)
show.bs.tab (on the to-be-shown tab)
hidden.bs.tab (on the previous active tab, the same one as for the hide.bs.tab event)
shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tab event)
This way, you have full control over what happens with your tabs. You know when it's shown, hidden, etc.
So you could use something like that (with jQuery):
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// Trigger map resize when tab is shown
google.maps.event.trigger(map, "resize");
});
This will trigger the resize event when the tab has been shown.
Make sure the map object is available where you place this code.

Use below coding
google.maps.event.addDomListener(window, "resize", resizingMap());
function resizingMap() {
if(typeof map =="undefined") return;
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
}

Google Map with Sidebar that Zooms to a Specific Location

I'm working on a javascript Google map where I have marked the location of each of the state capitals with a custom marker and a title of that capital and state. Right now when you view the map you see the whole US with each marker. I want to keep that but add a sidebar where you click the name of a state and the map zooms to the state and capital. I would also like to add a link that zooms out view the full map. Does anyone have a tutorial on how to do this? I found several examples of Google maps with sidebars but none that zooms to a specific location.
Edit:
This is what I am trying to achieve: http://econym.org.uk/gmap/example_map2.htm
Here is the code I am working with:
<script>
function init() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(38.781494, -96.064453),
mapTypeId: google.maps.MapTypeId.ROAD
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var image = 'Alabama.png';
var myLatLng = new google.maps.LatLng(32.366805, -86.299969);
var AlabamaMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title:"Montgomery, Alabana"
});
}
google.maps.event.addDomListener(window, 'load', init);
</script>

You need to associate listeners (for example, using jquery) with the click event on your state names. Provided they had an id attribute with the USPS code, it would be something like
jQuery(document).on('click','#RESET',function() {
map.setZoom(5);
map.setCenter({lat:41, lng:-89.5});
});
jQuery(document).on('click','#CA',function() {
map.setZoom(7);
map.setCenter({lat:36.4, lng:-120.9});
});
jQuery(document).on('click','#FA',function() {
map.setZoom(7);
map.setCenter({lat:28, lng:-81});
});
You see, I included one link with id RESET that allows me to reset to the initial state.
Here you can see it at work
http://bl.ocks.org/amenadiel/38e0541592bf331cb298

jquery link toggle with google maps

Im having problems working out how to get this toggle working, by default it hides the map and when you click show map i want the map to slide down and change the link test to hide map which then of course will slide back up but does not seem to be working..... anyone got any ideas?
Also if anyone knows of a solution for the google maps issue im also having please let me know, because the made is hidden when you show / slides down it does not show most of the map (something about resizing i think i remember reading up on)
i have made a jsfiddle here: http://jsfiddle.net/DfVBb/ although does not work there at all for some reason. thanks in advance!
HTML
<div class="slideToggleBox">
<div id="map_div"> </div>
</div>
show map
JS
<script type="text/javascript">
$('#map_div').hide();
$('#slideToggle').click(function() {
$('#map_div').slideToggle('slow', function() {
$('#slideToggle').text('hide map');
}, function(){
$('#slideToggle').text('show map');
});
return false
});
</script>
Maps JS
$(document).ready(function() {
var latlng = new google.maps.LatLng(53.334583, -0.961674);
var options = {
zoom: 15, // This number can be set to define the initial zoom level of the map
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_div'), options);
var image = new google.maps.MarkerImage('/images/map-icon.png',
new google.maps.Size(680, 178),
new google.maps.Point(0,0),
new google.maps.Point(18, 50)
);
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(53.334583,-0.961674),
map: map,
icon: image
});
});
</script>

I managed to work out a solution for this and also fixing the resize issue
$(function () {
// create a center
var c = new google.maps.LatLng(53.334583, -0.961674);
//create map options object
var mapOptions = {
zoom: 14,
center: c,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
$("#slideToggle").click(function () {
$('#map_canvas').slideToggle(300, function(){
if ($('#slideToggle').text() !== "hide map") $('#slideToggle').text('hide map');
else $('#slideToggle').text('show map');
google.maps.event.trigger(map, "resize"); // resize map
map.setCenter(c); // set the center
}); // slide it down
});
});

I looked at your fiddle, it has to be cleaned. Based on my understanding, you're trying to toggle Google maps on button click.
Mistakes in your Fiddle:
(1) The Google maps is not initialized. The below is used to initialize Google maps.
google.maps.event.addDomListener(window, 'load', initialize);
(2) Your .slideToggle() has to be cleaned up. It has be somehow like
$('#slideToggle').on('click', function () {
$('#map_canvas').slideToggle('slow', function () {
if ($('#slideToggle').text() !== "hide map")
$('#slideToggle').text('hide map');
else
$('#slideToggle').text('show map');
});
return false;
});
I've created a JSFiddle, please go through it and share your thoughts.

Google map modal issue

I am trying to display google map into the Twitter bootstrap modal.
When user first click on the button Show map then he is able to see the map successfuly as i am generating the map onclick() function but when he closes the modal and reopen it then the map doesnot show properly and 90% part of the map goes grey like following
I even try this workaround that remove that whole div in which the map is bind and regenerate it but that trick doesnot work too kindly let me know how can i resolve my issue.
Following is my js function which i am calling onclick event of show map
function mapp()
{
//google.maps.event.trigger(map, "resize");
//$("#map_google_canvas").empty();
$("#map_google_canvas").remove();
$("#crmap").append("<div id='map_google_canvas'></div>")
var myOptions = {
center: new google.maps.LatLng(54, -2),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_google_canvas"), myOptions);
var addressArray = new Array("London, United Kingdom", "London Road, Brentwood, United Kingdom", "Brentwood, United Kingdom");
var geocoder = new google.maps.Geocoder();
var markerBounds = new google.maps.LatLngBounds();
for (var i = 0; i < addressArray.length; i++) {
geocoder.geocode({
'address': addressArray[i]
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
markerBounds.extend(results[0].geometry.location);
map.fitBounds(markerBounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
Kindly help,
Thanks

I am working with Angular, and what has just worked for me, on the ui.bootstrap.collapse AngularUI directive is to use a timeout. This directive has the same problem as the modals because the map size is not defined until the new view is fully load, and the map appears with grey zones. What I have done is to add this code to the button that opens the collapsed content. Maybe you can adapt it to your case with the button that opens the modal.
window.setTimeout(function () {
google.maps.event.trigger(map, 'resize')
}, 0);
Hope it helps.

I had the same issue. but I found an issue with modal shown event. as its not working with some version of issue so I just follow the bootstrap modal documentation to achieve it.
Bootstrap Modal Map Issue Solution :
$(document).ready(function(){
$('#locationMap').on('shown.bs.modal', function(){
google.maps.event.trigger(map, 'resize');
map.setCenter(new google.maps.LatLng(-33.8688, 151.2195));
});
});
Finally This works for me, It could help to someone.

If you are using bootstrap 3 you have to do this:
function showMap() {
var mapOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
$('#mapmodal').on('shown.bs.modal', function () {
google.maps.event.trigger(map, 'resize');
map.setCenter(new google.maps.LatLng(54, -2));
});
$('#mapmodal').modal("show");
}
Also make sure that you did not set any max-width or max-height value to img - tags. If you did so in your css style sheet put this at the end of it:
#map img{
max-width:none;
max-height:none;
}
I am not quiete sure whether it is neccessary but setting a height value to the div holding your map should be a good thing:
<div id="map" style="height:400px"></div>
I assembled this from several stackoverflow discussions.

If you are using Angular, you should use $timeout instead of setTimeout.
Wrapping a function with a $timeout set to 0 will ensure that the wrapped function is executed after the current execution context is finished. In your situation Google Maps API will only repaint the map after modal and the element holding the map are fully rendered. You won't see any grey areas.
$timeout(function () {
google.maps.event.trigger(map, 'resize');
map.setCenter(new google.maps.LatLng(53.5085011, -6.2154598););
}, 0);

The visibility:hidden and visibility:visible could be used instead of display:none and display:block. This worked for me. You can even edit the CSS of the modal for this.

Since you are loading the map in a non-yet-defined width element you have this solution.
You should trigger a resize event on google.maps after initialize map with latlong
$('.modal').on('shown', function () {
// also redefine center
map.setCenter(new google.maps.LatLng(54, -2));
google.maps.event.trigger(map, 'resize');
})

I solved this issue thanks to user1012181 answer. I also personally like this pure CSS solution.
div#myModalMap.modal.fade.in{
visibility: visible;
}
div#myModalMap.modal.fade{
display: block;
visibility: hidden;
}

I also had this issue and came up with this easy solution.
Wait until your modal is completely loaded and then set the timeOut event on map function.
$('#MyModal').on('loaded.bs.modal',function(e){
setTimeOut(GoogleMap,500);
});
I am very sure It will work out in all cases.

I will use uiGmapIsReady wait the dom ready then force the map resize:
uiGmapIsReady.promise().then(function () {
var map = $scope.map.control.getGMap();
google.maps.event.trigger(map, 'resize');
});

well this is how the answers above helped but I had to call the main function using onclick .
<span data-target="#enlargeModal"data-toggle="modal" onclick="newMap()" class="fa fa-expand r"></span>
function newMap()
{
function showMap() {
//your map function
}
$('#enlargeModal').on('shown.bs.modal', function () {
var center = fullmap.getCenter();
google.maps.event.trigger(fullmap, 'resize');
fullmap.setCenter(center);
});
showMap();
}

How to get some information in google maps without click event on marker and show this in a div, other than infoWindow

Hi I am showing some markers on my google map and on click of the marker, I am calling the click event and showing some info about that place to the right side(area other than Map and not as an infoWindow). Now this event gets fired on click, and by default when page loads my div remains blank, How can I have the div the basic information being shown up once the map loads up. I need to show the information that corresponds to the marker that is the center point of the map, and later when the users click the marker icons the info should change and correspond to the particular marker being clicked
I have tried something but it doesn't work:
function loadMap() {
var myLatlng = new google.maps.LatLng(40.46998, -3.68705);
var myOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var places = [];
places.push(new google.maps.LatLng(51.43581, -0.51744));
places.push(new google.maps.LatLng(48.87187, 2.31764));
places.push(new google.maps.LatLng(45.45979, 9.19681));
var infowindow;
for(var i = 0; i<places.length; i++) {
var marker= new google.maps.Marker({
position: places[i],
map: map,
title: 'Place' + i
});
(function (i,marker){
google.maps.event.addListener(marker, 'click' , function() {
infowindow.setContent('PLace Number' + i)
infowindow.open(i, marker)
});
});(i, marker);
}
}
$("document").ready(function () {
loadMap();
});
UPDATE EDITED
Basically I need something like Layer KML features
But the info should come on the right hand side by default for the first time. Later on when the marker is clicked, the info should change. I am also not adamant that I need this info in a kml file(xml is fine with me as well). I can just have a marker and info should popup on click and for the first time be default as well depending on the location of the user.
Bottom Line: I need the info to appear on click of a marker and by default when the page loads the info should appear corresponding to the center point of the map. which means users coming from different locations will see different info's corresponding to their location from where they are coming.(I am centering the map based on users location)

You can use the addDomListener event of the google maps api. Something like this:
<script>
function initialize() {
// Map initialization
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="map_canvas"></div>
</body>
Although the above code is Maps Javascript API code, the addDomListener() method binds to the window object of the browser and allows the API to communicate with objects outside of the API's normal domain.
further reading
Actually the basic Idea is that you need to read an XMl and parse the data and and show this in a seperate div on right side., This div you can create dynamically when you load the map e-g:
$("#body").append("<div class='newdiv'></div>")

From the google Docs in the section about InfoWindow:
Note that if you call open() without passing a marker, the InfoWindow
will use the position specified upon construction through the
InfoWindow options object.
So in your code, why don't you simply init your infoWindow and call the open() method? I am not particularly familiar with the api, but how about:
var infowindow = new google.maps.InfoWindow({
content: 'your initial text'
});
infowindow.open();
Or if you need the marker for special purposes on the infowindow, init an marker with the center position and use that in the infowindow.open(your_initial_pos) call.

You can use jQuery to .triger() a click event on the first marker on document.ready:
$(marker).trigger('click');
This will run the code you have already written and make it so when the page loads your div will be populated with data from whatever element you trigger the click on.
When you bind to document.ready you don't need encapsulate document in quotes:
$(document).ready(function () {...});
Or you could use the short-hand if you're into that sort of thing:
$(function () {...});
UPDATE
You can place the trigger function call after your for loop where you are setting up the markers:
for(var i = 0; i<places.length; i++) {
var marker= new google.maps.Marker({
position: places[i],
map: map,
title: 'Place' + i
});
(function (i,marker){
google.maps.event.addListener(marker, 'click' , function() {
infowindow.setContent('PLace Number' + i)
infowindow.open(i, marker)
});
});(i, marker);
//only run on the first marker
if (i === 0) {
//trigger a click event to show the first info-window
$(marker).trigger('click');
}
}

You can fire a tilesloaded event on the map object. Check out the Map reference for events
tilesloaded waits until the map tiles are actually loaded before firing. Using your code, you could do something like this:
function loadMap() {
var myLatlng = new google.maps.LatLng(40.46998, -3.68705);
var myOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
google.maps.event.addListener(map, 'tilesloaded', function() {
doSomething();
});