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
Related
I have been trying to find a way to create 3D bars on top of google map along the lines of a road representing some parameters related to road condition.
I m trying to achieve something like this but on google maps instead.
I tried to look for available charting libraries. The closest one I could get to is Mapbox , using the hexbins
However, it is not flexible enough to include my own user interactions and control.
Another impressive demo that I came across is this from Xibis. However it is just a sample and I couldn't figure out how it is done.
Are there any such libraries available or any ideas to achieve something similar?
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.
So I've looked at all the previous questions asked and found that nothing was answered to the point of what most are asking and I would like to rephrase the question asked about making clickable maps.
The idea - Have a map of a singular city in the USA that I could use jquery to outline the towns inside said city. I would then like to be able to go into further detail of said town showing things like shopping centers, parks, street names, available housing, etc.
I could use the map detail I received from the city to draw/outline all these small sections from a vector file I have.
This doesn't necessarily have to remain on the same page but it would be nice if it did.
If this could be too expensive hiring someone or too long to sit and code for one person, then my next option would be using Google Maps. Now I know that Google Maps doesn't have the most up-to-date visuals so I was wondering if it was possible to set up all my own markers and possibly pictures of locations if they don't exist on Google?
The Result - A custom map that's somewhat reminiscent to that of Google Maps only without the hassle of Google Maps itself and if there was a search option for the map using Google Maps as a last resort I wouldn't want the search results to display anything but locations within the city limits.
Or should I just use DreamWeaver to hot-spot a map that each link to their respective location details?
These are similar examples I've found but most are just hover and click but nothing further. http://davidlynch.org/projects/maphilight/docs/demo_usa.html
http://exploregooglemaps.blogspot.com.br/p/resources.html
there is a great plugin doing that, it is jvectormap :
http://jvectormap.com/
it is very lightweight & cross browser (vml is used for non svg support) & very easily extensible (which imo is better than have a plugin full of option you don't need, here it has the minimum then you add what you need) through on click, on mouse over call back to start with & that shall be enough for most cases.
lightweight if you convert your map correctly (limit to the max the level of details).
now the conversion of the vector map for use by the plugin can be tricky but there is a wiki about it :
https://github.com/datag/jvectormap/wiki/Map-converter-notes
i've redacted the part of the wiki about using GIS software on ubuntu. using SAGA-GIS was indeed a saviour & a good thing to learn to publish any map for the plugin in no time.
I'll add that i've tested anymap from anychart & fusionmap from fusioncharts and that imo jvector is the winner without any contest for cross-browser/customisation ease/flexibility/bandwidth/execution efficiency... & last but not least it is free !
Using the google maps v3 javascript API, it's possible to add 'GroundOverlays' as a picture. Have a look here:
http://jsfiddle.net/9YYJB/1/
However, I'm working on a project where I'm trying to add a texture to the whole world map. Obviously I can add a single, absolutely massive gif/png overlay but I'd rather add a tiling texture. I've been digging around in the API and can't find any way to do this.
Anyone have any ideas on how this could be done?
Thanks very much
Yes, what you want to use is an image map type. This allows you to add tiles on top of the regular Google Base Map. If you want to completely replace the Google tiles, you would need to implement a Custom Map Type. My favorite example of that is the Liberty City Map.
I want to make a website that displays my map, has panning, zooming and other features.
The google API seems to be the right thing for me. Just one question : Can i use the google javascript api with my own map images on my own server. I dont want to use the actual google maps, just its capability to display zoomable/scrollable maps in a browser
Technically this may be possible using the Overlays section (Ground overlays allow image overlays on the map) of the API and hooking half a dozen events to handle the redrawing at different zoom levels, tiling, hiding the real information about whatever location Google Maps thinks it is showing, etc.
But it is definitely not designed for such purposes and I'm not sure if it would be legal to use it in that way, would have to read the license.
There are other alternatives out there that would be able to achieve this functionality without the level of work needed to get Google Maps to cooperate I believe.
No, I don’t think so.
You may also want to look at OpenStreetMap. I have seen custom map-images being used with its interface.
I think you'll find that the Google maps interactivity code is geared towards working with Google map servers for the underlying map. However, you could put your own layers over their maps and then serve up your own content so long as it used the same mapping co-ordinates.