Tengo un sitio web simple que muestra un mapa de Google. Mi problema es que en este momento comienza en Nueva York y quiero que comience en Londres. ¿Cómo hago eso?
En mi página HTML tengo
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY;callback=initMap" async defer></script> `` Y <div id="map" class="map height-400"></div> Y creo que este es el script Java que usa:
"use strict"; This is the gmap.js I am using which I believe picks the location. window.initMap = function() { var customMapType = new google.maps.StyledMapType([ { stylers: [ {'saturation': -100}, {'lightness': 50}, {'visibility': 'simplified'} ] }, { elementType: 'labels', stylers: [{visibility: 'on'}] }, { featureType: 'road', stylers: [{color: '#bbb'}] } ], { name: 'Dublin' }); var image = new google.maps.MarkerImage( 'img/widgets/gmap-pin.png', new google.maps.Size(48,54), new google.maps.Point(0,0), new google.maps.Point(24,54) ); var customMapTypeId = 'custom_style'; var brooklyn = {lat: 41.850, lng: -73.961}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 6, scrollwheel: false, streetViewControl: false, mapTypeControl: false, center: London, mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId] } }); var contentString = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h1 id="firstHeading" class="firstHeading">Brooklyn</h1>'+ '<div id="bodyContent">'+ '<p>277 Bedford Avenue, <br> Brooklyn, NY 11211, <br> New York, USA</p>'+ '</div>'+ '</div>'; var infowindow = new google.maps.InfoWindow({ content: contentString, maxWidth: 300 }); var marker = new google.maps.Marker({ map: map, clickable: true, icon: image, title: 'Brooklyn', position: brooklyn }); marker.addListener('click', function() { infowindow.open(map, marker); }); map.mapTypes.set(customMapTypeId, customMapType); map.setMapTypeId(customMapTypeId); }Toda esta API y el proceso son muy nuevos para mí y agradezco si alguien tiene una respuesta. Ty!
Debe usar un objeto LatLng para centrar el mapa en el lugar correcto. De hecho, llama a una variable faltante "Londres" para centrar el mapa. establezca un latLng del lugar de Londres en el argumento central cuando inicialice el mapa. Puedes intentar algo como esto:
var map = new google.maps.Map(document.getElementById('map'), { zoom: 6, scrollwheel: false, streetViewControl: false, mapTypeControl: false, center: {lat: 51.517022, lng: -0.127011}, mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId] } }); Reemplace solo el center: London, en su código por el center: {lat: 51.517022, lng: -0.127011}, .
Creo que es muy IMPORTANTE ( muy ) no publicar su apiKey en stackoverflow ni en ningún otro lugar público.
tenga cuidado al comienzo de su publicación (en la línea <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSy... the rest of your key ... callback=initMap" async defer> ). Simplemente reemplace la parte correspondiente a su clave por una mención como MY_API_KEY . Espero que hayas protegido tu clave por un dominio específico.
La documentación de la Javascript Google Map API es realmente un buen comienzo. Realmente accesible si tienes algún conocimiento en js, creo que puedes encontrar lo que quieras aquí.