Develop Reference

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 Maps in Bootstrap Modal. Pan/zoom mouse gestures not working

I recently had the need to place a map in a bootstrap modal, which works fine except for the ability to pan and zoon with mouse interaction. Panning by clicking and dragging the mouse, and zooming by using the mouse wheel does not seem to work.
I have put up an example of the problem. (I have only tested it in Chromium and Firefox, on Kubuntu)
http://jsfiddle.net/nG9nu/
$("#myModal").on(
'shown.bs.modal',
function () {
var pos = new google.maps.LatLng(63.43, 10.39);
var mapProp = {
center: pos,
zoom: 14,
draggable: false,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapCanvas"),
mapProp);
google.maps.event.trigger(map, "resize");
});
Any ideas what stops the mouse events to reach google maps? Or how to fix this particular problem?
I am very thankfull for all the help I can get :)

var mapProp = {
center: pos,
zoom: 14,
draggable: false,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
I can see
scrollWheel => false
draggable => false
Of course it won't work : set them to 'true'
See this fiddle :http://jsfiddle.net/nG9nu/1/

Google map multiple markers on same location projection on mouseover

I have a google map with multiple markers overlapped on same location.
So i used OverlappingMarkerSpiderfier available in this link https://github.com/jawj/OverlappingMarkerSpiderfier to display multiple markers on same location on click event.
I want to show multiple markers on mouseover event instead of onclick event.
function initialize()
{
var lats22 = document.getElementById('lats1').value;
var lngs22 = document.getElementById('lngs1').value;
// define map center
//alert(lats2);
//var latlng = new google.maps.LatLng(70.44694705960048,-101.953125);
var latlng = new google.maps.LatLng(lats22,lngs22);
// define map options
var myOptions =
{
zoom:9,
center: latlng,
mapTypeId: google.maps.MapTypeId.MAP,
scaleControl: true,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
oms = new OverlappingMarkerSpiderfier(map);
// I have edited click event on oms.addlistener to mouseover as below
oms.addListener(map, 'mouseover', function(event) {
findAddress(event.latLng);
});
}
Here is the jsfiddle link of my edited google map .
Click on marker V in map to see the difference. I want to change this click event to mouseovaer event.
http://jsfiddle.net/5VFeJ/1/

Edit Your oms js file in this link
http://247nywebdesign.com/Testing/FitTipper/php/js/oms.min.js
// edit line43 on jsfiddle as below
oms.addListener(map, 'click', function(event) {
findAddress(event.latLng);
});
Change its "click" event to "mouseover"
http://jsfiddle.net/5VFeJ/1/

Maps API v3: New InfoWindow, with pixelOffset, w/ data from KML.

Hello: I'm making progress on my Google Map (see my previous post: KML markers missing on Google Maps API v3: What's wrong?), but I'm now stuck, and hoping for help.
My custom-styled map pulls from a KML file with about 20 Placemarks.
For design reasons, I want my Placemarks to open on the RIGHT side of the anchor, rather than the default top/center. I've tried searching in vain for a simple way to do this; closest I've come is: Issue with infowindows remaining active when another KML layer is selected - Google Maps API V3, which I can't make work for me.
Here is an example of what I'm looking for: http://nationaltreasures.aircanada.com/ (its InfoWindows open to right).
I think I need to supress the default InfoWindow, create my own that pulls the KML data, and then specify a pixelOffset to my custom InfoWindow, but I can't figure out how to do it.
Thank you in advance!
function initialize() {
var styles = [ ]; // Styles removed to simplify code
var styledMap = new google.maps.StyledMapType(styles,
{name: "HEPAC"});
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(46.69504, -67.69751),
panControl: false,
mapTypeControl: false,
streetViewControl: false,
noClear: true,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
mapTypeControlOptions: {
mapTypeIds: ['map_style', google.maps.MapTypeId.ROADMAP]
}
};
google.maps.visualRefresh = true;
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var opt = { minZoom: 7, maxZoom: 9 }; // Sets minimum & maximum zoom level
map.setOptions(opt);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://hepac.ca/wp-content/mapping/wellnessnetworksl.kml?f=3',
preserveViewport: true,
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

Thanks to #SeanKendle for pointing me in the right direction. Found more or less what I wanted by adding this into my original code.
google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
showInContentWindow(kmlEvent.latLng, kmlEvent.featureData.description);
});
function showInContentWindow(position, text) {
var content = "<div>" + text + "</div>";
var infowindow = new google.maps.InfoWindow({
content: content,
position: position,
pixelOffset: new google.maps.Size(300, 0),
})
infowindow.open(map);
}

antyrat posted about this with an infoWindow to the right of the marker here:
Googlemap custom infowindow
See the link in the accepted answer.
EDIT: Here's an example. Obviously you will want to include InfoBox.js on your page to get access to that plugin. I hope this works, I didn't test it, but it might point you in the right direction:
function initialize() {
var styles = [ ]; // Styles removed to simplify code
var styledMap = new google.maps.StyledMapType(styles,
{name: "HEPAC"});
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(46.69504, -67.69751),
panControl: false,
mapTypeControl: false,
streetViewControl: false,
noClear: true,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
mapTypeControlOptions: {
mapTypeIds: ['map_style', google.maps.MapTypeId.ROADMAP]
}
};
google.maps.visualRefresh = true;
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var opt = { minZoom: 7, maxZoom: 9 }; // Sets minimum & maximum zoom level
map.setOptions(opt);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://hepac.ca/wp-content/mapping/wellnessnetworksl.kml?f=3',
preserveViewport: true,
});
ctaLayer.setMap(map);
google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.description; // ALTER THIS TO POINT TO THE DATA YOU WANT IN THE INFOBOX
var infoBox = new InfoBox({content: text, latlng: kmlEvent.position, map: map});
});
}
Google Maps API says:
Additionally, a click on a KML feature generates a KmlMouseEvent,
which passes the following information:
position indicates the latitude/longitude coordinates at which to anchor the InfoWindow for this KML feature. This position is generally
the clicked location for polygons, polylines, and GroundOverlays, but
the true origin for markers.
pixelOffset indicates the offset from the above position to anchor the InfoWindow "tail." For polygonal objects, this offset is typically
0,0 but for markers includes the height of the marker.
featureData contains a JSON structure of KmlFeatureData.
See this page for more info: KML Feature Details

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);
"