Styling Google Maps API to look like Google Maps on Mac - javascript

Brief Explanation
I had not noticed this until my designer sent me a PSD of a new website including a Google Maps page with some cool features that I did not recognise...
I then investigated this further to try to find these features and where they came from. Surprisingly, the new features are only visible when you go to the Google maps page on a Mac (I was using Chrome).
See these two different screen shots:
On a Mac
On a PC (Google Maps API)
The Differences
There is a button after the search box
The Mac version has integrated Google Plus and sharing capabilities
The zoom buttons are entirely different
The map type buttons are entirely different
My Question
So with the above in mind, is there any possible way one could make the Google Maps API Map look like the one illustrated in the first image?
I have looked through the API reference and it seems that there is nothing other than a basic search box... I cannot find any information on adding 'sharing' capabilities, or restyling the zoom buttons etc.
Can one come up with an some ingenious solution to this as the design of my clients site rather depends on the features on this map?

It looks like you're being served the updated version on the Mac and the older version on the PC; The user will need to opt-in to the new service on the Google Maps site to overcome this.
If you need more control over the design of your maps then Mapbox might be useful: https://www.mapbox.com

Related

How can I display OSM maps in Flutter 'Web'?

I'm trying to create a custom map using Flutter Web that would be capable of displaying custom statistics for a place for COVID-19.
First we'll have a interface that display statistics for our entire planet:
https://google.com/covid19-map/?hl=en (Just like htisw)
Then the user can click on any country to zoom-in with probably an ease-in transition to see the number of cases in each state or province of that country. Assuming that I am able to fetch the exact co-ordinates of the epicenter in that country, I would like to deepen the shade in those parts in such a way that it lightens out as we move towards areas which have a lower number of cases.
Is it possible in Flutter Web?
I came across this plugin (thanks to this thread on SO Openstreetmap in Flutter?)
https://pub.dev/packages/flutter_map
but it doesn't explicitly say that it supports Flutter Web.
I tried fetching the tiles from OSM(Open Street Map) and displaying the maps on Flutter Web with the help of the example given in the above site https://pub.dev/packages/flutter_map#open-street-map-provider
But it didn't really display anything, maybe because a certain widget or function didn't work as expected.
According to your experience, which is the best way to achieve what I am looking for?
If possible, please describe the answer in such a way as if you were me and trying to do what I am doing.
Flutter_map doesn’t support flutter web.
You may check out the below Flutter Maps widget which has support for all the platforms including web.
https://pub.dev/packages/syncfusion_flutter_maps
Regarding the requirements you have mentioned, you can try the below things.
By dynamically changing the focal point and zoom level based on the click position, the easing effect can be achieved.
https://help.syncfusion.com/flutter/maps/zoom-pan#update-the-zoom-level-programmatically
With the combination of dynamically adding shape sublayers on top of the tile layer and color mapping for that shape sublayers, you may achieve this.
https://help.syncfusion.com/flutter/maps/shape-sublayer#shape-sublayer-on-tile-layer
https://help.syncfusion.com/flutter/maps/shape#range-color-mapping

Google Maps Javascript API v3 - different projection of the street view on firefox

I'm using Google Maps Javascript API V3.
Everything works fine on chrome.
http://imgur.com/pOn42pR
But we get a fish-eye effect on Firefox.
http://imgur.com/lOi3vY7
It looks like they're using a totally different projection on each browser.
But the weird thing is that it works fine again on Firefox when I'm not using the API but the Google Maps directly.
Could someone deal with this problem?
Thanks! #try-catch-finally
The images are from the gogole maps api. A screenshot of two different browsers. The one of chrome is using sphere 3D effect, but the firefox one looks like a big flat image.
Okay, I think I just find a way to force the API to use the same way on both Chrome and Firefox.
And as #MrUpsidown said, I left my answer there.
But there's some problems need to be solved.
Hope you guys could move to that question and find a way out together.
I'll make this one to be closed someday.
Thanks!

Showing Floor Button Controls with Google Maps Javascript API v3

So here's my issue: I'm writing a web-app using the Google Maps web API v3. When zooming to a building that shows a floor-plan, the floor controls do not show up, as they do on Android. When opening Google maps for Android, and zooming to the same building, I get a control on the bottom right-hand side of the screen that shows the floors (B1, 1, and 2), and selecting them shows that floor. Not so using the web-API. At first I thought it might be as simple as specifying which controls were visible/adding a control, but I'm not coming up with anything.
Does anyone else know how to get these buttons to show up?
Note: Even on Google's website (maps.google.com), in classic mode, these buttons do not show up when zoomed in on a Building with a floor plan, so maybe this is a lost cause...
I was requested to answer this question so that it's not sitting in the unanswered queue.
At the time this question was asked, Google Maps for web didn't support the floor buttons (to the best of my knowledge), so we moved to using the native SDK's on Android and iOS instead.

Google maps loading images like

I started to create a script that allows me to split a big image into small pieces,to zoom, drag , etc.
I want to know what are the possibilities to load the small images just in the active area like in Google Maps (visible). I thought to try to determine the approximate location of one element with some calcules and to determine the element with document.elementFromPoint, but it's not a cross browser solution.
Another solution could be: loading from the beginning just the images from active area and when the user drag or zoom the script must calculate the elements that are new in active area.
see here what I mean active and inactive area: http://i.stack.imgur.com/mRY5K.jpg
PS: I searched the entire site but I did not found an answer. I read also this topic : How does Google Maps work? , but I would like to develop myself the script. (I don't need the complexity of Google Maps, just few features)
Look into DeepZoom. Its an opensource project that does exactly what you want. Its written for .net... but i think it might be what your looking for
DeepZoom is created by SeaDragon and is built for silverlight but they also have a Javascript implementation too called SeaDragon Ajax

Openlayers Google Maps layers remain blank in Internet Explorer

I've created a map page using OpenLayers. The user can select a specific thematic overlay (noise levels) by period, noise source and year.
I wanted to allow the user to choose a base (or background) layer: one of two (public) OpenStreetMap layers, the Google base layers, or one of Yahoo! Maps’ layers.
I originally wanted to provide Bing maps (Virtual Earth) as well, but since those use a different projection, I can’t use them in combination with my overlays (custom-served tiles).
It all works fine in almost all browsers: Firefox, Chrome, Safari, and Opera (if you don’t click too much). But when using Internet Explorer (versions 7 and 8), selecting one of the Google Maps layers results in a blank background.
I’ve tested with Fiddler, and the tiles aren’t even retrieved.
I’m running into a wall here.
Has anybody run into this problem before (and preferably: solved it)? Or does someone have an idea what could be going wrong?
Edit: The site is located at http://software.dgmr.nl/geluidskaart/.
See #7 of this issue, it seems to fix the problem.
Not sure, if it is directly related to your issue though.
Try removing "blank.gif" from the dark theme image folder.
It also made it work in IE.
I have had an issue before with Google base layers when using an overview window, and a mix of Yahoo and Google layers.
Try removing the Yahoo layers to see if this is the issue (or the overview map).
I believe there could be a clash of variable names with this combination of JavaScript libraries.
There is an error reported in IE in the ymapapi file:
this.MP is null or not an object
Edit: There is a problem with your CSS. The Google layer / images are loading without problems, but you have a "background: url(http://js.mapbox.com/theme/dark/blank.gif);" attribute on your Google layer. I removed this and the Google maps were displayed without problems.
This appears in your OpenLayers.Layer.Google_95_EventPane DIV.

Categories