I'm trying to get a general location of the user, reasons irrelevant, but I can't use the API to get their location. I've tried to parse the data associated with the IP, but if I have the $.getJson() outside of the initMap() function, the variables aren't changed and if inside initMap(), initMap() isn't recognised as a function.
tl:dr - how do I call the $.getJSON from inside the initMap() function?
Here's What I've tried:
<div id="map" style="width: 100%; height: 100%;; "></div>
<!-- G-Maps box-sizing: border-box; -->
<script>
var usrLat = 0;
var usrLon = 0;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
$.getJSON("https://freegeoip.net/json/", function (data) {
usrLat = parseFloat(data.latitude);
usrLon = parseFloat(data.longitude);
console.log(usrLon + ", " + usrLat);
});
center: {lat: usrLat, lng: usrLon},
mapTypeControl: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: ['roadmap', 'terrain']
}
});
}
</script>
Your issue is the position of your call (inside the data structure), plus the semicolon on the end of the call.
Try this instead
<div id="map" style="width: 100%; height: 100%;; "></div>
<!-- G-Maps box-sizing: border-box; -->
<script>
var usrLat = 0;
var usrLon = 0;
function initMap() {
$.getJSON("https://freegeoip.net/json/", function (data) {
usrLat = parseFloat(data.latitude);
usrLon = parseFloat(data.longitude);
console.log(usrLon + ", " + usrLat);
});
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: usrLat, lng: usrLon},
mapTypeControl: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: ['roadmap', 'terrain']
}
});
}
</script>
Sorted it out. Thanks to Phil and GeoCodeZip for the help
<script>
var usrLat = 0;
var usrLon = 0;
$.getJSON("https://freegeoip.net/json/", function (data) {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: parseFloat(data.latitude), lng: parseFloat(data.longitude)},
mapTypeControl: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: ['roadmap', 'terrain']
}
});
});
</script>
Related
Html
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
js
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
css (not necessary)
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
I want to move the satellite-map buttons on the upper left corner of this simple example google maps code to the upper right corner, but I can not figure out how to do it.
Could you help me?
I think you want "mapTypeControlOptions" and set the "position"
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: -34.397, lng: 150.644},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
}
});
}
See: https://developers.google.com/maps/documentation/javascript/controls
I am working on marking a Google Map dynamically, I can initiate the map in a layout.hbs
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key={{google_browser_key}}"></script>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(55.6810038, 12.6033823),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
zoomControl: false
});
</script>
But I don't wish to broadcast my API key to the world, is it possible to setup a callback to the app.js, where you connect each document with the maps.googleapis.com?
I tried to use the router, but I am missing document or window variables:
app.use(function (req, res, next) {
res.locals.title = req.Globalize.formatMessage('strings/title');
res.locals.google_browser_key = "";
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(55.6810038, 12.6033823),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
zoomControl: false
});
next();
});
This is my current code
var myOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 2,
minZoom: 4,
maxZoom: 100,
streetViewControl: false,
scaleControl: false,
mapTypeControl: false,
mapTypeControlOptions: {
mapTypeIds: ["custom"]
But as you can see, the controls stay.
I've tried ZoomControl: false, as well but that doesnt work either.
Any idea why?
Thanks
scaleControl:false is the default value, it controls the scaleControl. (scaleControl enables/disables the Scale control that provides a simple map scale. By default, this control is not visible. When enabled, it will always appear in the bottom right corner of the map.) If you want the defaultUI disabled, set disableDefaultUI: true.
If you are just worried about the zoomControl, you don't have any code to disable that (that would be zoomControl: false (not ZoomControl: false, javascript is case sensitive).
var myOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 2,
minZoom: 4,
maxZoom: 100,
zoomControl: false,
streetViewControl: false,
scaleControl: false, // this is the default value...
mapTypeControl: false,
mapTypeControlOptions: {
mapTypeIds: ["custom"]
I have the following initialization for a google map:
function initialize()
{
var mapOptions = {
zoom: 15,
center: myLatLng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
scaleControl: true,
scrollwheel: true,
disableDoubleClickZoom: true,
};
var map = new google.maps.Map(document.getElementById("googleMap"),
mapOptions);
}
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
google.maps.event.addDomListener(window, "load", initialize);
};
When trying to add the marker, I get the error:
Uncaught ReferenceError: map is not defined
How can I see this map or add a marker properly to the map?
seems you don't have a proper myLatLng position for your marker try adding one eg: myLatLng = new google.maps.LatLng(45.00, 10.00);
function initialize()
{
var mapOptions = {
zoom: 15,
center: myLatLng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
scaleControl: true,
scrollwheel: true,
disableDoubleClickZoom: true,
};
var map = new google.maps.Map(document.getElementById("googleMap"),
mapOptions);
}
var myLatLng = new google.maps.LatLng(45.00, 10.00);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
google.maps.event.addDomListener(window, "load", initialize);
};
Code that by some unexpected reason changes scale:
map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
Map is set with code:
try {
var lat = (app.problem.latitude) ? app.problem.latitude : -27.479624,
lon = (app.problem.longitude) ? app.problem.longitude : 153.033654,
coords = new google.maps.LatLng(lat, lon);
// map options
var options = {
center: coords,
disableDefaultUI: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_CENTER
},
// mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 18
};
this.map = new google.maps.Map(this.el, options);
this.marker = new google.maps.Marker({
position: coords,
draggable: false,
animation: google.maps.Animation.DROP,
});
this.marker.setMap(this.map);
// this.map.setCenter(coords);
} catch(e){
console.error('location problem:', e.message);
}