Cómo evitar la repetición en Google Map API v3 Custom Map and Marker

Estoy usando Google Maps API v3 . ¿Cómo evito repetir el map y el marcador en mi proyecto?

Enlace Aquí , ¿Cómo puedo evitar esto? A continuación está mi código.

var geocoder; var map, cloud; var counter = 0; var markers = []; var locations = []; var locationtext =[]; 

Aquí agregando location para mi map

 locations[0] = new google.maps.LatLng(-30.67515, -73.54297); locationtext[0]="Chile"; locations[1] = new google.maps.LatLng(18.08200, 8.67528); locationtext[1]="Nigeria"; locations[2] = new google.maps.LatLng(55.16569, 12.45153); locationtext[2]="Germany"; locations[3] = new google.maps.LatLng(45.37421, 24.82680); locationtext[3]="Greece"; locations[4] = new google.maps.LatLng(58.38124, 0.22094); locationtext[4]="England"; locations[5] = new google.maps.LatLng(41.82641, 36.42986); locationtext[5]="Cyprus"; locations[6] = new google.maps.LatLng(44.96375, 42.24332); locationtext[6]="Turkey"; locations[7] = new google.maps.LatLng(39.88692, 12.53750); locationtext[7]="Tunisia"; locations[8] = new google.maps.LatLng(36.31166, 50.48177); locationtext[8]="Kuwait"; locations[9] = new google.maps.LatLng(32.35483, 54.88388); locationtext[9]="Qatar"; locations[10] = new google.maps.LatLng(35.03389, 2.65963); locationtext[10]="Algeria"; locations[11] = new google.maps.LatLng(39.93911,68.70995); locationtext[11]="Afghanistan"; locations[12] = new google.maps.LatLng(35.67532,73.345125); locationtext[12]="Pakistan"; locations[13] = new google.maps.LatLng(58.13037,-106.34677); locationtext[13]="Canada"; locations[14] = new google.maps.LatLng(46.09024,-98.34677); locationtext[14]="United states"; locations[15] = new google.maps.LatLng(12.42375,-66.08973); locationtext[15]="Venezuela"; locations[16] = new google.maps.LatLng(-2.18997,-77.01515); locationtext[16]="Peru"; locations[17] = new google.maps.LatLng(-16.14250,-58.44383); locationtext[17]="Paraguay"; locations[18] = new google.maps.LatLng(-26.52278,-55.76584); locationtext[18]="Uruguay"; locations[19] = new google.maps.LatLng(-29.11610,-65.31667); locationtext[19]="Argentine"; locations[20] = new google.maps.LatLng(52.22764,5.21375); locationtext[20]="France"; locations[21] = new google.maps.LatLng(48.0976406,15.4222894); locationtext[21]="Rome"; locations[22] = new google.maps.LatLng(41.82641, 42.42986); locationtext[22]="Syria"; locations[23] = new google.maps.LatLng(36.82641, 38.22986); locationtext[23]="Jordan"; locations[24] = new google.maps.LatLng(34.82641, 32.22986); locationtext[24]="Egypt"; locations[25] = new google.maps.LatLng(-24.67515, 158.22986); locationtext[25]="Sydney"; 

Agregar marcador personalizado

 var image = new google.maps.MarkerImage( 'http://img.javascriptes.com/javascript/pin.png', new google.maps.Size(28,54), new google.maps.Point(0,0), new google.maps.Point(14,54) ); 

Agregar un map personalizado

 function CustomMapType() {} CustomMapType.prototype.tileSize = new google.maps.Size(1200, 760); CustomMapType.prototype.maxZoom = 2; CustomMapType.prototype.getTile = function (coord, zoom, ownerDocument) { var div = ownerDocument.createElement('DIV'); var baseURL = 'http://img.javascriptes.com/javascript/map.jpg'; div.style.width = this.tileSize.width + 'px'; div.style.height = this.tileSize.height + 'px'; div.style.backgroundColor = '#1B2D33'; div.style.backgroundImage = 'url(' + baseURL + ')'; return div; }; CustomMapType.prototype.name = "Custom"; CustomMapType.prototype.alt = "Tile Coordinate Map Type"; var CustomMapType = new CustomMapType(); function init() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 2, minZoom: 2, center: latlng, mapTypeControl: false, streetViewControl: false, zoomControl: false, panControl: false, draggable: false, scrollwheel: false, mapTypeControlOptions: { mapTypeIds: ['custom', google.maps.MapTypeId.ROADMAP] } } map = new google.maps.Map(document.getElementById('map-canvas'), myOptions); map.mapTypes.set('custom', CustomMapType); map.setMapTypeId('custom'); for (var i = 0; i < locations.length; i++) { makeMarker(locations[i], locationtext[i]); } centerMap(); } function centerMap() { map.setCenter(new google.maps.LatLng(37.4419, 12.1419)); } function makeMarker(location, text) { var marker = new google.maps.Marker({ map: map, icon: image, position: location }); markers.push(marker); if (jQuery.browser.msie && jQuery.browser.version == "7.0") { text = "<div style='width:80px; height:20px;'>" + text + "</div>"; } var contentString = text; var infowindow = new google.maps.InfoWindow({ content: contentString }); google.maps.event.addListener(marker, 'mouseover', function () { infowindow.open(map, this); }); google.maps.event.addListener(marker, 'mouseout', function () { infowindow.close(map, this); }); } google.maps.event.addDomListener(window, 'load', init); 

2 Solutions collect form web for “Cómo evitar la repetición en Google Map API v3 Custom Map and Marker”

No estoy seguro de lo que quiere decir con "evitar repetir el map y el marcador", pero su código sería más claro con una estructura única para sus datos, como esta:

 var locations = [ { lat: -30.67515, lng: -73.54297, name: "Chile" }, { lat: 18.08200, lng: 8.67528, name: "Nigeria" }, { lat: 55.16569, lng: 12.45153, name: "Germany" }, ... { lat: -24.67515, lng: 158.22986, name: "Sydney" } ]; ... for (var i = 0; i < locations.length; i++) { makeMarker(locations[i]); } ... function makeMarker(location) { var marker = new google.maps.Marker({ map: map, icon: image, position: new google.maps.LatLng(location.lat, location.lng) }); ... var infowindow = new google.maps.InfoWindow({ content: location.name }); 

Establezca un oyente 'center_changed' con un límite fijo que limite el map a una sola instancia. Concepto del tutorial Javascript v2 de Google Maps de Mike Williams: Parte 7 Restricción de la gama de zoom de maps y panorámicas.

Esto funciona para mí (con tu map específico):

  var fixedBounds = new google.maps.LatLngBounds( new google.maps.LatLng(-85,-120), new google.maps.LatLng(85,160)); google.maps.event.addListener(map,'center_changed', function() { var center = map.getCenter(); if (!fixedBounds.contains(center)) { map.setCenter(lastCenter); } else { lastCenter = center; } }); 

testing de concepto violín

fragment de código:

 var geocoder; var map, cloud; var counter = 0; var markers = []; var locations = []; var locationtext = []; function init() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 2, minZoom: 2, center: latlng, mapTypeControl: false, streetViewControl: false, mapTypeControlOptions: { mapTypeIds: ['custom', google.maps.MapTypeId.ROADMAP] } }; map = new google.maps.Map(document.getElementById('map-canvas'), myOptions); var fixedBounds = new google.maps.LatLngBounds(new google.maps.LatLng(-50, -120), new google.maps.LatLng(65, 160)); google.maps.event.addListener(map, 'center_changed', function() { var center = map.getCenter(); if (!fixedBounds.contains(center)) { map.setCenter(lastCenter); } else { lastCenter = center; } }); map.mapTypes.set('custom', CustomMapType); map.setMapTypeId('custom'); for (var i = 0; i < locations.length; i++) { makeMarker(locations[i], locationtext[i]); } centerMap(); } var image = { url: 'http://img.javascriptes.com/javascript/pin.png', size: new google.maps.Size(28, 54), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(14, 54) }; locations[0] = new google.maps.LatLng(-30.67515, -73.54297); locationtext[0] = "Chile"; locations[1] = new google.maps.LatLng(18.08200, 8.67528); locationtext[1] = "Nigeria"; locations[2] = new google.maps.LatLng(55.16569, 12.45153); locationtext[2] = "Germany"; locations[3] = new google.maps.LatLng(45.37421, 24.82680); locationtext[3] = "Greece"; locations[4] = new google.maps.LatLng(58.38124, 0.22094); locationtext[4] = "England"; locations[5] = new google.maps.LatLng(41.82641, 36.42986); locationtext[5] = "Cyprus"; locations[6] = new google.maps.LatLng(44.96375, 42.24332); locationtext[6] = "Turkey"; locations[7] = new google.maps.LatLng(39.88692, 12.53750); locationtext[7] = "Tunisia"; locations[8] = new google.maps.LatLng(36.31166, 50.48177); locationtext[8] = "Kuwait"; locations[9] = new google.maps.LatLng(32.35483, 54.88388); locationtext[9] = "Qatar"; locations[10] = new google.maps.LatLng(35.03389, 2.65963); locationtext[10] = "Algeria"; locations[11] = new google.maps.LatLng(39.93911, 68.70995); locationtext[11] = "Afghanistan"; locations[12] = new google.maps.LatLng(35.67532, 73.345125); locationtext[12] = "Pakistan"; locations[13] = new google.maps.LatLng(58.13037, -106.34677); locationtext[13] = "Canada"; locations[14] = new google.maps.LatLng(46.09024, -98.34677); locationtext[14] = "United states"; locations[15] = new google.maps.LatLng(12.42375, -66.08973); locationtext[15] = "Venezuela"; locations[16] = new google.maps.LatLng(-2.18997, -77.01515); locationtext[16] = "Peru"; locations[17] = new google.maps.LatLng(-16.14250, -58.44383); locationtext[17] = "Paraguay"; locations[18] = new google.maps.LatLng(-26.52278, -55.76584); locationtext[18] = "Uruguay"; locations[19] = new google.maps.LatLng(-29.11610, -65.31667); locationtext[19] = "Argentine"; locations[20] = new google.maps.LatLng(52.22764, 5.21375); locationtext[20] = "France"; locations[21] = new google.maps.LatLng(48.0976406, 15.4222894); locationtext[21] = "Rome"; locations[22] = new google.maps.LatLng(41.82641, 42.42986); locationtext[22] = "Syria"; locations[23] = new google.maps.LatLng(36.82641, 38.22986); locationtext[23] = "Jordan"; locations[24] = new google.maps.LatLng(34.82641, 32.22986); locationtext[24] = "Egypt"; locations[25] = new google.maps.LatLng(-24.67515, 158.22986); locationtext[25] = "Sydney"; function CustomMapType() {} CustomMapType.prototype.tileSize = new google.maps.Size(1200, 760); CustomMapType.prototype.maxZoom = 2; CustomMapType.prototype.getTile = function(coord, zoom, ownerDocument) { var div = ownerDocument.createElement('DIV'); var baseURL = 'http://img.javascriptes.com/javascript/map.jpg'; div.style.width = this.tileSize.width + 'px'; div.style.height = this.tileSize.height + 'px'; div.style.backgroundColor = '#1B2D33'; div.style.backgroundImage = 'url(' + baseURL + ')'; return div; }; CustomMapType.prototype.name = "Custom"; CustomMapType.prototype.alt = "Tile Coordinate Map Type"; var CustomMapType = new CustomMapType(); function centerMap() { map.setCenter(new google.maps.LatLng(37.4419, 12.1419)); } function makeMarker(location, text) { var marker = new google.maps.Marker({ map: map, icon: image, position: location }); markers.push(marker); if (jQuery.browser.msie && jQuery.browser.version == "7.0") { text = "<div style='width:80px; height:20px;'>" + text + "</div>"; } var contentString = text; var infowindow = new google.maps.InfoWindow({ content: contentString }); google.maps.event.addListener(marker, 'mouseover', function() { infowindow.open(map, this); }); google.maps.event.addListener(marker, 'mouseout', function() { infowindow.close(map, this); }); } google.maps.event.addDomListener(window, 'load', init); 
 html, body, #map-canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map-canvas"></div> 
  • Google Maps no muestra la ruta
  • Mapa de Google que no muestra el modo de arranque
  • ¿Por qué la API de Google Maps no funciona en un server?
  • API de Google Places: devolución de numbers de calle no válidos
  • Autocompletar de Google Places: ¿elige el primer resultado en la tecla Entrar?
  • Javascript dibuja instrucciones cuando toma datos de json
  • ¿Cómo hacer un campo de dirección de autocomplete con la API de Google Maps?
  • Cuando un marcador se encuentra detrás de un cuadro de información abierto - Evento mouseover con el complemento de InfoBox Google Maps API v3
  • Google Maps API V3: subclass google.maps.Marker: cómo llamar a los methods principales?
  • Cómo get límites de latitud y longitud de Google Maps xy y parameters de zoom
  • ¿Cómo usar Google Maps sin una key? (de estático a dynamic con URL)
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.