I have built and deployed a next.js app that displays a map with the help of #react-google-maps/api . Furthermore, I'm using the Google maps "data driven" API to create a feature layer that displays postal code boundaries.
I've deployed this to Vercel and it works well on some browsers.
But, the problem I'm having is that the "feature layer" is not displayed on some browsers.
On browsers on which the "feature layer" is not displayed, the following error is being printed to the console
google.maps.FeatureLayer.style: The map is not a vector map. That will prevent use of data-driven styling.
and in full below:
key=***************&v=beta®ion=US&map_ids=81e0340ff65abdde&callback=initMap:343 google.maps.FeatureLayer.style: The map is not a vector map. That will prevent use of data-driven styling.
I've checked the status of my map on the google cloud console and my map is shown as
Name Map ID Type
Zipcode Map 81e0340ff65abdde JavaScript – Vector
The map seems to be a js vector map but still gives this error.
I don't know what else to try and there seems to be little information on this topic. Any help is greatly appreciated.
Related
When displaying a Google Map with Maps JavaScript API v3 activated, the default "Map" view works well, but the "Satellite" view does not : The image tiles read "Sorry, we have no imagery here".
I have two versions of the map : The public version works well either in Map mode or Satellite mode.
The private version, that requires login and allows for editing the custom stuff loaded onto the map, is the one that says "no imagery here" but only in Satellite mode.
When in private mode for editing, here is an example of working Map view :
Here is an example of broken Satellite view :
When looking at the Javascript console, here is what I find :
GET https://khms1.googleapis.com/kh => Error 400 Bad Request
But the request is sent by Google's own js code.
My web app has been working fine for years until I noticed this.
In case you are using a prototype js library, check in your developer console if you are receiving an error from Array.from function, if so, fix this bug in the overrided function or just comment it (at least to test it).
I had the same issue. I tried every available solution on the internet. Turns out Google tag manager was the culprit. How did I come to this conclusion? I opened the network tab in chrome and blocked all the js files from loading. I enabled them one by one and checked if satellite view was loading. For me Google tag manager js file was causing the issue.
I need to convert a map built with Google Maps to a static map.
The problem is that map has an amount of data (mainly circles), and its representation has to be doing a path description of its circunference, and I need some kind of accurate, a pure circle has to be displayed in the static mode, so each circle description is about 500 chars (encoded).
The Google Static Maps url limit is 8192 and its not enough for rendering those shapes.
There is another way for doing it? I also tried to use html2canvas, but it is forbidden by Google.
Google actually recently extended the URL limit to 8192, but if you need more than that you probably need to resort to taking a screenshot of a Google Maps JavaScript API map, as suggested by xomena.
A tool like PhantomJS [1] can help you write a script to automatically take a screenshot of a webpage (which you've drawn using the Google Maps JavaScript API).
[1] https://github.com/ariya/phantomjs/wiki/Screen-Capture
I have a small example that uses PhantomJS to take a screenshot of the page.
Here's the JavaScript Map with some information: http://jsbin.com/pevizusana/2/edit
Here's the PhantomJS code that will take a screenshot on this site: http://pastebin.com/gEXhG1dP
And here's the result: http://i.imgur.com/Mj951aP.jpg
I hope you find this information helpful.
I'm the author of osm-static-maps, It's an open source project that you can use as a cli or js library or self-hosted http server. It mimics google static maps and you can pass any amount of data to the map as a geojson.
See the project here for more instructions https://github.com/jperelli/osm-static-maps
I am trying to embed an existing, public Google Map into a website. Specifically this one:
http://goo.gl/maps/cHf2
Of course I could use the iframe embed to achieve this, but I would like a little more control over the map … I imagined being able to pull all the markers from the map and display them as an index next to the map. Kind of like Google already does, but embedded in my page with my own styles and images.
I have been digging through Google, Stack Overflow and the API instructions and couldn’t find any relevant posts. In the GET string of the map on Google we can see this chunk:
&msid=212828439842926497866.0004bfae4da003d8ffd1f&mid=1341413217
I thought in there might be a maps ID and I could use it to query the content of the map through the API? The intention is using Google Maps as a CMS for less technical minded people and not dealing with geo data in our own CMS.
Any help would be greatly appreciated. Maybe I am just missing the forest for the trees.
You can download the kml that specifies the markers in that page and display that on your API based map. This example defaults to displaying it using geoxml3, but you can hide that and display the KmlLayer version.
You should be able to just point KmlLayer to the link (I downloaded the kml and put it on my server so it would work with geoxml3).
Here is an example (taken directly from the documentation) that does that
here is the original
I am developing JavaME LWUIT application which needs to display some data on map.
And I'd like to use Google Maps for this.
I thought about the requirements to the maps and their user interface. They are
listed below:
Pannable map. It should be possible to scroll the map using the touch interface or navigation arrow buttions which are displayed on the map.
Zoomable map. At the best, there should be appropriate +/- buttons displayed on the map.
Search location by address and move to it (menu command).
Remember the last visited location.
Marker for the current location.
Markers with customable icon and text which is displayed when select the marker (click on it or select somehow).
I spent some time searching for appropriate Map Library for JavaME/LWUIT.
I expected to find a free library and map service (ha-ha).
See my results below:
MIDMaps library. URL: http://www.jappit.com/blog/midmaps-google-maps-java-me-library/
That library uses the Google Static Map Service. Not bad... but it needs a lot further improvements...
I found the follwoing issues with that library:
Markers: impossible to customize marker's icon and text. Displaying the marker's text on click/selection is not supported.
Map Panning: no UI controls for this (arrow buttons). Doing panning with menu commands is not a user-friendly.
Map Zooming: no UI controls for this (+/- buttons). Not so important...
License: not permitted to use in a mobile app if not a Google Premier User. Not a problem...
Nokia Maps API for JavaME. URL: http://www.developer.nokia.com/Develop/Maps/Maps_API_for_Java_ME/
Did not try. But looks like that lib fulfills all my requirements.
I am not sure about the following things:
Quality of the maps.
How much does it cost? I mean the cost of using the map service.
Nutiteq lib which uses OpenStreetMap service. URL: http://www.nutiteq.com/map-api
Not free the lib, but the map service.
Guidebee Map API. URL: http://www.guidebee.biz/
It's not free.
Now it's a time for me to ask questions. What should I do? Are there any advices?
Maybe I missed some possibilities or lib/services?
Thank you for your help!
See the Makeover demo in SVN (I updated it to use Google maps instead of Yahoo maps API which was killed off). The GoogleService API should be available in the SVN history it was (deleted because of licensing nonsense) within the IO services directory and it includes local search etc.
Terrence has a a demo that includes allot of interesting features including a browseable map.
You can also look at Waze although I haven't checked it myself, I saw people using open street map and AFAIK there is an open source mapping application based on that (although the license might not be appropriate for you but it might still be useful as a learning aid).
After some additional investigations I decided to use Nokia Maps. And now I have a working application which displays interactive map with my data markers on it and also my current location.
I chose Nokia Maps API because it provided real dynamic maps (panning, zooming, tiling) and fulfilled all my requirements, except "Remember the last visited location" (can be implemented on my own).
I met the following problems:
Using the maps from LWUIT, not from an ordinary MIDP application. I used the approach shown here Nutiteq SDK with LWUIT and also implemented my own MapWidget class for LWUIT.
Displaying additional info on marker click. There is no support for this in the lib. I had to implement it on my own. Details are here JavaME Nokia Maps API: how to display additional info on marker click
Additional info related to the choosing proper map library can be found here Discussion on Nokia Forum
I'm using the Google Maps generator to create a few maps for a client. The maps embeded on the site are a bit small (255x176), so map real state is crucial. I've already removed the balloon, but can't find a way to remove the "Earth" view button from it (all newly generated maps come with it now, 4 views in total).
The annoying part is that the "Earth" view requires a Google Earth plugin to be used anyway, something the client could live without - me too.
Any advices there? Feedback will be greatly appreciated!
Cheers,
Wallace
You may customize the map controls using the MAPS API.
Visit http://code.google.com/apis/maps/documentation/javascript/controls.html#DefaultUI
Look for MapTypeControlOptions and pass appropriate map type you want to show.
Refer http://code.google.com/apis/maps/documentation/javascript/reference.html#MapTypeControlOptions
http://code.google.com/apis/maps/documentation/javascript/reference.html#MapTypeId
If using the default UI, you would get only the map types in G_DEFAULT_MAP_TYPES, which does not include the Earth map type (G_SATELLITE_3D_MAP).
This means your generator is adding this map type explicitly. So you should be able to simply look for G_SATELLITE_3D_MAP in the javascript you get from the generator, and remove references to it.
If you are still having troubles, can you provide a link to the map generator you are using?