Develop Reference

Javascript Google Map not working

I'm new to Google Maps api and its library. I wonder why I'm not seeing the map in my page.
This is the code:
<script src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<script>
var latlong = new google.maps.LatLng(-0.179041, -78.499211);
console.log(latlong);
var mapOptions = {
zoom: 13,
center: latlong,
disableDefaultUI: false,
navigationControl: false,
mapTypeControl: false,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('city_map'),
mapOptions);
console.log(map);
google.maps.event.trigger(map, 'resize');
map.setZoom(map.getZoom());
var marker = new google.maps.Marker({
position: latlong,
map: map,
title: "Test"
});
</script>
You see I'm console.logging the latlong and the map, they look fine.. anyway, I hope it is not something extremely obvious.

You dont have height and width attached to the div, thats why. Check out this fiddle.
#city_map{
min-height:300px;
min-width:300px;
}
https://jsfiddle.net/dm7j7494/1/

Simulate click on tab Bootstrap, JavaScript, Html5

I am working with bootstrap, php, html5 and javascript.
I want to active the following javascript code without clicking on the tab "#mymap".
So I want to simulate a click there.
$('.nav-tabs a[href="#mymap"]').on('shown.bs.tab', function(event){
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: {lat: 48.614399, lng: 21.616646},
scrollwheel: true,
zoom: 2,
mapTypeId: google.maps.MapTypeId.HYBRID
});
});
How can I create a javascript function to do that and call it from the PHP code? Or is there another way to do that?

That is a Javascript function to do that.
Change it to this:
var doClickFunct = function(){
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: {lat: 48.614399, lng: 21.616646},
scrollwheel: true,
zoom: 2,
mapTypeId: google.maps.MapTypeId.HYBRID
};
$('.nav-tabs a[href="#mymap"]').on('shown.bs.tab', doClickFunct});
Then whenever you want to execute it just call doClickFunct()

latLng returns null - Google maps javascript API

Ok so here is the file. It was working some days ago. I haven't really changed anything so i do not know why latLng does not work now.
here is my code
function map_initialize() {
var googleMapOptions = {
center: mapCenter, // map center
zoom: 17, //zoom level, 0 = earth view to higher value
maxZoom: 18,
minZoom: 10,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL //zoom control size
},
scaleControl: true, // enable scale control
mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
};
map = new google.maps.Map(document.getElementById("google_map"), googleMapOptions);
console.log(map);
//Right Click to Drop a New Marker
google.maps.event.addListener(map, 'rightclick', function(event) {
//Drop a new Marker with location Form
create_marker(event.latLng, 'New Marker', true, true, true);
});
when i console.log(event.latLng); it returns an empty object.

console.log(event.latLng.lat());
tried with mousedown listener , it works

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

Removing all controls from a google map

I am trying to remove all the controls (zoom, map type drop down, and street view) from my map.
There's a method
map.removeControl(GControl)
but I haven't been able to successfully remove any default ones that I hadn't added myself.
Any tips on remove/clearing all controls from the map?

Have you tried this:
http://code.google.com/apis/maps/documentation/javascript/controls.html#DisablingDefaults
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}

You may see this: google map api by w3schools
As you see in the link, this disables all controls:
var mapOptions = {disableDefaultUI: true}
and the bellow is the options to make them enabled or disabled.
var mapOptions = {
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
rotateControl: true
}

just disableDefaultUI: true
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -33, lng: 151},
disableDefaultUI: true
});
}

I believe you can create a copy of the GMapUIOptions object and then remove the items you don't want to appear.
From http://code.google.com/apis/maps/documentation/javascript/v2/controls.html#MapUIOptions
"Using the GMapUIOptions Object
The GMapUIOptions object contains a set of properties that specify control placement and UI behavior, which you may modify. For a full set of properties, see the GMapUIOptions reference.
Rather than write a GMapUIOptions structure from scratch, you may wish to prepopulate it with the UI behavior available on Google Maps. To do so, use the GMap2.getDefaultUI() method. Once populated, you can modify individual properties to tweak the behavior and initialize the map's UI controls using the GMap2.setUI() method.
The following code retrieves the default UI on a "large" map, removes the GScaleControl and resets the map to use the modified UI.
map = new GMap2(document.getElementById("map_canvas"),
{ size: new GSize(400,150) } );
map.setCenter(new GLatLng(41.897997,-87.790203), 11);
var customUI = map.getDefaultUI();
customUI.controls.scalecontrol = false;
map.setUI(customUI);
"