google map with multiple routes - auto zoom and center map - javascript

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.

Related

Dynamic OpenStreetMap

I have an Openstreet map which Ive programmed two selection options to narrow down on the map. Everything works beautifully but when in option is selected on one of the drop down menus the map viewpoint changes so the user has to manually click and drag back into the selected points on the
map. I would like the viewpoint to remain on the state of Oklahoma or where the user last adjusted the zoom or pan.
See
https://www.tcokchallenge.com/admin_cp/openmap/openstreet.php?
You can restrict the view using an extent on the view.
var map = new ol.Map({
view: new ol.View({ extent: [...] })
});
According to the doc
The extent that constrains the center, in other words, center cannot be set outside this extent.

Geolocation api with direction arrow

I am building a simple PHP based off-road navigation webpage for use on a smartphone that will display two icons on a Google map, one being my my current location and one my destination. As I move, the position of the icon for me will automatically update.
Sample code to do the basic stuff includes:This Stackoverflow example and This tutorial.
I would like my icon to be an arrow that points in the direction I am currently walking. The direction would be based on my previous position and my current position. Does anyone know of any method to achieve that please?
One crude method would be to have 8 (or 16) icons, representing N, S, E, W, NE... and pick the icon that approximately matches my direction, but I was hoping for something more dynamic.
The other option is to simply draw a path on the map of where I have been. I am thinking of doing that anyway, but would also like the arrow.
To clarify exactly what I want, This Stackoverflow example contains this code to display a marker of my current position on a map:
map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 18,
center: new google.maps.LatLng(startPos.coords.latitude, startPos.coords.longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(startPos.coords.latitude, startPos.coords.longitude),
map: map
});
Instead of the teardrop type marker I want an arrow that is pointing in the direction I am walking. I would calculate the direction for it to point based on the lat/long of my previous location and my current location, but I need the code to insert in the above code where it says position:...
This is basic navigation stuff so I am sure it has been done before. I just haven't been able to find any examples. (I do not want to use Google directions API. It has a usage limit and is not really suited to off-road.)
I haven't tried this myself, but it seems the Google Maps Javascript API provides functionality for this. You can use the google.Maps.Symbol object.
With the rotation property you can set the rotation of the symbol in degrees. You need to get the angle between the current location and destination from the API first then.
With the path property you can set a the symbol. Google already implemented symbols for arrows, they use the constants BACKWARD_CLOSED_ARROW, BACKWARD_OPEN_ARROW, FORWARD_CLOSED_ARROW and FORWARD_OPEN_ARROW.
It also seems to support coloring, scaling, etc. for the symbol, so you can do quite some things with it. I hope this information helped.

Does Google Maps KML Layer Contain Maps Center Point

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.

Google MAP API v3: Move center between two locs

How can I move the camera from one loc to another loc ? I have checked the API but I couldn't find what I want beside the setCenter method which directly sets the center to the given location but I want to a smooth transtition, not an instant center change.
http://code.google.com/apis/maps/documentation/javascript/reference.html#Map
Method panTo.
Changes the center of the map to the
given LatLng. If the change is less
than both the width and height of the
map, the transition will be smoothly
animated.

with openlayers , how do i make sure a list of points are all displayed?

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

Categories

Resources