Develop Reference

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

How do I display business information using Google Maps API?

Previously, I would have gone to google, grabbed an iframe from the description of the organisation and simply pasted it into the page I was working on. The information box would show information about the business such as full address, phone number and website, etc. (see image below):
After deciding to redo my website from scratch I decided I would try to update the map as well. There were a couple of reasons for this. The new Google Maps looks more polished (personal preference) and using the API I could stylize the map to fit the color scheme of my site.
I started with a fairly simple bit of javascript:
function initialize(data) {
var map;
var someLoc = new google.maps.LatLng(####,#####);
var MY_MAPTYPE_ID = 'custom_style';
var featureOpts = [
{
"stylers": [
{ "hue": "#8800ff" },
{ "lightness": 33 }
]
}
]
var mapOptions = {
zoom: 12,
center: someLoc,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
var styledMapOptions = {
name: 'Custom Style'
};
var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
}
$(document).ready(function(){
google.maps.event.addDomListener(window, 'load', initialize);
});
This gives me the following map:
However, I would like to display a marker for the business location and associated information so I add:
var marker = new google.maps.Marker({
position: someLoc,
map: map,
title: 'Hello World!'
});
}
But this means I get the organisation displayed on the map and the marker I have just created:
Is it possible to get the same result as the iframe (first image) using the Google Maps API (V3)? Essentially I would like to get to show the associated information of the business when the page loads so I have something similar to:

Okay, I found a fairly simple solution.
Set the maxZoom level so only the pin you create can be seen:
var mapOptions = {
zoom: 12,
maxZoom: 16,
center: myLoc,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};
Then add any other information using an information window.

Marker on google map are not shown after map loads

I use jquery.ui.map to load markers on google map, and this is part of my code:
var ip = new google.maps.LatLng(lat, longt);
var mapOptions = {
zoom: 4,
center: ip,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
$('#map_canvas').gmap(mapOptions);
var marker = $('#map_canvas').gmap('addMarker', {
'position': ip,
'bounds': true,
'title':'Your location'
});
While the map is loading I can see the markers, but when everything are loaded the markers disappear and no marker is shown on the map, while we have them, if you take a look at this screen shot you will see that we have the marker (because we can see the marker title when we hover on it) but we cannot see it...
Screen shot: http://s15.postimg.org/5zlsbxwhn/scmap.jpg
The Demo page: http://bev.dev.beardo.co/encontre/

You have to use marker.setMap(map)
I have a nice example on github

Google Maps buttons not showing

I have a problem with google maps. When i firstly embeeded iframe to my page on ipad i saw buttons like streetview under the map. When i switched maps to be generated from system data, and rendering using javascript api buttons are gone?
Is there a way to show them again, is it just an options that needs to be added to map or buttons only work when using iframe?
var map;
var service;
var infowindow;
function initializeMap() {
var slocation = new google.maps.LatLng(x,y);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: slocation,
zoom: 15
});
var infowindow = new google.maps.InfoWindow({
content: 'example content'
});
var marker = new google.maps.Marker({
position: slocation,
map: map,
title: ' example title'
});
infowindow.open(map, marker);
}
the buttons that i want to achive are http://imageshack.us/photo/my-images/43/buttonsuv.png/

In your code, add this option streetViewControl: true
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: slocation,
zoom: 15,
streetViewControl: true
});
Have a look at this, it summarises all of the street view options.
UPDATE
After the question update, I realise you want your custom image on the street view icon.
That's not possible.
One workaround is to define a custom control on the map, and link events to it with the streetview events.
I've never done it, however you might want to have a look at this