I'm trying to make sure that my maps center point is with in the boundaries of a kml layer, I've not been able to find much about this but I modified some code from here which seems like it could work, but of course doesn't.
From the Google Maps API I can't tell whether or not .contains() is meant to work with kml layers, or if there is a similar method. Any ideas?
// bounds of the desired area
var kmlLayer = new google.maps.KmlLayer(kmlLayerURL, {map:map, suppressInfoWindows: true, preserveViewport:true});
google.maps.event.addListener(map, 'center_changed', function() {
if (kmlLayer.contains(map.getCenter())) {
alert("withnin kml layer bounds");
}
});
The KmlLayer has a method getDefaultViewport which will give you the default viewport for the overlay (the bounds the map will be centered on to display all the contents.
getDefaultViewport() LatLngBounds Get the default viewport for the layer being displayed.
The returned LatLngBounds has a contains method.
You can't access any of the internal content of the KmlLayer.
Related
I have managed to modify a script I found to suite my needs.
my only current issue is that I have to set the center of the map manually in the code and the zoom level.
how can I modify this so the api automatically selects the correct zoom level and center point for the map.
fiddle is here
I need to remove this manual code:
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-30.559, 22.937),
zoom: 4
}),
and configure it to zoom and center automatically based on the routes given (routes array)
you will see in the fiddle that the costa rica route is off the map so zoom needs to go out. if it was a short trip then zoom in to fit all contents into the map
Thanks as always:
You cannot get rid of that code. Option center and zoom are the only required parameters of google.maps.MapOptions object. See docs of MapOptions.
You can get rid of option preserveViewport or set it to false instead of true so your map will be centered and properly zoomed.
I'm back with more work on the Google Map that I've been working on. Here is the situation:
I have a map of Virginia. It will have markers in it, but I need the markers to be added/removed/editable by several people. As a result, I created a Google map in "My Places" and I'm importing the resulting KML file into a map I'm loading into the API.
I'm also trying to "white out" neighboring states by drawing a polygon over them and adding a white layer over them with 75% opacity, in order to make the state of Virginia stand out more.
However, I've run into a problem where if a marker from the KML layer "overlaps" onto the polygon covering a bordering state, the opaque polygon covers the layer AND the marker becomes unclickable. If one zooms in enough, one can click the marker, but I want people to be able to click the marker from the original zoom.
I've tried making the markers first, then adding the KML, and doing the KML first then drawing the polygons, but it doesn't seem to matter. I even tried a variation of the solution here: Handle when drawing of polygons is complete in google maps api v3 where I put the trigger to add the KML layer inside of the listener event, but still no dice.
My searching on Google also hasn't led me to anything that looks useful. I don't know if this is still a problem with the order the layers are being ordered, or if polygons somehow "override" a KML layer, regardless of the order, or if there is some way to explicitly tell the KML markers to stay on top of the polygons.
First off, here is the main code I'm using to draw the layers right now:
function initialize() {
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(38, -79.5),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
borderingStates(map);
var participantsLayer = new google.maps.KmlLayer('https://maps.google.com/maps/ms?msa=0&msid=204048902337864904598.0004cc332e8034251c1db&ie=UTF8&ll=37.668046,-80.289717&spn=1.959603,5.642338&output=kml',{preserveViewport:true});
google.maps.event.addListener(map,'idle', function() {
participantsLayer.setMap(map);
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?key=abc.def&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
Next, here is an example of the code I'm using to draw the polygons. This happens when I call the borderingStates function above:
//Delaware
DEpoints = [
new google.maps.LatLng(39.7188, -75.7919),
new google.maps.LatLng(39.5210, -75.7837),
...
new google.maps.LatLng(39.8296, -75.6477),
new google.maps.LatLng(39.7199, -75.7906)
];
// Construct the polygon
var Delaware = new google.maps.Polygon({
paths: DEpoints,
fillColor: invisColor,
strokeOpacity: 0,
fillOpacity: .75
});
Delaware.setMap(map);
And then I repeat that for each state I draw a polygon for - I think there are 6 or 7.
I can't tell that there is anything in particular about the code that wouldn't cause it to work other than perhaps how Google Maps inherently treats polygons and KML Layers.
I would suggest making your polygons with KmlLayer (or FusionTablesLayer) as well.
You can control the ordering of layers by the order that you add them to the map (first one is on the bottom). I believe native Google Maps API v3 Polygons will always appear above layers. Your other option would be to make the Polygons "unclickable" (clickable: false) [not sure if this will work or not].
This is my first submission and at the risk of being labelled a cowboy, this was my solution to this problem:
Remove the Polygon on the first click event
Set a timer to reinstate the Polygon (after 1 1/2 seconds)
Capture the click event on the KML element during the 1 1/2 second window of opportunity
google.maps.event.addListener(polygon, 'click', function () {
polygon.setMap(null); // hide polygon for a 1 1/2 seconds
window.setTimeout(function () {
polygon.setMap(map_canvas);
}, 1500);
// process polygon click now
});
This method does mean that you'll process both the Polygon and KML element click events but in our case that was fine.
So you want to add custom street names or other labels on your Google Map? For example on this location. After learning current (3.6) google map js API you have these possible options:
KmlLayer (not works now)
GroundOverlay (works!)
OverlayView (should work)
KmlLayer "...adds geographic markup to the map from a KML, KMZ or GeoRSS file that is hosted on a publicly accessible web server...”. We can try this latest feature to add path with label. And it will work in Google Earth. But if path is too short – Google Earth will not show us a label. Workaround for short path is just make it long by adding start and end points few times:
<coordinates>
55.043196,82.907145 55.043473,82.909902
55.043196,82.907145 55.043473,82.909902
55.043196,82.907145 55.043473,82.909902
55.043196,82.907145 55.043473,82.909902
</coordinates>
Then we already see our nice custom label in Google Earth, but in Google Map not. Most possible reason is that google earth's latest feature is too latest. Currently it’s a fail way, but may be later, google map's KML renderer will take that feature into account.
GroundOverlay is "... a rectangular image overlay on the map ...". All is much simple.
Create image:
Open your Google Earth (make sure your latitude/longitude settings are Mercator) and go to your location
Add one pixel white image on your area and make it 33% transparent
Go to properties / place tab of your image overlay and copy latitudes/longitudes from there
Make screenshot in Google Earth and paste it to your favorite graphic editor
Crop image to the borders of your white transparent area
Add layer, where you will add your custom labels and add them
Switch off your base layer and save the result as png, for example overlay.png
Add the resulting image to your google map as:
google.maps.event.addDomListener(window, 'load', function() {
var mapDiv = document.getElementById('map'),
opts = {mapTypeId: google.maps.MapTypeId.HYBRID},
map = new google.maps.Map(mapDiv, opts),
area = new google.maps.LatLngBounds(
new google.maps.LatLng(55.042297, 82.906337),
new google.maps.LatLng(55.043862, 82.910473)
),
overlay = new google.maps.GroundOverlay(
'overlay.png', area, {map: map, clickable: false}
);
map.fitBounds(area);
});
OverlayView you can try by yourself.
ps: Is this a correct format for article? Or may be it should be a community wiki?
I created a MapLabel utility library a while ago. While it doesn't have any rotation or text-on-path capabilities (I'd love to see you add it!), it does let you put text on a map.
I have an OpenLayers map object, and I have added markers to a layer, and added it to the map.
But how do I make sure all the markers are in the display area?
Thanks,
Gil
In order to display all markers on the map
Firstly,make sure you have all markers in one layer.
Secondly,you need to zoom to bound where all markers in marker layer are extended.
To do that,simply
var bounds = markerLayer.getDataExtent();
map.zoomToExtent(bounds);
//has a second parameter that decides to find closest zoom level
//default is false
Please check OpenLayers Document for Marker Layer
Best Regards
Myra
I really like how Trulia.com has created their custom Google Map InfoWindows.
What I like in particular about Trulia's implementation of the InfoWindow is:
Extends beyond the map border: Google Maps InfoWindows are contained within the map border whereas Trulia's seems to be able to float on-top of the map
Always displays InfoWindow near map Center: Google Maps InfoWindows always display the InfoWindow above the marker whereas Trulia InfoWindows always display the InfoWindow as close the center of the map as possible. For example, if the map marker icon is on the top of the map near the border, the Trulia InfoWindow is displayed below the map marker icon
InfoWindow is displayed on mouse hover (not 'click'): With the default Google Maps InfoWindow, you have to 'click' the map marker icon to display the InfoWindow whereas Trulia InfoWindows are display simply by hovering over the map marker icon.
I found the PdMarker, which is a 3rd party extension for Google Map InfoWindows that accomplishes most of the above bullets but not all. 1) It does not extend beyond the map border, 2) it does not work with Google Maps API version 3 (only version 2).
Anyone know how Trulia is accomplishing their InfoWindow-like implementation on Google Maps API v3?
That's an interesting question. I've been playing with maps recently too. I'm far from expert but I can tell you what I know.
I think the site you mentioned uses a custom div overlay rather than google's info window.
1. InfoWindow is displayed on mouse hover (not 'click')
This can be done with event listeners. For example in maps API v3:
google.maps.event.addListener(marker, 'mouseover', function() {
// myDiv.style.visibility = 'visible'
});
google.maps.event.addListener(marker, 'mouseout', function() {
// myDiv.style.visibility = 'hidden'
});
Here's is a pretty good example of how this can be done.
2. Extends beyond the map border
3. Always displays InfoWindow near map Center
Both of these can be achieved using CSS: (2) using z-index and (3) with position.
There is a similar example of using custom marker tooltips which you can find here. It also shows how you can utilize mouseovers to pop-up tooltips by hovering other elements on your page.
myElement.onmouseover = function(){
google.maps.event.trigger(marker, 'mouseover');
}
myElement.onmouseout = function(){
google.maps.event.trigger(marker, 'mouseout');
}
Finally, another site that makes a good use of maps, although this one uses V2 of the API. Hope this helps.
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html
is an extension to google maps which allows you to create custom infowindows