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

The yellow person icon on the google map can't be moved around the maps

I have this problem
The yellow person icon on the google map can be moved around the maps of google api
And I want the same for my google map component.
On the Google map on the home page, if a user drags the yellow Pegmen near the edge of the map, the map must automatically respond to reveal the new map area to the Pegmen address. This function is convenient for the user to access areas outside the area of the displayed map. Google Maps does this. But my component does not, is this possible?
<script>
     var map = new google.maps.Map (document.getElementById ('map'), {
       Zoom: 17,
       Center: {lat: 4.6680202, lng: -74.0622556},
     });
</script>

File a feature request with google maps v3 javascript API. The desired behaviour is not currently available (i.e. it's not just you).

Cannot add a standard map marker to a google map with heatmap layer

I have a map with a heatmap utilizing the google visualization heatmap layer
jsfiddle here
If I try and add a normal map marker it fails with an uncaught type error somewhere in the google api.
The marker.setMap(map) line seems to happen, (inspecting the marker, it has a map property) but whatever this triggers on the map itself seems to fall over.
I've tried unsetting the heatmap layer before setting the marker, even tried not initialising the heatmap layer with the same results.
I'm beginning to think that by including the visualisation library I am losing the ability to add a map marker. If this is the case has anyone come across a workaround?

You initially create the marker without a map-property, currently the marker will appear when you click somewhere (not only on the marker), because the lnk-variable will be set to document, not to the link:
var lnk = $(document, '.marker_toggle')
but it should be only:
var lnk = $('.marker_toggle')
Demo: http://jsfiddle.net/doktormolle/Avxap/

Overlay with DrawingManager google map v3

I am using google map v3 and its drawingManager feature, I want to get the pixels of these Shapes either through Lat and Long or directly.
Here is the URL of drawingManager Shapes
https://developers.google.com/maps/documentation/javascript/examples/user-editable-shapes
I want to get the pixels as here with respect to the container of map
http://gmaps-samples-v3.googlecode.com/svn/trunk/latlng-to-coord-control/latlng-to-coord-control.html
like here, buts using overlay class and I want to use it for DrawingManager Shapes, need some help on it.
Thanks

To translate a LatLng to a Point use the method fromLatLngToPoint() of the current projection.
The current projection is returned by mapObject.getProjection()
However, a shape isn't always defined by LatLng's/Points.
For rectangles you must translate the points defined by the bounds, for a circle the center(and/or bounds), and for polylines/polygons the path.

Properly displaying a kml in google maps v3?

In google earth there is a nice feature where I can install a kml file and it loads it in such a way so that I toggle different layers. In google maps I am looking for a way to display the kml file in a similar way. I want to have a sidebar where I can choose which layers to display. I have found this:
http://www.dyasdesigns.com/geoxml/
but it looks like it only works with google maps v2. Is there anything similar that will work with v3?
I found this QA, but I'm looking for something to use with V3
EDIT more info:
My body:
<body onload='load()' style = "height:100%; margin:0">
<div id="map" style="width: 100%; height: 100%"></div>
<script type="text/javascript">
//************Function in head***************************************************
function load() {
var myOptions = {
//change this to zoom with markers
center: new google.maps.LatLng(60, 5),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),myOptions);
ctaLayer = new google.maps.KmlLayer('http://thoughtfi.com/NPDsFactGlobe.kml');
ctaLayer.setMap(map);
}
//load();
var map;
var ctaLayer;
var markersArray = [];
var startformat;
var endformat;
</script>
</body>
a link to the site (may be up and down if Im working on it.): http://thoughtfi.com/KMLtries.html
A picture from google earth. I want the functionality of the folders in the left column: http://thoughtfi.com/desired_look.png

http://www.google.co.uk/search?q=google+maps+v3+kml+parser
Ross/Udell: http://code.google.com/p/geoxml3/
Lance Dyas's replacement for geoxml: http://code.google.com/p/geoxml-v3/
Others are probably available too.

Have you considered the google.maps.KmlLayerapi-doc class? It provides a way to load, display, and hide KML files using a standard in-library facility. An introductory tutorial on using the KmlLayer is provided in the KML and GeoRSS Layers section of the Developer's Guide.