Google Maps Points do not appear until low zoom levels - javascript

I'm working on a (Perl) program that uses the Google Maps API and a KML file to pull data from a database that creates points on the map. I have that much done, but the points only appear after I zoom pretty much all the way in, to a zoom level where only one point is showing.
The default zoom only shows my small city (3-5 miles) so I thought all the points would be able to show. Does anybody know how to get all of the points to show up at city-wide level as opposed to only showing up when zoomed all the way in?
Any help is greatly appreciated. Thanks!
Edit: Added a JavaScript tag because I've seen a lot of work done with Google Maps using JS, and considering the problem really isn't language-specific, I figured some of those developers might be able to offer some insight.

Try to incorporate the <Lod> tag in your KML, which is child of a <Region>. You can define this once per placemark you get from your DB. or only once per query (defined by minLat, maxLat, minLong, maxLong). In the first case the LodPixels is a constant whereas in the latter case you must calculate it as a function of the region size. It sure works in Google Earth and may work as well in Maps. Look here to see it work in Earth API (JS)
....
<Region>
<LatLonAltBox>
<north>###</north>
<south>###</south>
<east>###</east>
<west>###</west>
<minAltitude>###</minAltitude>
<maxAltitude>###</maxAltitude>
</LatLonAltBox>
<Lod>
<minLodPixels>###</minLodPixels>
<maxLodPixels>###</maxLodPixels>
<minFadeExtent>###</minFadeExtent>
<maxFadeExtent>###</maxFadeExtent>
</Lod>
</Region>
....

Related

Using Google Maps API with custom tiles

So, basic gist is, I have my own tiles of not the real world I'd like to display with the Google Maps viewer. I've found examples of how to split an existing single image into tiles for use with it, but nothing that deals with setting up your own tiler.
I have map data such as this:
https://dl.dropboxusercontent.com/u/44766482/superimage/index.html
Which right now is just a bunch of 1600x1600 images in an html table. This naive method works, but I'd like to switch to the more robust google api for better zooming and smarter streaming of the image data.
I've been unable to find a good example of how to generate your own tiles for the zoom levels and bring it together with some html/js.
If you want some more information for the goal process;
I have a python script that can output any size tiles of the map, at any zoom level. I'd like to bundle those together into a google maps api website. But in my own efforts I have not found a good example or documentation of how to do that. For one, I can only find examples of how the zoom levels work for the real world map, but not for a custom one.
Edit:
Got most things working as I want them, but I'm still confused regarding the "center" that can be set, as it's in lat and lng, which don't apply. I'd also like to set boundaries as currently it tries to load .png files outside of the maps range.
My current progress:
https://dl.dropboxusercontent.com/u/44766482/googlemapspreview/index.html
I think what you are looking for is the google maps imageMapTypes:
https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes
Basically, each zoom level is the 4 lower zoom tiles combined. A Projection function can be skipped to get orthogonal mapping.

Google map showing only states of USA and shows only cities of corresponding state when clicked along with zoom [duplicate]

I am using Google Maps in a project and I want to display only a country map in my map window i.e. I want only the US to show on my map not Canda and Mexico and so on, cutting away the superflous information for the app I am building.
I found some stuff where you can restrict the area covered with some javascript however this still gives me a lot of extra map area as geographic areas usually do not conform to squares.
Further on I am limited by time, $, php and javascript so I can't really do some fancy custom solution that involves lots of work i.e. the usual setting.
Check out one of Mike Williams' great GMaps tutorials: in there, he shows how to limit zoom and pan in your map.
If you want some areas to be non-visible, try this one: I think that's closest to what you want (the example actually does the same thing you want, but it seems to be geared towards Canadians ;)).

Javascript Google Earth path editor

What I am trying to do is create a embedded javascript application where the google earth plugin is embedded in a webpage with various paths drawn on. Here is an example of what I am trying to achieve.
The catch is that the lines need to be editable, with each joint having a handle where the user can click and drag. I have looked high and low on Googles api documentation and I cannot find anything even close to this. If anyone can point me in the right direction it would be much appreciated.
You want each 'joint' to be a dragable placemark so that when you drag it the line geometry is updated.
For reference check out the Google Earth API Samples - Draggable Placemark:
http://earth-api-samples.googlecode.com/svn/trunk/examples/placemark-dragdrop.html
And possibly James Stafford's polyplot:
http://www.barnabu.co.uk/geapi/polyplot/
Together they should help you achieve what you want.

Javascript plugin to draw markers, lines, and shapes on a latitude/longitude grid for offline use?

I am attempting to make a simple PhoneGap app that will allow a user to input lat/long points and bearings and calculate their estimated intersection, along with a measure of error. I would like to display the lines, intersection, and an error elipsoid on a map or at least a grid of latitude and longitude lines, so the user can visualize the accuracy of the point. The tricky part is that this will be used for wildlife tracking in areas where the user may not have cell service. Is there some sort of Javascript plugin that will make a lat/long grid available for me to draw georeferenced lines and shapes on? I would love to use something like the Google Maps API, but that clearly won't work for offline use. I've Googled quite a bit, but I'm not sure where to start with this or if it's even feasible at all.
This program is similar to what I'm trying to achieve: http://www.locateiii.com/
Any ideas are greatly appreciated.
I'd use d3.js and http://code.google.com/p/gmapcatcher/ something like this where you can keep the google maps offline. If that's not feasible you can always us D3 with a svg of the map.
I ended up using OpenLayers with OpenStreetMap tiles prepared by Maperitive. Simple and works well with PhoneGap.

Creating shaded areas for distances in the Google Maps API

I need to show my clients what 'zone' they live in (how much they will pay depending on how far away they are from my business). I want to use Google Maps to give them a view of what roads/towns/cities/etc. are in what zone. I was going to make some kind of definable barrier of sorts that would emanate from the center point.
I would have it so one barrier line showed where it was x miles away from the center point, another barrier would define areas y miles away, another defining areas z miles away, and so on and so forth.
I've never used the Google API and I'm only slightly good at Javascript... What is the best path to take here to learning how to do this... or... even better... how would I do this?
Thanks for helping!
Cheers!
You can create polygons on the map and set the fill shading opacity such that it is slightly transparent. When you layer concentric circles over one another, you'll see the shading change slightly.
I wrote a series of posts on how to use the maps API for Google, Bing, and MapQuest that you might find useful.
http://www.onesadjam.com/search/label/mapping
Look at the documentation on google maps javascript api V3. I sense that you will be creating polygons - specifically look at how to do that. In the API, you can create a circle polygon, with options such as the center and radius, making your job very easy.

Categories