I want to be able to remove the vertical and horizontal dotted lines from my google map. What do I need to do to remove them when creating the map?

var mapOptions = {
  zoom: "",
  zoomControl: "",
  center: "",
  disableDefaultUI: "",
  draggable: "",
  styles: "",
  disableDoubleClickZoom: ""
}

mapOptions.zoom = 1;
mapOptions.zoomControl = false;
mapOptions.center = new window.google.maps.LatLng(mapCoordinates.latitude, mapCoordinates.longitude);;
mapOptions.disableDefaultUI = true;
mapOptions.draggable = false;
mapOptions.styles = "";
mapOptions.disableDoubleClickZoom = true;

$googlemap = new window.google.maps.Map(document.getElementById('map-canvas'), mapOptions);

I want to be able to remove the vertical and horizontal dotted lines from my google map. What do I need to do to remove them when creating the map?

var mapOptions = {
  zoom: "",
  zoomControl: "",
  center: "",
  disableDefaultUI: "",
  draggable: "",
  styles: "",
  disableDoubleClickZoom: ""
}

mapOptions.zoom = 1;
mapOptions.zoomControl = false;
mapOptions.center = new window.google.maps.LatLng(mapCoordinates.latitude, mapCoordinates.longitude);;
mapOptions.disableDefaultUI = true;
mapOptions.draggable = false;
mapOptions.styles = "";
mapOptions.disableDoubleClickZoom = true;

$googlemap = new window.google.maps.Map(document.getElementById('map-canvas'), mapOptions);

• javascript
• google-maps
• google-maps-api-3

2 Answers 2

If you want just the equator and the international date line removed. Looks like you need to remove all the administrative geometries.

{
  "featureType": "administrative",
  "elementType": "geometry",
  "stylers": [
    { "visibility": "off" }
  ]
}

That removes all the other administrative boundaries as well, to put them back you need to add them back individually:

  {
    "featureType": "administrative.country",
    "elementType": "geometry.stroke",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "administrative.province",
    "elementType": "geometry.stroke",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "administrative.locality",
    "elementType": "geometry.stroke",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "administrative.neighborhood",
    "elementType": "geometry.stroke",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "administrative.land_parcel",
    "elementType": "geometry.stroke",
    "stylers": [
      { "visibility": "on" }
    ]
  }

code snippet:

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 2,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: [{
        "featureType": "administrative",
        "elementType": "geometry",
        "stylers": [{
          "visibility": "off"
        }]
      }, {
        "featureType": "administrative.country",
        "elementType": "geometry.stroke",
        "stylers": [{
          "visibility": "on"
        }]
      }, {
        "featureType": "administrative.province",
        "elementType": "geometry.stroke",
        "stylers": [{
          "visibility": "on"
        }]
      }, {
        "featureType": "administrative.locality",
        "elementType": "geometry.stroke",
        "stylers": [{
          "visibility": "on"
        }]
      }, {
        "featureType": "administrative.neighborhood",
        "elementType": "geometry.stroke",
        "stylers": [{
          "visibility": "on"
        }]
      }, {
        "featureType": "administrative.land_parcel",
        "elementType": "geometry.stroke",
        "stylers": [{
          "visibility": "on"
        }]
      }]
    });


}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis./maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

You have to create a styled map to remove the equator and international date-line. But be aware it can remove other administrative elements as well.

// Map style CODE after create $googlemap
var cleanStyle = [{
    featureType: "administrative",
    elementType: "geometry",
    stylers: [
      { visibility: "off" }
    ]
}];

// Create a new Styled Map
var styledMap = new google.maps.StyledMapType(cleanStyle);
// Attach the styledMap with the main map
$googlemap.mapTypes.set('cleanMap', styledMap);
// Set the new styled map as active
$googlemap.setMapTypeId('cleanMap'); 

Here is an example