Develop Reference

Differences in fonts and location markers in Google Maps Styling Wizard vs JavaScript API output

I've searched through the Google Maps JavaScript API documentation and I can't seem to find the appropriate options to make my map's labels and location markers look like this:
Rather than this:
I realize the differences are subtle but it's what my client wants.
Using the Google Maps Styling Wizard, the styles on the top image appear to be produced by the Standard map with no styling at all (the JSON produced is just an empty array).
The closest I can get is the bottom image, using the following (which is not much more than just the default options):
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 26.769528, lng: -82.265607},
zoom: 15,
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'terrain'],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
fullscreenControl: false,
streetViewControl: false
});
Any guidance would be greatly appreciated.

#xomena was correct - the tile style has changed in the release and experimental version. Had to use the previous version of 3.31 to match the look.

Initializing two leaflet maps - one rewrites another

I'm trying to put multiple leaflet maps on one page, but I have problem with two of them - the second one rewrites the first one, so first one is rendering map, and the second has just grey area.
Here is the code:
var map_a = new L.Map( "smallMap", {
fullscreenControl: false,
layers: [osmMap]
}).setView([51.005, -0.09], 14);
var map_b = new L.Map( "smallMapSecond", {
fullscreenControl: false,
layers: [osmMap]
}).setView([51.505, -0.09], 14);
I have appropriate divs called smallMap and smallMapSecond. When I Initialize only one map, it works. Where could be the problem?

Well,one of the potential problems I see here without having a jsFiddle available is that you are using the same tileLayer osmMap for both maps. Sharing TileLayers between map instances is going to cause problems. Initialize tileLayers one per map.

interact with geojson layers independently in google maps api v3

I would like to load two geojson layers to my map and be able to style them independently with different rules. I can display both my geojson files with the below code, but since they are both part of the same map.data object I have only been able to apply universal styling to both. Is there any way around this? Ultimately(longer term goal) I would also like to be able to toggle the different layers on and off with a checkbox as well (I am focusing on independent styling first so as not to overcomplicate the problem)
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 12,
center: {lat: 39.218509, lng: -94.563703}
});
map.data.loadGeoJson('https://url1');
map.data.loadGeoJson('https://url2');
map.data.setStyle(function(feature) { //styling rules here}
google.maps.event.addDomListener(window, 'load', initialize);
any help would be very much appreciated. I saw some threads that looked applicable (such as Google maps GeoJSON- toggle marker layers?) but I wasn't sure how to apply it specifically for my purposes.

So I just had to do something similar and needed to add 2 geojson files and style them differently. What you want to do is initialize the map and then add 2 different layers. Basically set the styling for both. Below is my code with notes. I actually used this function Angular in a service and returned a promise.
Set up your map options
var mapOptions = {
zoom: 4,
scrollwheel: false,
center: new google.maps.LatLng(40.00, -98),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Set your map to a variable.
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
Initialize 2 variable that will take layers. I did state and county.
var countyLayer = new google.maps.Data();
var stateLayer = new google.maps.Data();
Then load the GeoJson files for each layer.
countyLayer.loadGeoJson('counties.json');
stateLayer.loadGeoJson('states.json');
After that set the style for each layer.
stateLayer.setStyle({
strokeColor: 'red',
strokeWeight: 5
});
countyLayer.setStyle({
strokeColor: 'black',
strokeWeight: 1
});
The last step is to set the layer to the map.
countyLayer.setMap(map);
stateLayer.setMap(map);
After this I returned a promise but you could just return the map object. Does this make sense / help answer your question?
Also, within each layer setStyle() function you can add dynamic styling through functions. Like add a function to fillColor that would change the color based on data in the GeoJson file.

Angular google Maps

Hi i am currently working on angular Google maps https://github.com/dylanfprice/angular-gm
i am facing difficulties in setting the bounds and map center
<gm-map gm-map-id="'infoWindows'" gm-center="options.map.center" gm-zoom="options.map.zoom" gm-bounds="bounds" gm-map-options="options.map" class="map">
<gm-markers gm-objects="clinics"
gm-get-lat-lng="{ lat: object.practice.latitude, lng: object.practice.longitude }"
gm-get-marker-options="{ title: object.practice.name }"
gm-on-click="clk = object; infoWindow.open(marker.getMap(), marker);">
</gm-markers>
</gm-map>

make sure your map is already loaded.
therefor it is highly recommended to use promises.
var gmapPromise = angulargmContainer.getMapPromise('<mapId>');
gmapPromise.then(function(gmap) {
$scope.myGoogleMap = gmap;
});
In your case would be 'infoWindows'.
as there is to less context in your question, i can't really give you an answer what is wrong with your particular code but i'll give you some snippet which is always useful:
$scope.updateGoogleMap = function(map, options) {
// triggers a resize of the map and sets the correct center position
// requires a google map object and a google maps mapOptions object
$timeout(function(){
google.maps.event.trigger(map, 'resize');
map.setOptions(options);
});
};
a Google Maps mapOption object looks like this:
{
center: new google.maps.LatLng(47.123, 10.123),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
as ng-hide/show lead to some google maps resize misbehaviour, you might wanna call this when toggling views.
**by the way, if your are using the gm-map-options tag with a valid google.maps.MapOptions, you don't need the the extra 'gm-bounds', 'gm-zoom' or 'gm-center' arguments

Google map loads static image

I am using google map API in my project. My code is :
var map;
var op = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("container"), op);
My problem is that google loads a static image instead of an interactive map. I also tried
useStaticMap: false in options but after using this it loads nothing, (no map, no image).
Please tell me whats going on here?

150.644, -34.397, this coordinate doesn't exists

When you say static map does that mean that you can't zoom, pan, etc. It's been a while since I worked with Google Maps, but as I recall you can provide settings that would enable the zooming and panning. Try enabling those features as opposed to using the static map. Or conversely maybe you have disabled them.
I guess it could also be the javasscript file that you are including. Also, there are two API's and it seems like you can have two different API keys. Maybe you have the static one. So there are about three different options there. Most likely one of those is the issue because the code is very small and looks well formed to me.
API v3
https://developers.google.com/maps/documentation/javascript/tutorial
Static Maps
https://developers.google.com/maps/documentation/staticmaps/
I would try adding a control. Or maybe giving us a little more of your code.
Adding Controls to the Map
You may wish to tailor your interface by removing, adding, or modifying UI behavior or controls and ensure that future updates don't alter this behavior. If you wish to only add or modify existing behavior, you need to ensure that the control is explicitly added to your application.
Some controls appear on the map by default while others will not appear unless you specifically request them. Adding or removing controls from the map is specified in the following Map options object's fields, which you set to true to make them visible or set to false to hide them:
{
panControl: boolean,
zoomControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean,
streetViewControl: boolean,
overviewMapControl: boolean
}
The following example sets the map to hide the navigation (Zoom and Pan) controls and display the scale control. Note that we do not explicitly disable the default UI, so these modifications are additive to the default UI behavior.
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
panControl: false,
zoomControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
Here is the reference to the code.
https://developers.google.com/maps/documentation/javascript/controls