Google Maps - Disable map tiles and show only polygon shapes - javascript

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

Related

Google Maps API marker move on scroll and layout style

I'm new in the Google Maps API, I am trying to embed a marker with the address on google maps but I have errors.
https://developers.google.com/maps/documentation/javascript/adding-a-google-map#map
I'm using this documentation and I have copied this code but it doesn't work properly because when you scroll the marker it's not fixed in the map but its move and doesn't stay in the correct place.
Also, the buttons in the left corner MAP and SATELLITE doesn't appear properly, they appear with a background line in the whole map and don't together smaller.
Finally, the + and - button doesn't appear.
Someone could tell me why I have all this problem?
Here is my code:
<script>
function initMap() {
var blitz8 = {lat: 45.806510, lng: 10.109520};
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 18,
center: blitz8
});
var marker = new google.maps.Marker({
position: blitz8,
map: map
});
};
</script>
And here the Live Page:
https://sebalaini.github.io/Blitz8/
Hi I resolve that problem by disabled some css option in your base.scss please check and fix that, check my picture uploaded below

Centering the map depends on the markers in Angular OpenLayers directive

I use Angular-openlayers-directive by tombatossals . Is there a way to center the map depending on the markers?
Create Bounds from markers (first marker Coordinates and Last Marker Coordinates) and use it like as-
center {
extent: [ 0, 0, 51.505, -0.09 ]
}
For More reference see this link https://github.com/tombatossals/angular-openlayers-directive/blob/master/doc/02-center-attribute.md

Image enlarge on click and hotspots

I have a large map of the UK with multiple walking routes marked on. Currently the map is split into zones but walkers have asked to see the map as a whole so they can link routes together.
However, the routes then look very small. Is it possible to have a map with a clickable scale on one side that allows then to zoom into an area of the map. The map needs to be draggable and once zoomed in to still allow hotspotting. Is this possible?
You need to initialize the map with a init() function and pass necessary parameters that would enable controls like zoom and drag.
Add this code to your Google Map page.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -33, lng: 151},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
}
});
}
For additional details, take a look at this official document.

Google Maps - Disable Default Feature Layers via 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.

Zooming to center on a map in Google Maps API V3

I'm new to using google maps and am trying to find out how to restrict the zoom function so that it does not zoom anywhere except of the center of the map and not zoom to the mouse point. Basically it zooms to the center of the returned map no matter where your mouse pointer is on the map as opposed to zooming where the mouse pointer is located on the map. I don't even know if this is possible currently, some help would be appreciated.
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(51.285583, 1.091045);
var myOptions = {
zoom: 15,
center: latlng,
scrollwheel: true,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.285826, 1.089973),
map: map,
title: 'Run of The Mill',
clickable: true
});
}
</script>
There are several zoom types:
using zoom control - that zooms to the center of the map
using scroll wheel - that zooms to the mouse pointer as you complain
using double click - that first centers the place under the mouse pointer and then zooms
So if you want only the first zoom type, you can disable the other two by setting disableDoubleClickZoom and scrollwheel map options to false.
Moreover, you might handle dblclick map event (scroll wheel event is not so straightforward, but maybe you'll find a way how to handle the scroll wheel in javascript too) and in this handler just change the map scale using map.setZoom(). The map center will stay the same. Fairly easy.
Or handle this by re-centering the map on zoom change. This preserves the expected functionality on double click and scroll wheel.
google.maps.event.addListener(map,'zoom_changed',function () {
map.setCenter(new google.maps.LatLng(47.61388802057299,-122.31870898147581));
})
From what I can see in your code you are zooming on the latlng variable that you declared above. That is correct. You myOptions variable is then passed into your new maps declaration. So you should be centered on 51.285583, 1.091045, which is Caterbury Kent in the UK.
If that is where your mouse is pointing it is working, if this doesn't help I would suggest copying an example from the google examples and cutting out what you don't need for your first demo.
http://code.google.com/apis/maps/documentation/javascript/examples/index.html

Categories