How to add logo to copyrights in google maps? - google-maps

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.

Related

Vaadin how to add Google heat map

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.

how Can I put numbers on map instead of generic markers?

in google maps how can weput numbers on map instead of generic (if multiple number of icons listed means number have to increment like 1,2,3 )
instead of
var iconBlue = new GIcon();
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(12, 20);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
is this possible in google maps ???
here i found some link but it's not working.
It's not possible to do with the current API (v3) - but you can use the StyledMarker Library. It extends the marker class and allows you to style the icon and put text inside the icons if you want as well (which is what I believe you're looking for). Just include the script in your application (after you load the Maps API script). And then add the StyledMarker like you would the regular marker object:
var styleMaker1 = new StyledMarker({
styleIcon: new StyledIcon(StyledIconTypes.MARKER, {
color: "FFFFFF",
text: "1" //this is where you'll set your incremented value
}),
position: myLatLng,
map: map
});
Here's a fiddle of how it looks: http://jsfiddle.net/svigna/7L2wY/

disable all other views not including map view Gmap2

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.

overriding big popup on directions Google Maps

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);
}

Google maps v3 - Contextual menu available?

Are there any contextual menus available for Google Maps v3?
You can add context menu as it is decribed here How to add context menu to google maps, using api V3:
Here is a full JQuery solution : http://gmap3.net/examples/context-menu.html
Old question but it came up in my googling so I thought I would post the simplest answer. It's a context menu without the use of more 3rd party js libraries. There's also a latlon object in the event that you can get the lat/lon for where the person clicked, to add a maker or whatever.
var contextMenu = google.maps.event.addListener(
map,
"rightclick",
function (event) {
// use JS Dom methods to create the menu
// use event.pixel.x and event.pixel.y
// to position menu at mouse position
$('.contextmenu').remove(); //remove previous context menus
contextmenuDir = document.createElement("div");
contextmenuDir.className = 'contextmenu';
//now add our options.
contextmenuDir.innerHTML = '<a id="menu1"><div class="context">menu item 1<\/div><\/a>'
+ '<a id="menu2"><div class="context">menu item 2<\/div><\/a>';
$(map.getDiv()).append(contextmenuDir);
contextmenuDir.style.visibility = "visible";
// might need to offset if you have moved the map div like i did (then - the pixel size off)
$('.contextmenu').css('left', event.pixel.x );
$('.contextmenu').css('top', event.pixel.y);
console.log(event); //log some details about the object we get
});
None yet. Google working on one now.