How do I pass in options to React Google Map?

up vote
0
down vote

favorite

I'm trying to make my google map require Ctrl (Command on mac) + scroll to zoom in and out instead of just scroll. In the documentation, it says I need to change gestureHandling to coopertive, but I'm having trouble passing it in to map options.

I've tried:

  <Map options={{ gestureHandling: 'coopertive' }}

       style={style}

       google={props.google}

       zoom={2}>



    {listMarkers}

  </Map>

and I've also tried:

  <Map

       style={style}

       google={props.google}

       zoom={2}

       gestureHandling= 'coopertive'>



    {listMarkers}

  </Map>

reactjs google-maps

share|improve this question

asked yesterday

peter176

228

add a comment | 

up vote
0
down vote

favorite

I'm trying to make my google map require Ctrl (Command on mac) + scroll to zoom in and out instead of just scroll. In the documentation, it says I need to change gestureHandling to coopertive, but I'm having trouble passing it in to map options.

I've tried:

  <Map options={{ gestureHandling: 'coopertive' }}

       style={style}

       google={props.google}

       zoom={2}>



    {listMarkers}

  </Map>

and I've also tried:

  <Map

       style={style}

       google={props.google}

       zoom={2}

       gestureHandling= 'coopertive'>



    {listMarkers}

  </Map>

reactjs google-maps

share|improve this question

asked yesterday

peter176

228

add a comment | 

up vote
0
down vote

favorite

up vote
0
down vote

favorite

I'm trying to make my google map require Ctrl (Command on mac) + scroll to zoom in and out instead of just scroll. In the documentation, it says I need to change gestureHandling to coopertive, but I'm having trouble passing it in to map options.

I've tried:

  <Map options={{ gestureHandling: 'coopertive' }}

       style={style}

       google={props.google}

       zoom={2}>



    {listMarkers}

  </Map>

and I've also tried:

  <Map

       style={style}

       google={props.google}

       zoom={2}

       gestureHandling= 'coopertive'>



    {listMarkers}

  </Map>

reactjs google-maps

share|improve this question

asked yesterday

peter176

228

I'm trying to make my google map require Ctrl (Command on mac) + scroll to zoom in and out instead of just scroll. In the documentation, it says I need to change gestureHandling to coopertive, but I'm having trouble passing it in to map options.

I've tried:

  <Map options={{ gestureHandling: 'coopertive' }}

       style={style}

       google={props.google}

       zoom={2}>



    {listMarkers}

  </Map>

and I've also tried:

  <Map

       style={style}

       google={props.google}

       zoom={2}

       gestureHandling= 'coopertive'>



    {listMarkers}

  </Map>

reactjs google-maps

reactjs google-maps

share|improve this question

asked yesterday

peter176

228

share|improve this question

asked yesterday

peter176

228

share|improve this question

share|improve this question

asked yesterday

peter176

228

asked yesterday

peter176

228

asked yesterday

peter176

228

228

add a comment | 

add a comment | 

1 Answer
1

active

oldest

votes

up vote
0
down vote

It is hard to answer this question without knowing which Google Maps implementation you did, was it directly from Google Maps API or from a third part React Component?

---

Anyway, supposing that you implemented the Google Maps API directly, the gestureHandling option from Google Maps API can be set in two ways:

1) As option when creating a new instance of google.maps.Map:

const map = new google.maps.Map(document.getElementById('map'), {

          center: {lat: -34.397, lng: 150.644},

          zoom: 8,

          gestureHandling: 'cooperative'

        });

Documentation: Google Maps gestureHandling

2) Or as a parameter from google.maps.MapOptions method:

const map = new google.maps.Map(document.getElementById('map'), {

          center: {lat: -34.397, lng: 150.644},

          zoom: 8,

        });



map.setOptions({ gestureHandling: 'cooperative' });

Documentation: Google Maps Map Options

share|improve this answer

answered yesterday

Marcos Gonçalves

341

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Ah thank you. I didn't realize I was using a third party package.
  – peter176
  yesterday
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372581%2fhow-do-i-pass-in-options-to-react-google-map%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

active

oldest

votes

active

oldest

votes

up vote
0
down vote

It is hard to answer this question without knowing which Google Maps implementation you did, was it directly from Google Maps API or from a third part React Component?

---

Anyway, supposing that you implemented the Google Maps API directly, the gestureHandling option from Google Maps API can be set in two ways:

1) As option when creating a new instance of google.maps.Map:

const map = new google.maps.Map(document.getElementById('map'), {

          center: {lat: -34.397, lng: 150.644},

          zoom: 8,

          gestureHandling: 'cooperative'

        });

Documentation: Google Maps gestureHandling

2) Or as a parameter from google.maps.MapOptions method:

const map = new google.maps.Map(document.getElementById('map'), {

          center: {lat: -34.397, lng: 150.644},

          zoom: 8,

        });



map.setOptions({ gestureHandling: 'cooperative' });

Documentation: Google Maps Map Options

share|improve this answer

answered yesterday

Marcos Gonçalves

341

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Ah thank you. I didn't realize I was using a third party package.
  – peter176
  yesterday
  

  
  
  
  

add a comment | 

up vote
0
down vote

It is hard to answer this question without knowing which Google Maps implementation you did, was it directly from Google Maps API or from a third part React Component?

---

Anyway, supposing that you implemented the Google Maps API directly, the gestureHandling option from Google Maps API can be set in two ways:

1) As option when creating a new instance of google.maps.Map:

const map = new google.maps.Map(document.getElementById('map'), {

          center: {lat: -34.397, lng: 150.644},

          zoom: 8,

          gestureHandling: 'cooperative'

        });

Documentation: Google Maps gestureHandling

2) Or as a parameter from google.maps.MapOptions method:

const map = new google.maps.Map(document.getElementById('map'), {

          center: {lat: -34.397, lng: 150.644},

          zoom: 8,

        });



map.setOptions({ gestureHandling: 'cooperative' });

Documentation: Google Maps Map Options

share|improve this answer

answered yesterday

Marcos Gonçalves

341

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Ah thank you. I didn't realize I was using a third party package.
  – peter176
  yesterday
  

  
  
  
  

add a comment | 

up vote
0
down vote

up vote
0
down vote

It is hard to answer this question without knowing which Google Maps implementation you did, was it directly from Google Maps API or from a third part React Component?

---

Anyway, supposing that you implemented the Google Maps API directly, the gestureHandling option from Google Maps API can be set in two ways:

1) As option when creating a new instance of google.maps.Map:

const map = new google.maps.Map(document.getElementById('map'), {

          center: {lat: -34.397, lng: 150.644},

          zoom: 8,

          gestureHandling: 'cooperative'

        });

Documentation: Google Maps gestureHandling

2) Or as a parameter from google.maps.MapOptions method:

const map = new google.maps.Map(document.getElementById('map'), {

          center: {lat: -34.397, lng: 150.644},

          zoom: 8,

        });



map.setOptions({ gestureHandling: 'cooperative' });

Documentation: Google Maps Map Options

share|improve this answer

answered yesterday

Marcos Gonçalves

341

It is hard to answer this question without knowing which Google Maps implementation you did, was it directly from Google Maps API or from a third part React Component?

---

Anyway, supposing that you implemented the Google Maps API directly, the gestureHandling option from Google Maps API can be set in two ways:

1) As option when creating a new instance of google.maps.Map:

const map = new google.maps.Map(document.getElementById('map'), {

          center: {lat: -34.397, lng: 150.644},

          zoom: 8,

          gestureHandling: 'cooperative'

        });

Documentation: Google Maps gestureHandling

2) Or as a parameter from google.maps.MapOptions method:

const map = new google.maps.Map(document.getElementById('map'), {

          center: {lat: -34.397, lng: 150.644},

          zoom: 8,

        });



map.setOptions({ gestureHandling: 'cooperative' });

Documentation: Google Maps Map Options

share|improve this answer

answered yesterday

Marcos Gonçalves

341

share|improve this answer

share|improve this answer

answered yesterday

Marcos Gonçalves

341

answered yesterday

Marcos Gonçalves

341

answered yesterday

Marcos Gonçalves

341

341

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Ah thank you. I didn't realize I was using a third party package.
  – peter176
  yesterday
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Ah thank you. I didn't realize I was using a third party package.
  – peter176
  yesterday
  

  
  
  
  

Ah thank you. I didn't realize I was using a third party package.
– peter176
yesterday

Ah thank you. I didn't realize I was using a third party package.
– peter176
yesterday

add a comment | 

 

draft saved

draft discarded

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372581%2fhow-do-i-pass-in-options-to-react-google-map%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here