hidden google map not loading in fancybox on opening - javascript

I am having a really tough time working out how to to view my google map when clicking a link to open it
currently when clicking an link I get this result
as you can see the map only loads a tiny bit in the corner
This is the html
<a href="#map-canvas" id="inline" class="fancybox" id="inline">
<img id="map-image" alt="Tea Map" src="wp-content/themes/Tea-interactive/assets/images/map.png" />
</a>
and here is my fancybox code
$("a#inline").fancybox({
'hideOnContentClick': false,
'afterShow': function(){
google.maps.event.trigger(map, "resize");
}
});

In your fancybox you have to initialize the google maps after showing like:
$("a#inline").fancybox({
'hideOnContentClick': false,
'afterShow': function(){
initialize(map);
}
});
function initialize(map){
//your code to initialize the google map example: (ZOOM_LEVEL AND DISABLE_DEFAULT should be set above)
var mapOptions = {
center: new google.maps.LatLng(30, 30),
zoom: ZOOM_LEVEL,
disableDefaultUI: DISABLE_DEFAULT,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(id),
mapOptions);
}

Unfortunately this is normal behavior for the google maps api if you create it in a hidden object.
The element it is created in will need to have a size (height/width) so the map can be drawn correctly.
What you need to do is create the map after its container element is visible or has a size. (hint: css visibility attribute)

Related

Google Map doesn't appear (doesn't load)

I don't have experience with google map API, so I hope you can help me.
the problem is whenever I click on show button, the width of the map appear, but it doesn't load, I can't see the map at all.
but if i open the counsel in developer tools the map loads normally!
codepen url for better explanation
https://codepen.io/ahmadz12/pen/QdRQbE
html
<div id="map-canvas" class='hide'></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
<a id='show'>show</a>
css
#map-canvas{
height: 500px;
width: 500px;
border: 3px solid black;
}
.hide{
display:none;
}
javascript
if (document.getElementById('map-canvas')){
// Coordinates to center the map
var myLatlng = new google.maps.LatLng(52.525595,13.393085);
// Other options for the map, pretty much selfexplanatory
var mapOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Attach a map to the DOM Element, with the defined settings
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
$('#show').click(function(){
$('#map-canvas').removeClass( "hide" )
});
Thanks
When you load a Google map into a hidden div and then display that div, you need to tell Google to repaint the map:
$('#show').click(function(){
$('#map-canvas').removeClass( "hide" );
google.maps.event.trigger(map, 'resize');
});
I suspect that Google is trying to be helpful by saving browser resources, not drawing maps in elements that can't be seen. By triggering a resize when you display your div, it causes Google to draw the map again in a now visible element.

Google Maps popup on text-box click?

I have some code for google maps autofilling a text box with Latitude and Longitude when you click on the map.
Now I would like to know if there's a way you can have the map appear in a popup? I searched for "google map" popup frame and things along the same line but I could not find anything.
For instance: Let's assume there is a textbox with id "Location". Once you click on the textbox, a google map popup will appear where you can click and the coordinates will be entered automatically into "Location" (already have this part of the code). If you click anywhere on the screen behind the popup, the google map popup must disappear.
What I had in mind was the google map is hidden; and once there is an "onclick" event for the textbox, it will show the popup and the user can choose the location.
I will add the code.
var map;
var marker = null;
function initialize() {
var mapOptions = {
zoom: 5,
disableDefaultUI: false,
center: new google.maps.LatLng(21.268899719967695, 39.2266845703125),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
$("#Coordinate1").val(event.latLng.lat() + ", " + event.latLng.lng());
$("#Coordinate1").select();
if (marker) { marker.setMap(null); }
marker = new google.maps.Marker({ position: event.latLng, map: map});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
#map {
width:350px;
height:200px;
}
#Coordinate1{
text-align:center;
border:1px #ccc solid;
}
<div id="map"></div>
<input type="text" id="Coordinate1" value="Latitude, Longitude">
Thank you.
You should consider implementing a page where you have that map separately. Use it as an iframe inside the main page and show/hide its container whenever you need to do that. So, steps to solve the problem:
implement the map page
add a popup container which will contain an iframe pointing to the map page
handle communication between iframe page and main page via Javascript

google maps refresh without displaying gray

I am using the Google Maps API v3 in javascript, and I am constantly reloading the map with an app.get, and adding layers and bookmarks using mongodb. To erase everything I reload the map, and while it's loading a gray background displays in the div that contains the map.
What technique do you recommend so that the gray transition is not displayed, and the map is displayed all at once?
I'm reloading the map with the following code, within the function that does the reload; if I put this code outside of the function, the new elements that arrive will appear on top. This is why I do it this way.
var geocoder,map
geocoder = new google.maps.Geocoder();
var options = {
zoom: 5,
minZoom: 5,
center: new google.maps.LatLng(5.1573603, -74.982409),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
You can first set the visibility of the div which contains map to hidden; then listen to the first tilesloaded event, and set the visibility back to visible. Doing this the Maps should only pop up after all it tiles is loaded (so no gray screen)
Here is a quick demo which do just that:
http://jsfiddle.net/nq5t85sz/1/

Google maps not display entire map on the div container

I have a div with a google map inside but the map is not showing entirely.. just shows a part of the map and the other it's all grey and if i move the map with the cursor, the maps visual part moves fine but the size changes but not taking the entire div size.
This is the div and a snapshot:
<div style="height: 275px; width: 715px;" id="map_display"></div>
You need to trigger a resize event in Google maps like
google.maps.event.trigger(myMap, 'resize');
After initializing the Google maps
The answer provided Here may be of use to you, the problem is likely that the map has been loaded prior to the sizing of the div (is it perhaps dynamically sized?).
Loading the map after the rest of the page elements should help.
Working Fiddle
function InitializeMap() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_display"), myOptions);
}
$(document).ready(function () {
InitializeMap();
});

Zooming to center on a map in Google Maps API V3

I'm new to using google maps and am trying to find out how to restrict the zoom function so that it does not zoom anywhere except of the center of the map and not zoom to the mouse point. Basically it zooms to the center of the returned map no matter where your mouse pointer is on the map as opposed to zooming where the mouse pointer is located on the map. I don't even know if this is possible currently, some help would be appreciated.
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(51.285583, 1.091045);
var myOptions = {
zoom: 15,
center: latlng,
scrollwheel: true,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.285826, 1.089973),
map: map,
title: 'Run of The Mill',
clickable: true
});
}
</script>
There are several zoom types:
using zoom control - that zooms to the center of the map
using scroll wheel - that zooms to the mouse pointer as you complain
using double click - that first centers the place under the mouse pointer and then zooms
So if you want only the first zoom type, you can disable the other two by setting disableDoubleClickZoom and scrollwheel map options to false.
Moreover, you might handle dblclick map event (scroll wheel event is not so straightforward, but maybe you'll find a way how to handle the scroll wheel in javascript too) and in this handler just change the map scale using map.setZoom(). The map center will stay the same. Fairly easy.
Or handle this by re-centering the map on zoom change. This preserves the expected functionality on double click and scroll wheel.
google.maps.event.addListener(map,'zoom_changed',function () {
map.setCenter(new google.maps.LatLng(47.61388802057299,-122.31870898147581));
})
From what I can see in your code you are zooming on the latlng variable that you declared above. That is correct. You myOptions variable is then passed into your new maps declaration. So you should be centered on 51.285583, 1.091045, which is Caterbury Kent in the UK.
If that is where your mouse is pointing it is working, if this doesn't help I would suggest copying an example from the google examples and cutting out what you don't need for your first demo.
http://code.google.com/apis/maps/documentation/javascript/examples/index.html

Categories