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!
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},.
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.
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.