google maps API highlight areas - javascript

Is there a way to highlight areas with Google Map JS API v3?
I've seen some websites do it
here are some examples:
http://www.streetadvisor.com/new-allakaket-yukon-koyukuk-alaska
http://www.homely.com.au/werribee-wyndham-melbourne-greater-victoria
http://www.realestate.com.au/neighbourhoods/upwey-3158-vic

This is called a polygon.
See the Google Docs for information.
You can manually set polygon points in JS.

Related

Drawing region on google maps

If I search a query in google maps for example "carlton victoria australia" then it will give me a map of the region with the border around that area.
My questions are:
Is there a way to get list of all regions from the google map api for
certain province or country?
Can I combine the region information for example, change the color and also add some infowindow on top of the region?
What kind of level of the region that I can get from the api (district, subdistrict, village)?
Currently Google Maps JavaScript API doesn't expose any boundaries of geographic features. There is very old feature request in the public issue tracker to add this functionality, however it looks like Google didn't set high priority on this:
https://issuetracker.google.com/issues/35816953
Feel free to star the public feature request to express your interest and subscribe to further updates from Google.
You can get polygons from other sources and add them to Google maps as additional layers.
The nice workaround to get polygons in GeoJSON format from OpenStreetMap is described in the following answer:
https://stackoverflow.com/a/40172098/5140781
So, if you download the GeoJSON you will be able to add it to map using the data layer and its loadGeoJson() method:
https://developers.google.com/maps/documentation/javascript/datalayer#load_geojson
You can style colors of GeoJSON objects and create info windows. Just read the aforementioned documentation.
I hope this helps!

Change map boundaries google maps api

Does anyone know how to change the boundaries of a map with the google maps api? I have a map currently that shows the full world and if I zoom out it shows multiple copies of the full world. The problem is that I only want to show north america, and I only want to show it once. Can anybody help out? Thanks!
Duplicate: Google Maps API V3: limit map bounds
There's no API to restrict map boundary in Google Maps API. You may can accept external solution, or consider using other map library like OpenLayers or Leaflet, which supports max-extent feature.

Drawing routes on google maps

Is it possible to draw routes with google maps or any other map api? Like when you're looking for direction from point a to point b on google map with Get Directions button.
I'd like to draw a line that follows certain road but without the directions I don't need those. And if I can draw multiple lines between multiple points on the map that would be awesome.
Has anyone had experience with this before?
You can either use the Directions API or, if you really prefer to ignore the directions Google generates, you can use the maps API drawing functions to draw your own lines on the map.
You can also employ "drawing library"
https://developers.google.com/maps/documentation/javascript/drawing
But,this experimental tool cant specify colors nor line-thick via GUI.
My enhanced example is at:
http://members.jcom.home.ne.jp/tcltk-d/ge-navi.html
(select "Drawing" view to draw)

Draw region boundaries with Google Maps Api v3 as in Google Maps web page

If I search 'province of huelva, ES' in Google Maps web page, I get a marker and the province boundaries with a color layer, that even is filled when zoom out.
It is possible to use Google Maps API for getting that polygon (or layer, json object, ...) and even change its color just providing a query string like in the Google Maps web page?
For now I must use regions LatLng values for drawing a polygon, but would be great if I can get the polygon only providing a search string.
Thank you guys!

JQuery append to map pane

I'm switching one of my projects over to use googles maps api v3 from v2.
In v2 I had a div appended to the map pane with the following code:
$("#marker_popup").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
Is there any simple way to do that with v3? I've been searching around and I've found some things relating to implementing draw and onAdd, but I figure there has to be an easier way to do it than that.
Have a look at the answer to this question (and the corresponding v3 API documentation): google maps v3 translate map.getPane(G_MAP_FLOAT_SHADOW_PANE)

Categories