I am using Google Map v2 and I only want map view and nothing more. I also would like to get rid of the zoom in and out buttons.
If anyone knows what I need to add to the following that would be great.
function stores()
{
$('#storelist ul#stores').html("");
fetch(203,"task=location&location=vic");
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(-37.810013, 144.962683), 8);
map.setUIToDefault();
yellowIcon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/orange/blank.png";
markerOptions = { icon:yellowIcon };
}
Remove map.setUIToDefault(). It adds the default look and feel to the Map.
(Reference docs: http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GMap2.setUIToDefault)
If you want, you can also customise how the map can be interacted with. For example map.disableDoubleClickZoom() or map.disableDragging(). See the reference above for details.
Related
I am using google-map-react to render maps in my react app.I am displaying dynamic number of markers on the map.I need to fit the view of map so that it just encloses all the markers.I went through this thread but found it a bit complicated.Can anyone please give me an overview of how this can be done?
It happens that I had to do the exact same thing recently. I found that existing libs were more getting on my way than actually helping so I just went with writing my own component.
In case you decide going the same way - here's how to do what you want:
First - you need to get the bounds object enclosing all your markers. Here we assume that this.state.markers contains an array of google.maps.Marker objects
Your component could have the following method to do that:
getObjectsBounds(){
let objectsBounds = new google.maps.LatLngBounds();
Object.values(this.state.markers).map((marker) => {
let lat = parseFloat(marker.getPosition().lat());
let long = parseFloat(marker.getPosition().lng());
let point = new google.maps.LatLng(lat, long);
objectsBounds.extend(point);
});
return objectsBounds;
}
Now we just use fitBounds on the above funtion's return results. Here we assume that this.map is your gmap, i.e. what google.maps.Map( ... your args ... ) returns.
fitBounds(){
let bounds = this.getObjectsBounds();
this.map.fitBounds(bounds);
}
I have a Vaadin application where I would like to integrate Google heatmaps. I am using com.vaadin.tapio.googlemaps dependency for displaying a map and it works fine. However, I am not sure how to add a heatmap layer on top of the Google map and I couldn't find any relevant resource.
Relevant part of my trial code looks like this:
VerticalLayout rootLayout = new VerticalLayout();
rootLayout.setSizeFull();
// Google Map
GoogleMap googleMap = new GoogleMap("api_key", null, null);
googleMap.setZoom(10);
googleMap.setSizeFull();
googleMap.setMinZoom(4);
googleMap.setMaxZoom(16);
Panel mapsPanel = new Panel();
mapsPanel.setSizeFull();
mapsPanel.setContent(googleMap);
rootLayout.addComponent(mapsPanel);
double centerLon = 8.5417;
double centerLat = 47.3769;
googleMap.setCenter(new LatLon(centerLat, centerLon));
GoogleMapMarker centerMarker = new GoogleMapMarker("Zurich", new LatLon(centerLat, centerLon),true, null);
googleMap.addMarker(centerMarker);
HeatMapLayer heatMapLayer = HeatMapLayer.newInstance(HeatMapLayerOptions.newInstance());
// Add data to heatmap
...
// How can I add this HeatMapLayer to the existing map?
// Or do I need a different approach?
UI.getCurrent().setContent(rootLayout);
HeatMapLayer is a GWT (client-side) object, you can't use it directly with GoogleMap which is a server-side component. You can check this fork of com.vaadin.tapio.googlemaps, it adds support for HeatMapLayer with GoogleMapHeatMapLayer class.
I did draggable directions according to Google manual:
ren = new google.maps.DirectionsRenderer( {'draggable':true} );
ser = new google.maps.DirectionsService();
google.maps.event.addListener(ren, 'directions_changed', function() {
// here I can load map, etc... everything works.
});
But, what should I do, if I want to change route options before next drag. I want exactly toggle avoidHighways and avoidTolls to true/false.
Is it even possible or not?
Both properties are options of a directionsRequest, so you'll have to request the route again(based on the current origin/destination) with the desired options.
I'm adding new layers to my google map application and want to add new logo there. Like in this case:
Is there some clean way how to do it in the google maps API, like using GCopyright and GCopyrightCollection classes in google maps API v2? Or is this missing in v3 (like many other features) and I have to do it manually?
In Google Maps API v3, there's no copyright API. Note that in v2, the GCopyright was used to add textual copyright information, not a logo.
To add a logo to the map you have to create a custom control.
Create a logo custom control:
function MyLogoControl(controlDiv) {
controlDiv.style.padding = '5px';
var logo = document.createElement('IMG');
logo.src = 'img/my_logo.png';
logo.style.cursor = 'pointer';
controlDiv.appendChild(logo);
google.maps.event.addDomListener(logo, 'click', function() {
window.location = 'http://www.example.com';
});
}
Add the control to the map:
var logoControlDiv = document.createElement('DIV');
var logoControl = new MyLogoControl(logoControlDiv);
logoControlDiv.index = 0; // used for ordering
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(logoControlDiv);
Similarly a copyright information can be added. But you can't modify the default copyrights, you have to add yours somewhere next to the defaults.
If you want to add a copyright information that's bound to a bounding box and/or zoom level, you have to create such behaviour manually.
I've happily implemented v2 of Google maps to my site without a hitch, I also successfully perform a drive directions using GDirections.load().
What I need to do is stop the popup of the mini map when you select a particular step in the routing directions. So when the user clicks on say "step 3", instead of the default popup showing a mini map, I'd like to add a custom icon to that position.
Hope it makes sense
Thanks in advance guys.
You need to add a handler on the GDirections object for the addoverlay event:
GEvent.addListener(gdir, "addoverlay", onGDirectionsAddOverlay);
When your onGDirectionsAddOverlay handler is called you can iterate through the new markers and replace them with copies that open your custom info window:
for (var i = 0; i <= gdir.getNumRoutes(); i++)
{
var originalMarker = gdir.getMarker(i);
latLngs[i] = originalMarker.getLatLng();
icons[i] = originalMarker.getIcon();
newMarkers[i] = new GMarker(latLngs[i], { icon: icons[i], draggable: true, title: 'Kan flyttes' });
map.addOverlay(newMarkers[i]);
// add stuff to your newMarkers[i] click event...
// ..
// Now we can remove the original marker safely
map.removeOverlay(originalMarker);
}