google maps refresh without displaying gray - javascript

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/

Related

Google Maps API marker move on scroll and layout style

I'm new in the Google Maps API, I am trying to embed a marker with the address on google maps but I have errors.
https://developers.google.com/maps/documentation/javascript/adding-a-google-map#map
I'm using this documentation and I have copied this code but it doesn't work properly because when you scroll the marker it's not fixed in the map but its move and doesn't stay in the correct place.
Also, the buttons in the left corner MAP and SATELLITE doesn't appear properly, they appear with a background line in the whole map and don't together smaller.
Finally, the + and - button doesn't appear.
Someone could tell me why I have all this problem?
Here is my code:
<script>
function initMap() {
var blitz8 = {lat: 45.806510, lng: 10.109520};
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 18,
center: blitz8
});
var marker = new google.maps.Marker({
position: blitz8,
map: map
});
};
</script>
And here the Live Page:
https://sebalaini.github.io/Blitz8/
Hi I resolve that problem by disabled some css option in your base.scss please check and fix that, check my picture uploaded below

Custom Google Maps

In my HTML page instead of using:
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(51.489021, -0.1164075),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: styles
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
I'd like to use a Custom Map I've created.
https://www.google.com/maps/d/edit?mid=zd34x9vOEi3A.kNJZAfpCCD80
But I don't want to embed the map into my page, I want to do the styling on the HTML page. Is this possible?
Well, depending on what kind of customizing you want to perform on your page, you can include the Google Maps JavaScript API 3 in your page. This will allow you various customization from adding custom markers, adding images, to calculating and drawing directions. There are even helpful examples, so I'd say it's a great start to add a custom google map to your html.

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();
});

fitBounds() shows whole earth (if map is first hidden and then shown)

I have a bunch or markers, and I want to show only the area containing them. I found a long list of similar questions (see at the bottom of the post for some), but none of the solutions works for me. The LatLngBounds is built correctly, but when I call fitBounds the result will be the following:
Instead of:
Can anybody spot an evident error in my code?
var opt = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),opt);
var box = new google.maps.LatLngBounds();
for(var i=0;i<list.length;i++){
var p = new google.maps.LatLng(list[i].lat,list[i].lon);
var marker = new google.maps.Marker({
position: p,
map: map
});
box.extend(p);
}
map.fitBounds(box);
map.panToBounds(box);
Some of the posts I read and tried (list not comprehensive):
Google Maps v3 - Automating Zoom Level?
Google maps V3 custom marker images and fitBounds()
Google Maps with fitBounds don't zoom
fitbounds() in Google maps api V3 does not fit bounds
Edit: this actually happens if (as I do in my application) the map is at first hidden, and showed only later.
I hide it in this way:
$('#map').hide();
and show it:
$('#map').show(function(){
//this is necessary because otherwise
//the map will show up in the upper left corner
//until a window resize takes place
google.maps.event.trigger(map, 'resize');
});
Any clue as to why this happens and how to prevent it (apart from initialising the map when first shown)?
On a side note, if I set zoom and center when declaring the map object (i.e. I don't use fitBounds()) then the map will show correctly, even after a hide/show.
I can't set zoom and center, though, because the list of points is retrieved elsewhere and I don't know where they are beforehand.
Solved (not in a nice way, though).
What I ended up doing was initialising the LatLngBounds with the points when loading the page, but panning and zooming only when showing the map. In this way it works correctly.
E.g.
var box;
function init(){
var opt = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),opt);
box = new google.maps.LatLngBounds();
for(var i=0;i<list.length;i++){
var p = new google.maps.LatLng(list[i].lat,list[i].lon);
var marker = new google.maps.Marker({
position: p,
map: map
});
box.extend(p);
}
}
and then, later (click on a button for example)
function showMap(){
$('#map').show(function(){
google.maps.event.trigger(map, 'resize');
map.fitBounds(box);
map.panToBounds(box);
});
}
It works, but I don't like to have that global var hanging around. I implement the exact same behavior using OpenLayers, and it works correctly without the need for this hack. If anybody has a better solution, please post it and I will accept it if it works.
Thanks to #Engineer and #Matt Handy for helping me eliminate one possible source of errors.
I tried your code in a fiddle, and it works as expected.
So the reason why your code fails must be in the definition of your datapoints (as already suggested by Engineer). Compare your list definition with mine and check if they are different.
Modify to your needs
map.fitBounds(bounds);
var listener = google.maps.event.addListener(map, "idle", function() {
if (map.getZoom() > 16) map.setZoom(16);
google.maps.event.removeListener(listener);
});
same problem, found the reason is that I hide the map (make the container of the map display: none;) before calling fitbounds()
To expand a bit on #JayThakkar 's answer, this worked for me
google.maps.event.addListenerOnce(map, 'idle', function(){
map.fitBounds(bounds);
});
The addListenerOnce function removes the need to call google.maps.event.removeListener(listener);.
And calling map.fitBounds(bounds) inside the listener let us use the calculated bounds's zoom level.

Google Maps API - Strange Map "Offset" Behaviour

I'm adding a map next to a form on my web page. The idea is that people can sign up, and when they type in their address and click search, it place-marks their house, they must do this before they submit the form (geolocation has a large role on my site).
Unfortunately, I have added the map, but within the map window the map itself appears to be offset. See the image below to illustrate what I mean:
I can only drag the map from within the "mapped" part of the box. If I select the grey area to drag the map around, it fails.
Any ideas what could cause this?
EDIT:
Here is my map-initialising Javascript, called on page load.
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(52.428385,-3.560257);
var myOptions = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("adminMap"), myOptions);
Here is my map CSS
#adminMap{
float:left;
width:270px;
height:370px;
margin-left:20px;
}
Here is my map HTML
<div id="adminMap">
</div>
I've seen things similar to this. Without access to any code, my best bet is that the map is initialized at a time when the container div is hidden. I've seen that cause such symptoms. Try to set up your map as you're showing it, rather than before.
To render the map fully again on changing div visibility you can use this code.
google.maps.event.trigger(map, 'resize');
This will rerender your map inside the div and will display it fully.

Categories