We Keep Coding

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

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

hidden google map not loading in fancybox on opening

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)

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.