How do you create custom interactive areas on Google Maps? - javascript

I'm trying to create a map that shows county/district areas using Google Maps that will allow users to click on the area to retrieve relevant pop up information.
I have two datasets that I think would help, one being a list of UK Postcodes which would in turn allow me to determine different postal areas and the other is a dataset from Ordance Survey that contains province borders (county/district borders).
I've looked into KML Files and ImageMap but I'm not sure how to create these areas using the data I have?
I'm looking to achieve the sort of map that is used here:
http://content.met.police.uk/Page/YourBorough
Any help is greatly appreciated!
Thanks.

The way to work with Google maps is by using their api closely. You cannot go with simple image mapping.
Try those two links for starters:
https://developers.google.com/maps/documentation/javascript/examples/polygon-simple
and
https://developers.google.com/maps/documentation/javascript/reference#Polygon.
In short - you may need to draw a polygon for every area, bind a click event to it, then show Info Window with the relevant information for the user.
In case you're new to google maps, you may need to take more time inspecting their Api and the examples they give.
Best regards.

Related

Drawing polygons on Google Maps

I was drawing polygons using Polygon Creator Class on Google Maps. As you see this tool is not easy to use. For example, it's impossible to add new polygon or edit some of them after getting result code.
In following link when you zoom in between polygons you will see gaps that I want to remove. To recreate the issue please open following link and zoom in between polygons:
http://jsbin.com/bovogaqowu/1/edit?js,output
Now question is, how to remove gap between these polygons ? In this case I can't use the tool that I used to create this map.
And which tool is better to use in this situation ?
Thank for your time
I would suggest you using the Google's official tool for drawing, editing, locatiing and even finding driving directions for the markers you have placed on the maps. You can always save these edited maps and retrieve them later when you need them.
Please click the following link and get started!!
Even I tried drawing some polygons side by side and there were no gaps :)
Hope this would help!!

Any Javascript API for maps with country-specific display?

Is there any Javascript API that does not display the entire world map and later allows to zoom and click to individual countries, but instead just displays the country we are interested and allows region-level clicks? In other words, I am looking for an API similar to JVectorMap but this does not have comprehensive support for all countries and it does not show street-level view when zooming further deep into state/city level. I hope my requirements are clear. If I am interested only in let's say England's map, I want the map to show just England but allow state and city-level clicks with street-level or near street-level views at the lowest level as an optional feature (not too many details at the lowest-level). Google Maps, jHERE etc. seem to show the entire world map and allow to zoom-in, which is not something I want.
thanks,
Paddy
If you only want the street maps for one country to be visible, you could download the Open Street Map data into a PostGIS database for that country and that country only, and generate tiles. There are several tutorials on how to download data and make tiles, e.g. http://switch2osm.org/serving-tiles/manually-building-a-tile-server/

highlight building google maps v3

Im trying to highlight specific building within a map using the google maps v3 api. I was wondering if anyone had any idea how to do this. I've been looking through google api documentation and come across nothing at the moment.
For example: http://goo.gl/maps/GyrDB - This is a map of a section manhattan, as you can see the 3d building. Im trying to highlight specific ones on hover.
Thanks :D
If you have information about where the building is, then you can use a Polygon to highlight it. If you don't have information about where the building is, then you are probably out of luck. The Google Maps API doesn't have any way of interacting with the map at that level.
Now, I suppose that one thing you could do is:
download the Google Maps tile,
find the point in the image that the user clicked on,
do a flood fill of that point with some awful colour,
set to clear all the pixels which are not the colour,
overlay that image on top of your map
You would also need to be clever about buildings which lie in more than one tile.
HOWEVER, this might run you afoul of the Terms of Use. I know that they disallow modifying the artwork; I am not sure if this would count as modifying the artwork; you'd need to look carefully at the TOU and maybe ask a lawyer. Or ask Google. (Don't ask me, I am not a lawyer.)
In many countries, every building is a cadastral parcel and there Web Map Service (WMS) layers showing them, provided for free by state bodies.
Using these layers, you can get building polygon coordinates. For ex: https://snag.gy/WtU7ZT.jpg

Google Maps - Get Province outline from Google map

When searching for a Province in Google Maps, it outlines the map and adds a icon on the Province.
How would you get that from google without having to draw it point by point ? Im sure it's available if its showing on their maps.
Here is an example:
Western Cape, South Africa
I do not think it is directly available through the API beyond what you can achieve with the styling wizard
To implement it yourself you'd need to find a shapefile for the areas of interest, store it in a spatially enabled database, (like PostgreSQL/PostGIS), and then load the relevant polygons, which you can style freely. Alternatively you can create a custom tile layer, like this, (check the "density" box), or you may be able to load it using fusion tables, (not an entirely simple process).
See this similar question (doing the same thing for countries)
The answer can be applied to a province rather than a country.
Here is the closest I could come to that styling.

Google Maps API - How can I enable 'Points of Interest'?

I've seen some sites, that use Google Maps, have the ability to show 'Points of Interest' on the map. Similar to what Google Earth does.
Here's an example of what I'm talking about: http://i.imgur.com/5OCor.jpg
How can I do this? :/
As far as I know, Google Map does not have a 'Points of Interest' feature for you to enable.
But you always can do it on your own. First of all, you have to obtain a POI database, e.g. Open source POI database? - Stack Overflow
Next, select the POIs visible in the viewport. Then add them to the map using GMarker. You also have to add or remove the POI as user pan and zoom the map.
As you can see this requires fair bit of programming. Google Earth has already packaged this into a great application. But this isn't available in Google map API (that I know of).
One possible source of POI data is http://compass.webservius.com - it's a REST API allowing access to a database of millions of businesses in the USA, searchable by business type (industry code), latitude/longitude bounding box, etc.

Categories

Resources