-2

I'm using react-google-maps for my app. The map and markers work when running locally. However in my deployed version on Vercel, the map is there- but not the markers. The way I'm defining the markers is through a mapping similar to:

{propertyLocalTest.map((property)=>( 

                        <Marker
                        key = {property.slug}
                        icon = {icon}
                        
                        position={{ 
                            lat: parseFloat(property.fields.latitude),
                            lng: parseFloat(property.fields.longitude)  
                        }}
                        />
                    ))}

In another project I noticed img attributes I had given opacities of 60%, being constantly set to opacity 1% when deployed; this was an easy fix- changing % to decimals. I'm thinking something similar is occurring as an individual hardcoded marker (with Lat and Lng) will show up, but when an array of hardcoded lat and lngs is mapped to a Marker element these will only show up locally, and never when deployed.

I don't have the luxury of inspecting the individual markers within a google map to confirm if this is in-fact the problem. Are there any recommendations on how to diagnose/solve the problem?

In summary: All functionality will work as expected when running locally, but only individual markers that are not mapped will appear when the app is hosted.

My question: Are there any obvious discrepancies between deployed react apps and apps running locally?

yahms23
  • 326
  • 2
  • 11
  • 1
    Did you check console? Any errors or warnings? – demkovych Jun 29 '20 at 14:28
  • None appearing that are related to this component. I have one for a deprecated package, but I'm not using that at all in this side of the app. – yahms23 Jun 29 '20 at 14:29
  • I mean in browser console. I'm using this package too with a 1000 markers and no problem. – demkovych Jun 29 '20 at 14:30
  • ahh, there is one that is related to the maps: Warning: Legacy context API has been detected within a strict-mode tree. The old API will be supported in all 16.x releases, but applications using it should migrate to the new version. Please update the following components: withGoogleMap(MapContainer) – yahms23 Jun 29 '20 at 14:33
  • not too sure why it would work locally however... I'll try and solve this. I assume your markers are mapped using the same package no problem? – yahms23 Jun 29 '20 at 14:33
  • yes, update to a new versions and everything should be fine. The another problem could be with icon path. It resolves in different ways on dev and prod – demkovych Jun 29 '20 at 14:35
  • Thank you. I think I've tried with the default markers before and no change in result, but will go through with the updating – yahms23 Jun 29 '20 at 14:40
  • What steps would you take to update the package's props yourself? I've found the file but quite confused as to what it should actually entail – yahms23 Jun 29 '20 at 14:50
  • I'm using `@react-google-maps/api` https://www.npmjs.com/package/@react-google-maps/api – demkovych Jun 29 '20 at 14:54
  • Thanks for your advice! Unfortunately the problem is still persisting! I've successfully transferred to `@react-google-maps/api` and also changed markers to default ones: again working locally- but I deploy and no markers except the non-mapped one. Really confused as to what is causing this. And all console errors have disappeared which is a plus but old issue remains – yahms23 Jun 29 '20 at 15:56
  • what's your `propertyLocalTest` data and what's your `icon` data? – demkovych Jun 30 '20 at 07:44
  • `propertyLocalTest` is an array structured like this: `const propertyLocalTest =[ {fields: {longitude: "-1.619226", latitude: "55.006889"}}, {fields: {longitude: "-1.610750", latitude: "54.975522"}} ]` and `icon` is a file pathway to the icon I'm using – yahms23 Jun 30 '20 at 07:57
  • what exactly path? – demkovych Jun 30 '20 at 07:59
  • should be like that: `icon="/images/icon.svg"` where `images` is a folder inside `public` folder – demkovych Jun 30 '20 at 08:06
  • I'll try the structure you've given for pathway. But I think it won't change as even when **not** adding an `icon` the markers still won't show up deployed – yahms23 Jun 30 '20 at 08:11
  • icon should has relative path right from public folder, especially if you are using create-react-app and made prod build. – demkovych Jun 30 '20 at 08:14
  • I get the console error `Module not found: You attempted to import ../../../public/images/addressresize.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.` – yahms23 Jun 30 '20 at 08:23
  • If it worked locally why wouldn't it when deplyed? – yahms23 Jun 30 '20 at 08:24
  • because webpack prod build overrides main path. You should use exactly `/public/images/addressresize.png` – demkovych Jun 30 '20 at 08:25
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/216918/discussion-between-yahms23-and-demkovych). – yahms23 Jun 30 '20 at 08:29

1 Answers1

0

What ended up working: was not using the mapping function and instead calling a custom function that uses a for loop instead of mapping and returns/renders the outputs.

yahms23
  • 326
  • 2
  • 11