Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

192
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda