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 Map cutting off

Can someone please help me with why the Google Map I have setup under "Project Portfolio" cuts itself off when you move around the map?
<div id="map-canvas" style="width: 100%; height: 500px;"></div>
var mapOptions = {
center: new google.maps.LatLng(45.398621, -75.737116),
zoom: 14,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

When the page loads, your javascript stops working because of errors.
The consequence of it is that the code supposed to retrieve map data is not executed.
By the way, you can read the following error :
You have included the Google Maps API multiple times on this page.
This may cause unexpected errors.
You might want to fix that.

Google Maps API : Display location with Marker and Description

I am working on my own website, and everything is starting to come together except for the buttons. Currently, when the location button is clicked, a JS alert message appears. This is unacceptable! What I would like to do instead is have a little box appear with the Google Maps map of some location with a pin. This could be a jpg or png for all it matters. The important thing is to have it appear and have an X to close it in the top right. To see what I mean, go to my site: http://andreihetman.com and click on the location pin.

Check out the Google Maps API Documentation relative to markers
Anyway here is a sample:
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
NOTE: By reading the API you will find out even how to add a detail box.

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

my kml layer is showing but its off to the left

Im trying to add my map to my website, so far ive gotten it to show my map but its offset to the left by a few km
work in progress so far with markers off to the left: http://www.decking.co.il/indexwip.html#
my google maps site with the markers in the right place: http://goo.gl/maps/atvDH
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
</script> <script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(32.147711,34.972229);
var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var ctaLayer = new google.maps.KmlLayer('https://maps.google.com/maps/ms?authuser=0&vps=2&ie=UTF8&msa=0&output=kml&msid=211701918214336350936.0004be32c642b750948e4',
{preserveViewport:true});
ctaLayer.setMap(map);
}
please can somebody tell me what im doing wrong? ive been searching all day for a solution, am I mixing the wrong commands? Have I over complicated it somewhere? I've seen theres a way to simply embed into a webpage but I dont know how to make that embed appear inside the box thats provided for it in the template I'm using

It doesn't look "off to the left" to me. It looks like you have a css conflict like that discussed here.