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> 
  • ¿Por qué el tutorial de google maps no funciona en mi pc?
  • Autocompletado de JavaScript de Google Places: ¿puedo eliminar el país del nombre del lugar?
  • Google Maps Agregue un Marcador a Mapa, luego Almacene Latitud y Longitud en Ruby on Rails
  • Múltiples círculos -> ¿Un polígono?
  • El contenedor de Google Maps no cambia de tamaño correctamente después de la animation
  • ¿Cómo puedo stringify un object LatLng de google?
  • Google maps marcadores múltiples con múltiples cuadros de información únicos
  • Agregue dinámicamente marcadores de Google Map V3 con jQuery
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.