Google Maps - Disable Default Feature Layers via JavaScript - javascript

I have an app that uses Google Maps (JavaScript). When I load the map, it includes a variety of places already included. For example, if I have the map focused on Chicago, IL, the United Center appears. I can click it and a tool tip appears.
I am putting push pins on the map with my own search results. If a user clicks a pushpin, I show them a tooltip. How do I only show tooltips for the pushpins that I add? Essentially, I want to disable the default tooltip approach and only use tooltips with my results.
Thank you!

You can disable these by setting the visibility to off for that particular feature. You just need to set it in the styles property when you configure your map. Something like:
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 15,
center: new google.maps.LatLng(41.8337329,-87.7321555),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
featureType: "poi",
stylers: [
{ visibility: "off" }
]
}
]
});
You can see a working code sample on this fiddle.
There is a further reference which lists all the different types of features you can control on the Google Maps API under the google.maps.MapTypeStyleFeatureType object specification.

Related

Google Maps - Disable map tiles and show only polygon shapes

Working with Google Maps V3 Api. This is a strange request, but i wondered if its possible to draw polygon shapes on the map canvas using LAT and LONG, but disable/hide the the map tiles within the canvas. So in short, id like to show JUST the shapes that are drawn on the map.
As per google maps docs you can do this when you initialize your map:
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 40.674, lng: -73.945},
zoom: 12,
styles: [
{elementType: 'all', stylers: [{visibility: 'off'}]},
]
});
This applies a custom style that hides everything on the map. You could then apply a style to your polygons to make them appear.
https://developers.google.com/maps/documentation/javascript/styling

Custom Google Maps

In my HTML page instead of using:
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(51.489021, -0.1164075),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: styles
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
I'd like to use a Custom Map I've created.
https://www.google.com/maps/d/edit?mid=zd34x9vOEi3A.kNJZAfpCCD80
But I don't want to embed the map into my page, I want to do the styling on the HTML page. Is this possible?
Well, depending on what kind of customizing you want to perform on your page, you can include the Google Maps JavaScript API 3 in your page. This will allow you various customization from adding custom markers, adding images, to calculating and drawing directions. There are even helpful examples, so I'd say it's a great start to add a custom google map to your html.

Google maps street view panorama options

I'm utilizing the Street View option with Google Maps but I can't figure out how to customize the controls if don't have the street view as the initial screen. Right now I have:
map = new google.maps.Map(mapDiv, {
zoom: 14,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER
},
zoomControl:false,
disableDefaultUI: false
so this will enable the Pegman that you can drag to switch to the street view but I want to disable the close box and the zoom. I did find this API documentation but I'm not sure how to set the controls when I'm not manually creating the street view myself. Any help would be appreciated.
Directly after you create your map object, you can do:
map.get('streetView')
.setOptions({
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM_RIGHT,
},
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
})
Or, however else you'd like to setup your controls. https://developers.google.com/maps/documentation/javascript/reference#StreetViewPanoramaOptions
is a list of available options. You can also pass a new StreetViewPanorama upon creating your map object, but unless you have some serious customization to do, it's not necessary.
Get a copy of the map object. When the event is called, run the following: map.set('zoomControl', false)
map.set('enableCloseButton', false)

How do I remove nearby places when embedding google map in an iframe?

I want to embed the following map on my website:
https://maps.google.co.uk/maps?q=67+Bridge+Street,+Chester&hl=en&sll=53.16379,-2.737316&sspn=0.678421,2.113495&oq=67+bridge+&hnear=67+Bridge+St,+Chester+CH1+1NW,+United+Kingdom&t=m&z=16
The map has a marker for the desired address but then it also has markers for nearby places like Costa coffee, Eastgate clock etc.
Is there a way to embed the map without markers for any other places on it?
Just to clarify I want to keep the big red marker but remove all the other places of interest and businesses
Google Map api allows developer to control its appearance, refer to syntax styling
Map Features: A map consists of a set of features, such as a road or park, which are
specified using a MapTypeStyleFeatureType. The feature types form a
category tree, with all as the root. The full list of features for
selection within a map is documented in the Maps Javascript API V3
Reference. Specifying the feature as all will select all map elements.
google.maps.MapTypeStyleFeatureType includes many values for feature types, i.e. road.labels, landscape.natural, poi.business,
in your case, the way to hide other business place, here is an example to achieve:
var styles = [
{
featureType: "poi",
elementType: "business",
stylers: [
{ visibility: "off" }
]
}
];
map.setOptions({styles: styles});
You're going to have to write a little Javascript to make that happen. Check the Google Maps site on styling here: https://developers.google.com/maps/documentation/javascript/styling
Specifically check out this paragraph on that resource:
Style Array Example
The map feature selectors and the styler rules are combined into a
style array. Any number of features can be targeted in a single array.
The following example turns all map features to gray, then colors
arterial road geometry in blue, and hides business labels
completely
There is an example of that code immediately below it. Hope that helps.

How do I change the color of the sea in google maps v3

I am using google maps v3 in a new website I am creating and I want to be able to display the sea color as white or transparent. I cannot see how to do this so if anyone knows I would appreciate the help.
By the way, the google map is of country: Ireland
Using the Google Maps API v3:
[
{
featureType: "water",
elementType: "geometry",
stylers: [
{ invert_lightness: true },
{ hue: "#ff003b" },
{ saturation: -100 },
{ lightness: 100 } /* generates "white" color */
]
}
]
Use the following tool to assist in styling maps:
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
You can style your map with the Styled Maps Wizard
When you are done you can export the changes via the Show JSON button at the bottom right.
Finally, pass the resulting JSON to your map:
var map = new google.maps.Map(container_element, {styles: your_exported_settings});
Or if you need to change an existing map instance:
map.setOptions({styles: your_exported_settings});
You can also check out the Google Maps JavaScript API V3 Styling guide
You have also a wizard to know how it will work with your stylers there :
Stylers Wizard Google Maps
You can click on Show JSON to see the code ! Have fun ;) !

Categories