Applying custom map styles? about react-google-maps

[winsandymyint]

@anusree-mmlab

const exampleMapStyles = [] //Add some style  
<GoogleMap
    defaultOptions={{ styles: exampleMapStyles }}
    >

Example here
Check fancy map styles here

[frankbo]

For me adding styles as a prop didn't work. I had to add the styles to the defaultOptions prop as one can see in this example.
https://github.com/tomchentw/react-google-maps/blob/master/src/app/pages/basics/StyledMapExample.js
It is also possible to add the custom styles to the options prop as options.styles.

[joshuawootonn]

If one of you can update your links that would make my night :D

[anusree-mmlab]

How can i add custom style on the GoogleMap

import {withGoogleMap, GoogleMap, Marker, Polyline} from "react-google-maps";

<GoogleMap
mapStyles=[style object]

is not working

[asmmahmud]

It is possible using the following way:

const exampleMapStyles = [{
		featureType: "water",
		elementType: "labels.text.fill",
		stylers: [
			{
				color: "#9e9e9e",
			},
		],
	}] //Add some style  
<GoogleMap
    options={{ styles: exampleMapStyles }}
    >

[mrjosshi]

you can find this on here its really useful and easy to use
https://github.com/tomchentw/react-google-maps/blob/master/src/app/constants/fancyMapStyles.json

[jankanty]

Not mapStyles but styles.

[glmagicworks]

@winsandymyint you did it! love you ❤️

[baughmann]

I can confirm @anusree-mmlab method worked for me.

Just put your JSON style into a JS file as so:
export const MyStyle = [ YOUR STYLES HERE]

Then, in your map component:

import { MyStyle } from './MyStyle';

// other stuff

<GoogleMap defaultOptions={{ styles: MyStyle }}
        defaultZoom={8}
        defaultCenter={{ lat: -34.397, lng: 150.644 }} />

[JustFly1984]

@coderdix The repo of this project is unmaintained more than a year, and we had build new version https://www.npmjs.com/package/@react-google-maps/api

We had rewrite it to TypeScript, and updating it frequently: https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api
You can enjoy autocomplete.

You can see our docs: https://react-google-maps-api-docs.netlify.app

Also a lot of examples: https://react-google-maps-api-gatsby-demo.netlify.app/ https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api-gatsby-example/src/examples

The bundle size is much smaller: https://bundlephobia.com/result?p=@react-google-maps/api

Our Spectrum community: https://spectrum.chat/react-google-maps
Our Slack channel: https://join.slack.com/t/react-google-maps-api/shared_invite/enQtODc5ODU1NTY5MzQ4LTBiNTYzZmY1YmVjYzJhZThkMGU0YzUwZjJkNGJmYjk4YjQyYjZhMDk2YThlZGEzNDc0M2RhNjBmMWE4ZTJiMjQ

Enjoy!

[tomchentw]

@zth do you refer to stuff like this?

Custom map style:

http://git.io/vTkmW

Marker and InfoWindow

https://tomchentw.github.io/react-google-maps/#events/event-closure

[wuct]

@zth You can apply all google.map options as props to a <GoogleMap />. For example:

<GoogleMap mapStyles={/* YOUR MAP STYLES*/} />

[tomchentw]

Close this due to inactivity. Thanks @JanKantyPawelski to point that out.

[tomchentw]

New example:
https://tomchentw.github.io/react-google-maps/#!/InfoBox

Please read the documentation site first!

[joshuawootonn]

Hey I am not sure if I actually ever got this working, because I know right now I just have a greyscale filter. But Here is what my component looks like[image: Inline image 1] where styles is [image: Inline image 2] You can find/ create different mapstyle.json on Google map developer site. Good luck!

…

On Tue, Nov 14, 2017 at 1:54 AM, Win Sandy Myint ***@***.***> wrote: @anusree-mmlab <https://github.com/anusree-mmlab> const exampleMapStyles = [] //Add some style <GoogleMap defaultOptions={{ styles: exampleMapStyles }} > Example here <https://tomchentw.github.io/react-google-maps/#!/InfoBox> Check fancy map styles here <https://snazzymaps.com/> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#53 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AT-vXIBmM0k1Hc5tzZ9H0jiQw6noiOwNks5s2UdQgaJpZM4EclFw> .

[coderdix]

Little late to the party but nothing I do seems to quite work. I gave up on having ...

Style data as JSON (from snazzy maps) and placed within a exported variable named "greyMap" and saved the file as mapStyles.js

I then imported it into a component the GoogleMaps component is in import { greyMap } from "./mapStyles"

With my GoogleMaps component looking like
<GoogleMap id="map" zoom={9} center={hasLocation ? currentLocation : center} onLoad={(map) => setMapRef(map)} styles={greyMap} >

I tried defaultOptions={{ style: greyMap }} and got the same results. Not sure what I'm doing wrong!

[coderdix]

I'm using that one I keep searching when I have an issue and posting on the wrong forum lol

[yhoungdev]

my map keeps overflowing

[glmagicworks]

my map keeps overflowing

Can you please provide a screenshoot? And also the code you used in the example for us to be able to reproduce it...

[jesusbubai25]

my map keeps overflowing

Add position property as relative in mapContainerStyle props it will not overflow