How can I control the Zoom Level of my Google Map with hyperlinks? For instance I want three defined levels (Location in UK, UK in Europe, Europe in the World). Clicking on these links will display the map with a different zoom level.
I'm using Google Maps API v3
That shouldn't be too difficult to do.
When you create the map, you get a reference to the map object, e.g.
var mapOptions = {mapTypeId: google.maps.MapTypeId.TERRAIN};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
Once you have the object, you can zoom to a specific level like this:
function zoomToLevel() {
map.setZoom(8);
}
So you'd just need to set the click event of your hyperlink to run the javascript function:
Zoom to level 8
For what you're doing though, it might be better to get the map to select it's own zoom level based on the area. This function is actually zooming to show the Pyrenees, but the idea could be used for any area, as long as your points are at diagonally opposite corners:
function zoomPyrenees() {
var startPoint;
var endPoint;
var boundsPyrenees;
startPoint = new google.maps.LatLng(43.373403, -1.774107);
endPoint = new google.maps.LatLng(42.482463, 3.129875);
boundsPyrenees = new google.maps.LatLngBounds();
boundsPyrenees.extend(startPoint);
boundsPyrenees.extend(endPoint);
map.fitBounds(boundsPyrenees);
}
Related
I am currently working on making clustered google maps. I have managed to cluster the markers. I have two types of markers in my map. Now when i cluster these, I can not show the underlying markers into groups.
I want to convert them into pie chart. Each marker count having their weight in the pie chart. Just like the below image.
Chart Marker Clusterer
I have also read about MarkerClustererPlus. But there are no examples using this in maps.
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/
This link is not working. If there is any other documentation about this plz share.
I have two different types of marker in my map. When these two types of marker gets clustered, The cluster should become a pie chart which contains the weight of these two in proportionate to the underlying marker count.
If there is anything related to this please answer. Thanks.
All that you nead is here https://github.com/hassanlatif/chart-marker-clusterer
Traffic_accidents.json - is your data for simple_example.html
var accident_injuries = data.features[i].properties["5074"]; // Some like category ...
Then set data for your pie chart (group and title):
switch (Number(accident_injuries)) {
case 1:
accident_title = "Fatal";
break;
case 3:
accident_title = "Serious injuries";
break;
case 2:
accident_title = "Very serious injuries";
........
Set your up marker
var accident_LatLng = new google.maps.LatLng(Number(accident_lnglat[1]), Number(accident_lnglat[0]));
var marker = new google.maps.Marker({
position: accident_LatLng,
title: accident_title
});
Then push it into array
markers.push(marker);
After for loop just generate cluster
var markerCluster = new MarkerClusterer(map, markers, opt);
And thats all. Voalaa
I need to highlight a section of a street between two intersections. I have found a similar question which was asked more than a year ago (see here) which says that Google, Bing, etc. do not provide street data through their APIs. Does anyone know if anything has changed in the APIs, and whether I can get street location latitude/longitude data from somewhere now?
I have done this in API V2, but it should not be to difficult to rewrite it for V3.
Have a look at this website http://www.fvs.de/anfahrt.php (in German) and click the "Weg in Karte zeigen" buttons ("show way in map") in the sections below the map. Each button highlights another street line in the map.
It is basically done by using directions object of Google Maps to plot a route between two arbitrary street points in the map (e.g. your two intersections). The points must be encoded with their LatLng coordinates. Here is a code example (as said this is API V2):
function initMap() { // called by page onload event
if (GBrowserIsCompatible()) {
// Display the map, with some controls and set the initial location
gMap = new GMap2(document.getElementById("map_canvas"));
gMap.addControl(new GLargeMapControl());
// ...
gMap.setCenter(GLatLng(49.238326, 6.977761), 15);
// init directions object and attach listener to handle route loads from function highliteRoute()
gDir = new GDirections();
gPoly = null;
GEvent.addListener(gDir, 'load', function(){
gPoly = gDir.getPolyline();
gMap.addOverlay(gPoly);
// zoom & pan to poly
var polyBds = gPoly.getBounds();
var polyZoom = gMap.getBoundsZoomLevel(polyBds);
gMap.setZoom(polyZoom);
gMap.panTo(polyBds.getCenter());
});
}
}
function highliteRoute(){
if(gPoly!=null) gPoly.hide();
gDir.load('from: 49.313530,6.969109 to: 49.238326,6.977761', {getPolyline:true});
}
I researched the Maps Api and it's pretty complicated for me..and I didn't find what I want.
I wrote a php program that does some gps coordinate manipulation and returns me 2 sets of latitude and longitude value ready to use. All I want is to generate a map showing 2 markers for these 2 places, with a straight line between them.
One pair of LAT/LNG value is different each time but for sure somewhere in US, and the other pair is random, can be anywhere in the world. (and hence, maybe the zoom level should adjust accordingly)
How should I implement this? Thanks a lot!
edit:
I have created this map with 2 markers, code:
echo '
function initialize() {
var pos_query = new google.maps.LatLng('.$decimal_latitude.','.$decimal_longitude.');
var pos_tim = new google.maps.LatLng('.$result_tim_lat.','.$result_tim_lon.');
// var latlngbounds = new GLatLngBounds();
// latlngbounds.extend(pos_query);
// latlngbounds.extend(pos_tim);
var myOptions = {
zoom: 5,
center: pos_tim,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
//---> map.setCenter(latlngbounds.getCenter(), map.getBoundsZoomLevel(latlngbounds));
var marker_query = new google.maps.Marker({
position: pos_query,
map: map,
title:"Your query location"});
var marker_tim = new google.maps.Marker({
position: pos_tim,
map: map,
title:"Tim Horton"});
}
</script>';
However, I want to auto-adjust the zoom level and center of map using the code in comment.
But it doesnt work (the map doesnt show up)
I guess Im using V3 and the code in the comment part is older version?
Most of the Maps API's will do what your asking easily. You should read this Google Maps API-Jscript
This will get you started.
This is the actual API reference and is where you will find Maps, Controls, Overlays and Services. Pay special attention to the Overlays section, this is what you need to place your points on a map as well as custom images or graphics. The rest is programming. If you have specific questions regrading programming your best bet is to try some of this in your code and come back with code examples of what you're trying. Hope this helps.
I've just begun using the Google Maps API (v3.0) and have had a good deal of success so far. I am loading a set of objects with Latitude & Longitude values from a database, passing them into my script, and looping over them in the script in order to add them to the map.
I am using the "bounds.extend() / map.fitBounds()" method of setting the map's zoom & bounds (see code below), which works as expected the first time around; however, if I clear out the existing markers, fetch another set of objects, and do the same thing on the same map instance, it sets the bounds incorrectly, usually resulting in a minimum zoom (an astronaut's view).
My suspicion is that my map object has some memory of the previous set of bounds that I've given it and that I need to find a way to clear these bounds before assigning my new ones, but I really can't be too sure.
Any help is greatly appreciated!
var locationList = [];
for (var i = 0; i < mapPoints.length; i++) { // mapPoints is a collection of DTOs
var mapPoint = mapPoints[i];
var location = new google.maps.LatLng(mapPoint.Latitude, mapPoint.Longitude);
locationList.push(location);
var marker = new google.maps.Marker({
map: map,
icon: '/Content/images/map/' + mapPoint.Status.Icon,
shadow: '/Content/images/map/shadow.png',
position: location
});
markers.push(marker); // markers is an Array that is managed outside this loop
}
var bounds = new google.maps.LatLngBounds();
for (var j = 0; j < locationList.length; j++)
bounds.extend(locationList[j]);
map.fitBounds(bounds);
This isn't the answer, so to speak, but a (slightly hacky) workaround that I discovered on a thread in the Google Maps Javascript API v3 group:
//map.fitBounds(bounds);
setTimeout( function() { map.fitBounds( bounds ); }, 1 );
if the above answer doesn't work for you (it didn't for me), the problem might lie in bootstrap (assuming you're using it). bootstrap modals specifically generate all sorts of wonky behaviour when i embed a map object in it.. curiously correcting itself if/when i drop an 'alert' in there.. in any case, i solved all my problems by just building my own modal (ie, not using bootstraps modals).
There are about 100 markers on a google map plus there is one special marker that needs to be visible. Currently, the markers around it hide it totally or partially when the map is zoomed out. I need that marker to be fully visible and I think keeping it on top of all other markers should do the trick. But I cannot find a way to modify its stacking order (z-index).
This is for Google Maps API 2.
For Google Maps API 3 use the setZIndex(zIndex:number) of the marker.
See:
http://code.google.com/apis/maps/documentation/javascript/reference.html#Marker
Use the zIndexProcess option in GMarkerOptions when you create the marker that you want on top. For example:
var pt = new GLatLng(42.2659, -83.74861);
var marker = new GMarker(pt, {zIndexProcess: function() { return 9999; }});
map.addOverlay(marker);
I believe the default is to have a z-index that is the latitude of the point of the marker, so this should be fairly safe at bringing a single marker to the front. Further, this was just a simple example; you can set the z-index of all your markers in whatever simple or complex way you want. Another example is to have two functions: one for special markers and one for the rest.
var pt1 = new GLatLng(42.2659, -83.74861);
var pt2 = new GLatLng(42.3000, -83.74000);
var marker1 = new GMarker(pt1, {zIndexProcess: specialMarker});
var marker2 = new GMarker(pt2, {zIndexProcess: normalMarker});
map.addOverlay(marker1);
map.addOverlay(marker2);
function specialMarker() {
return 9999;
}
function normalMarker() {
return Math.floor(Math.random()*1000);
}
Adding on to jhanifen's answer, if you want to get your one special marker to be on top of all the rest, set it's zIndex to google.maps.Marker.MAX_ZINDEX + 1. This will make sure that it is on top of any marker on the map.