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 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/

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 v3 synchronized drag

I am currently trying to synchronize the movement of two Google Maps on screen when the user drags them.
Currently I am listening to the center_changed event. However that is only called once a drag has been completed, thus the second map only moves after the drag and not during.
My current code looks like this
var mapOptions = {
center: new google.maps.LatLng(52.287373, -1.548609),
zoom: 12,
// streetViewControl: false
disableDefaultUI: true,
// draggable: false,
// disableDoubleClickZoom: false
};
mapOptions["styles"] = dayStyle;
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
backgroundMap = new google.maps.Map(document.getElementById("background-map"),
mapOptions);
google.maps.event.addListener(map, 'center_changed', function() {
// Set backgroundMap to match actual map
backgroundMap.panTo(map.getCenter());
});
google.maps.event.addListener(map, 'zoom_changed', function() {
// Set backgroundMap zoom to be further out than actual map
backgroundMap.setZoom((map.getZoom()-2 >= 1) ? map.getZoom()-2 : 1);
});
But I really want to create the same effect that http://snazzymaps.com/ has. I've already tried using the bindTo method to link the background map to the foreground map. But that also only updates the background map after the drag is complete.

the drag event is the one you want, but use it in conjunction with center_changed, because panning using the keyboard arrows will not fire the drag event.

It appears that my code does work in desktop environments.
However the maps JS API limits it callback rates in mobile environments (I can only assume it's for performance reasons), and thus only calls center_changed once per drag. Unlike the on desktop where it is call far more frequently.

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