Develop Reference

OpenWeatherMap's Weather map PNG is not overlaying properly on Open Street Map

devs I am trying to implement a simple weather map that shows temperature using react.
So far I have successfully created a map and have been able to overlay an image from OpenWeatherMap's Weathermap API.
now when I overlay them, there is zoom offset and location offset. I'm trying to wrap my head around this, but no use.
You can see my code here on codesandbox
how do I solve this?
also, I'm trying to convert latitude and longitude to X and Y using the formula from
this website

Converting an HTML element to a String/Object

I'm creating an AngularJS app that basically has a table and a search bar. The table is locations, and when you click on a link its supposed to take you to said location via an embedded Google Map. Im having trouble with the Map when I try to Pan it to the new location. Here is what the app looks:
Is there anyway to be able to click on a name/coordinates (name is preferred so I can remove the coordinates column) and convert the coordinates to a string/object that I can use to set a location on Google Maps?
Thanks in advance!!!

Convert Google Map to static image for download using jQuery

I have a div on my website in which I have created a GoogleMap. I've added markers and implemented MarkerClusterer.
I want to allow the user to click a button and download an image of the currently viewed map as they see it after any zooming or moving including markers:
I tried to use html2canvas and that doesn't work at all.
After searching for how to do this for the last hour, I've come up with absolutely nothing useful.
Is this even possible to capture the div as the user sees it? Or is creating a static google map and saving the image the only way to do this?
SOLUTION
I went with PhantomJS in the end. I created a Map view which takes input through the querystring and uses that data to add markers to a map. I then used PhantomJS to take screenshots from the map view. I then output the screenshot image as a Base64 string.

SnapshotControl is suggested by google in such situations. The limitation is that SnapshotControl supports only URL of upto 2048 characters. So it can be used if there are not much layers drawn on map.
For phantom js, when user clicks on download, the layer data drawn on map should be send to server (through say downloadServlet). This data will be passed to a JSP that can render a map and plot point. Phantomjs will be executed by downloadServlet passing the URL of this jsp.
I have used phantomjs in my application as I draw around 4-5 different layers at a time. Only thing to note here is that the server where phantomjs would be executed needs to have internet connectivity otherwise maps will not be drawn.

Your best solution is Static Google Maps.
See https://developers.google.com/maps/documentation/static-maps/intro for plenty of examples.
Create an image in your div, I would then recommend using concatenation to produce a dynamic url from your marker/LatLng/Polyline etc variables. Then use JS to set the image's src equal to that url.
Following that, there are plenty of JS libraries that will allow the user to download the image.

Google like customize and preview embedded map in my site?

i whant to have something similar like googles customize and preview embedded map. is it possible that users just find location on the map, type in the size they want and just copy the generated code?

What it sounds like is that you want to allow people to select and save a custom Google map of their own within your app.
A simple way to do so would be using Google maps APIto create a map inside a container dom element. You would then allow user to resize the container element which would essentially allow them to position the map and also their chosen size.
When the user is finished resizing and positioning, you would need to make another call to the API to get the current lat/long of the map as well as getting the dimensions of the container. With the lat/long and container dimensions saved, this should be enough information for you to save the users custom map.
Hope this helps.

Add Google "My Maps" Layer to Google Maps Javascript API

I want to put a Google Maps map on our website.
I know that custom markers can be added to a map with Javascript, but I'd rather use Google's MyMaps service instead, because then my co-workers could edit the map without any programming knowledge.
You can add a custom My Map to websites with an embedded iframe. I'm using the Javascript API instead though, so that I can take advantage of the controls the API delivers (such as zoom through custom controls or changing the position on the map without touching the map itself).
Can I insert the map created and saved with My Maps as a layer in my JS API map?

You can use GGeoXml to add My Maps content to your API map.
In your My Map there's a "View in Google Earth" link, use the URL of that link as your GGeoXml URL.
The link generates an indirect "network link" reference to the data, so the map on your page will reflect the latest changes made to the My Map.
The downside is that there's a limit to how many markers you can place on one page of a My Map, and the "View in Google Earth" link only returns data for the current My Maps page.

Another strategy is to use GeometryControls in your own API map.
That involves a lot more coding effort on your side. It gives the same look and feel to your co-workers, so they still need no programming skills. The advantage is that it bypasses the My Maps limit to the number of markers that can be displayed at once.

Apparently you can embed the My Map you created in your website by using the Link To This Page functionality as described here.