Develop Reference

Is it possible to zoom with googles geocode api?

I can't get my map to zoom in, I tried to edit the zoom property with in the options object, like the normal google maps API but it doesn't work. Any ideas?

Yes, it´s possible.
For example using zoom attribute as follows:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: -34.397, lng: 150.644}
});
var geocoder = new google.maps.Geocoder();
document.getElementById('submit').addEventListener('click', function() {
geocodeAddress(geocoder, map);
});
}

Gmap API: Load transitLayer after initialization

I am using the Gmap API to display a Google Map with a transitLayer. I am trying to improve the PageSpeed of my website. One of the things that would help is if I could load the transitLayer AFTER the Google Map is initialized. I have created a fiddle in which the Google Map is initialized with the transitLayer. Is it possible to add the transitLayer AFTER the google map is initialized?
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 51.501904, lng: -0.115871}
});
var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);
}

I am not sure what do you mean saying AFTER the google map is initialized. I suppose you can use one of the events defined for the Map class, for example tilesloaded or idle.
https://developers.google.com/maps/documentation/javascript/reference#Map
So, the code might something like
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 51.501904, lng: -0.115871}
});
google.maps.event.addListenerOnce(map, "idle", function() {
var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);
});
}

Embedding google street view on website

On a website I am building I have a google map as a background of a contact form. It looks nice, but I would like to convert the google map into the google street view to get a nice picture of the building so they know exactly where they are going.
I have been trying to follow the google site to convert my code over to the street view version, but I seem to be missing something and can't quite figure out what.
Some help would be gratefully appreciated. I've never done a street view map before.
The code I have currently looks like this
var mapOptions = {
zoom: 20,
center: map_center,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
var map = new google.maps.Map( document.getElementById( 'map-canvas' ), mapOptions );
var beachMarker = new google.maps.Marker({
position: new google.maps.LatLng(pos_a1, pos_b1), //my position I have stored as variables to make it cleaner
map: map,
});
and I have tried
var mapOptions = {
zoom: 1,
center: map_center,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
var map = new google.maps.StreetViewPanorama( document.getElementById( 'map-canvas' ), mapOptions );
myPano.setVisible(true);
var beachMarker = new google.maps.Marker({
position: new google.maps.LatLng(pos_a1, pos_b1),
map: map,
});
but the map just disappears.

A StreetViewPanorama expects a position-parameter instead of center.
Furthermore you use 2 different variables(map and myPano)
This would work(when there is a panorama available for the given position):
var panoOptions = {
position: map_center,
scrollwheel: false
}
var myPano = new google.maps
.StreetViewPanorama( document.getElementById( 'map-canvas' ),
panoOptions );

Google Maps: set StyledMapType with Terrain

Problem: I want to use a google maps v3 terrain map with own styles as an own mapType.
I started with this code:
var mapOptions = {
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.TERRAIN,
styles: styles
};
It shows my terrain with my own styles. Thats okay!
Now, i want too add this to the mapTypeIds
var styledMap = new google.maps.StyledMapType(styles, {
name: "NSW"
});
var mapOptions = {
scrollwheel: false,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.TERRAIN, 'map_style']
}
};
var map = new google.maps.Map(map_id[0],
mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
The problem is, google maps uses "ROADMAP" for the "StyledMapType" and i've no idea how to change this to "TERRAIN". Is that even possible?
Update:
As you can see, "roadmap" is default. In the main.js from the google maps api there is the line:
k=c.baseMapTypeId||"roadmap"
So, what is the baseMapTypeId? The one, which i set in the mapOptions like:
mapTypeId: google.maps.MapTypeId.TERRAIN
???
May, this helps to solve my Problem.

You can do it this way:
var styles = [{
"stylers": [{
"saturation": -100
}]
}];
var styledMap = new google.maps.StyledMapType(styles, {
name: "Name of your style"
});
var myLatlng = new google.maps.LatLng(10, 10);
var map = new google.maps.Map(document.getElementById("map-canvas"), {
scrollwheel: false,
center: myLatlng,
zoom: 10
});
map.mapTypes.set('NSW', styledMap);
var mapTypeControlOptions = {
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.TERRAIN, 'NSW']
}
};
map.setOptions(mapTypeControlOptions);
Note that the name of your StyledMapType is the name that will be displayed on the map, and the id of your MapStyle that you declare with the set method is what you need to use to reference your map style.
Hope this helps!
JSFiddle demo
Edit:
If you want to apply custom styles over the TERRAIN map style, you could do it by setting the styles of the current map type. You can add a custom control to your map to handle the toggling.
JSFiddle demo

It is possible to set a different base map for StyledMapType.
Note the second argument. You've actually figured this out by yourself, based on your screenshot and updated comment.
new google.maps.StyledMapType(styles, { baseMapTypeId: google.maps.MapTypeId.TERRAIN })

Google Map KML layer - click event return ZERO_RESULTS

I am working with the Google Maps KML layer click event.
I am using this code:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(41.875696, -87.624207),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var ctaLayer = new google.maps.KmlLayer('https://sites.google.com/site/anoopkml123/kml/ab9Plan0520.kmz');
ctaLayer.setMap(map);
google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
alert(kmlEvent.featureData.name);
});
}
Sometimes alert(kmlEvent.featureData.name) shows a number but sometimes it's 'undefined'.
Sometimes obj.featuredData.id is null (ZERO_RESULTS status is in status field).

Re-created your code in a fiddle: http://jsfiddle.net/mdares/TAfys/
I cannot replicate the issue you are having. Can you provide an example given the above link of where it fails? Is this possibly browser specific? Finally - is there any additional code you haven't posted which might be the cause? My code is unchanged from yours as you posted, but I am curious if you are also doing other things:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(41.875696, -87.624207),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var ctaLayer = new google.maps.KmlLayer('https://sites.google.com/site/anoopkml123/kml/ab9Plan0520.kmz');
ctaLayer.setMap(map);
google.maps.event.addListener(ctaLayer, 'click', function (kmlEvent) {
alert(kmlEvent.featureData.name);
});
}