I am using Google Maps Javascript API v3,
What i would like to do is to highlight all routes within a specific circle radius when choosing a point in the map (point coordinates and circle radius are input parameters).
I tried to use the Directions Services and i did manage to display all possible routes when origin and destination points and travelMode are specified and the provideRouteAlternatives option is set to true.
When setting the origin point to be the cirle center, is there way to set multiple destinations points (points on the circle perimeter), and then loop over availables routes and highlight them using Directions Service?
P.S.: i am not trying to draw a circle around a point but to highlight all roads within the circle radius.
Thanks.
This is a just-for-fun answer.
Not really an answer because it really feels like a dirty little hack, and also I am not sure to understand what exactly you are trying to highlight (is it all streets or the results of a Directions request — this is unclear from your question).
But basically, I added 2 maps. The first one is the base map and the other one is positioned on top of the first one, with a border radius, and styles applied.
I then synchronize both maps so that they both move relatively (when panning / zooming).
var myLatlng = new google.maps.LatLng(51.51, -0.12);
var styles = [{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [{
"color": "#ff3380"
}]
}];
var mapOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var roundedMapOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
scrollwheel: false,
styles: styles
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var roundedMap = new google.maps.Map(document.getElementById("map-rounded"), roundedMapOptions);
google.maps.event.addListener(map, 'drag', function () {
roundedMap.setCenter(map.getCenter());
});
google.maps.event.addListener(roundedMap, 'drag', function () {
map.setCenter(roundedMap.getCenter());
});
google.maps.event.addListener(map, 'idle', function () {
roundedMap.setCenter(map.getCenter());
});
google.maps.event.addListener(map, 'zoom_changed', function () {
roundedMap.setZoom(map.getZoom());
});
Note on the use of the idle event listener:
If you are dragging the map very quickly, sometimes the sync is kind of lost. So with the idle event listener, the maps are re-synced after a drag.
Note that I added the below CSS rule to hide the copyright on the rounded map:
#map-rounded .gm-style-cc {
display: none;
}
This is clearly against Google Maps TOS but since it is still there on the base map, I would think this is a fair or acceptable misuse of the API :)
JSFiddle demo
Related
With Google's raster maps, I could create a map with an initial style like this (example taken from Google's documentation):
var mapStyles = [{ elementType: 'geometry', stylers: [{ color: '#242f3e' }]}];
var mapOptions = {
center: { lat: 40.674, lng: -73.945 },
zoom: 12,
styles: mapStyles
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions );
Then, I could change the style like this:
var newStyles = [{ elementType: 'geometry', stylers: [{ color: '#ffffff' }]}];
map.setOptions({ styles: newStyles });
With the vector based maps, instead of specifying the style in code, I need to specify a map ID. That map ID will have a style that someone configured in the cloud. I created two of these map IDs (a normal theme and a dark them) following the instructions here, and then instantiated my map like this:
var mapOptions = {
center: { lat: 40.674, lng: -73.945 },
zoom: 12,
mapId: 'abcd1234mymapid'
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions );
I tested both map IDs to be sure the theme was working. The problem is that I can't figure out how to change the map ID after creating the map. I want to allow the user to switch between map IDs. I tried:
// Does not work
map.setOptions({mapId: 'efgh5678myothermap'})
// Also does not work
map.mapId = 'efgh5678myothermap'
Is this functionality gone with Google's vector maps or am I doing it wrong?
I did make sure to include both map IDs when loading Google's script:
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&v=weekly&callback=yourInitMapMethod&map_ids=abcd1234mymapid,efgh5678myothermap"></script>
Currently, the only workaround to switch from one style to another (changing mapIds) is to create a new map instance. Note that each map instance is billed. As per Dynamic Maps Usage and Billing. You can do something like this:
//Event that triggers change of map style
document.getElementById("map_id_1").addEventListener("click", function(){
mapID = "YOUR_MAP_ID"
new google.maps.Map(document.getElementById("map"), {
...sharedOptions,
mapId: mapID,
useStaticMap: false
});
});
Here's a complete JSFiddle sample you can try.
Dynamically changing the mapId through the setOptions() function currently is not possible as it appears that mapId is not yet added as a property of the MapOptions interface as per the documentation.
I already filed a Feature Request in Google Maps Public issue tracker to support for this.
I've made a Wordpress website with a template tool 'beaver builder'. That tool has a google map module, but that doesn't work very well. For example, I can't change to zoom level and center.
I also want to show a specific marker in a cluster.
This is the website page: http://www.depot-rato.be/het-project/
Is there a way to control the google map with some Javascript or jQuery?
jQuery('.gmap').setZoom(19);
Thanks in advance.
I've found a solution:
jQuery(document).ready(function($) {
var aLocation = { lat: 51.009054, lng: 4.509285};
$('.gmap').gmap('get','map').setOptions(
{
'zoom': 18,
'center': aLocation
}
);
});
I do it like this(at map initialization, resets the map and markers):
var aLocation= { lat: 48.4728146, lng: 7.499930100000029 };
map = new google.maps.Map(document.getElementById('myMap'), {
zoom: 5,
center: aLocation,
title: 'myMapTitle',
});
or like this(this one shouldn't initialize the map or markers):
map.setZoom(5);
map.setCenter(aLocation);
map.panTo(aLocation);// no need for this one, if you used the one above
You can try it here(click on the marker):
https://codepen.io/sam67/pen/KRGLjY
I have a map and I want to center it to concrete point. Following implementation is working correctly:
var map = L.map('map', {
crs: crs
}
);
map.setView([58.66, 25.05], 2);
However, implementation below is not working correctly and does not center the map. Why it is happening? I get just blank grey area instead of my map. According to the documentation it does completely the same as the code above.
var map = L.map('map', {
crs: crs,
center: L.latLng(58.66, 25.05)
}
);
map.setZoom(2);
Why?
I think if you specify the center option when creating the map you also have to specify the zoom option or leaflet doesn't know what tiles to request.
var map = L.map('map', {
center: L.latLng(58.66, 25.05),
zoom: 2
});
When you use setView, you are setting center and zoom so leaflet knows the tiles to request.
Have you tried
var map = L.map('map', {
crs: crs,
center: L.latLng(58.66, 25.05),
zoom: 2
});
?
Hi so I'm working a google maps element into an app I'm writing and am having trouble dropping a pin on the user's current location.
I can get the map to load a fusion table layer of pins, and center on the user's current location, but I'd like to be able to then drop a marker at the user's current location, and resize the map to fit all the markers. Is this possible? If not I can just set the zoom to an appropriate level.
This is the code I'm working with:
var geocoder = new google.maps.Geocoder();
function initialize() {
map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
center: new google.maps.LatLng([app:user-lat], [app:user-lon]),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col2, col0",
from: "1pbba_dFcpWQKQDXQUt9RNXp16GqX5Jz-NraafEI",
where: ""
},
options: {
styleId: 3,
templateId: 3
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I should also say that the [app:user-lat] and [app:user-lon] calls are application specific, taking data from the mobile device, and will work to insert the current user's location. This is the reason I'm not doing a call for the current position through google maps api, thanks in advance for anyone taking the time to help.
To place a marker at the user's position, add this after you define your map:
var marker = new google.maps.Marker({
position: new google.maps.LatLng([app:user-lat], [app:user-lon]),
map: map
});
If you want to move it as the user moves, that will be a little more complicated, keep a reference to it and use marker.setPosition.
function initialize() {
map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
center: new google.maps.LatLng([app:user-lat], [app:user-lon]),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng([app:user-lat], [app:user-lon]),
map: map
});
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col2, col0",
from: "1pbba_dFcpWQKQDXQUt9RNXp16GqX5Jz-NraafEI",
where: ""
},
options: {
styleId: 3,
templateId: 3
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
To center the map on the markers (or zoom the map to show them all, you will need to query the FusionTable for all the markers, construct a google.maps.LatLngBounds object from their locations, then use that as an argument to map.fitBounds.
Here are a couple of examples that do that (but with a different column layout (two column location) than your table. The concept can be adjusted for your column layout (query for the single column location, parse it to create a google.maps.LatLng and add it to the google.maps.LatLngBounds):
http://www.geocodezip.com/v3_FusionTablesLayer_centerOnMarkers.html
http://www.geocodezip.com/www_vciregionmap_comC.html
example that zooms and centers the map on the data in your table. Notes:
The GViz API that is used is limited to 500 rows, if you have more data that that you probably don't want to do this anyway.
The maps is centered on the data not the user.
I'm using the Google Map V3 Javascrpt API to embed a Google Map. When a user goes into street view on the embedded map how do you move the rotation controls to the right side. I've tried setting up these options when creating the map:
rotateControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
}
However, when in street view the rotate controls remain on the left? Is there a way to position the rotate controls when in street view to the right side?
Yes, you can place the controls in other positions, but the solution is a little tricky.
You can set the streetView controls position in a StreetViewPanoramaOptions. The problem is that you can pass the options object to the StreetViewPanorama object only in its constructor. Therefore you have to create a default StreetViewPanorama object, that is not visible (otherwise the streetview panorama would be loaded instead of the map). The StreetViewPanoramaOptions would be:
var streetViewOptions = {
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
visible: false
};
Create the StreetViewPanorama in the same div as the map:
var street = new google.maps.StreetViewPanorama(document.getElementById('map_canvas'), streetViewOptions);
Add streetView option to the map options:
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetView: street
}
Create the map:
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);