Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

184
Vistas
How can I change the starting location of Google Maps showed in my website?

I have a simple Website that displays a google map. My issue is that at the minute it starts in New York and I want it to start in Lond instead. How do I that?

In my HTML page I have

<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY;callback=initMap" async defer></script> `` And <div id="map" class="map height-400"></div> And I believe this is the java script it uses -

"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);
}

This whole API and process is very new to me and I appreciate if anyone has an answer! Ty!

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Center the map at the right place

You need to use a LatLng object to center the map at the right place. In fact you call a missing variable "London" for center the map. set a latLng of the London place in the center argument when you initialise the map. You can try something like this :

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]
    }
});

Replace just the line center: London, in your code by the line center: {lat: 51.517022, lng: -0.127011},.

Do not share your API key

I think is very IMPORTANT (very) to not release you're apiKey on stackoverflow or any other public places.

take care at the begining of your post ( at the line <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSy... the rest of your key ... callback=initMap" async defer>). Just replace the part coresponding to you're key by a mention like MY_API_KEY. I hope you have protected your key by specific domain.

Use the documentation

The documentation of the Javascript Google Map API is really a good start. Really accessible if you have some knowledge in js, i think you can find anything you want here.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda