I am trying to use google maps API but keep getting a grayed out box instead of a map:
My javascript:
var myLatLng = {lat: -86.408, lng: 43.077};
var map = new google.maps.Map(document.getElementById('postmap'), {
zoom: 16,
center: myLatLng,
disableDefaultUI: true
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
}
This is what I get:
The weird part is some cooridents work and some don't... for example 0 latitude and 0 longitude renders a map.
The weird part is some cooridents work and some don't
some latitudes are valid, and some not.
The valid range for latitudes is about -85 to 85
Set the zoom to 0 and you'll see that your marker is outside of the map(earth)
function initialize() {
var myLatLng = {lat: -86.408, lng: 43.077};
var map = new google.maps.Map(document.getElementById('postmap'), {
zoom: 0,
center: myLatLng,
disableDefaultUI: true
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,body,#postmap{height:100%;margin:0;padding:0}
<div id="postmap"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
Related
I have a scenario where I need to show the source and destination with two markers and a blue line that indicates directions. I am using cordava plugin geolocation and trying to get the current location like below
$cordovaGeolocation.getCurrentPosition(options).then(function(position){
var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
google.maps.event.addListenerOnce($scope.map, 'idle', function(){
var marker = new google.maps.Marker({
map: $scope.map,
animation: google.maps.Animation.DROP,
position: latLng
});
I also have destination lat and long but I dnt understand how to place them in the code to show two markers and where to show blue connecting line
as
var marker = new google.maps.Marker({
map: $scope.map,
animation: google.maps.Animation.DROP,
position: latLng
});
takes only an object
Any help would be appreciated.
What i did-
addMarker(position, icon, content) {
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
icon: icon,
position: new google.maps.LatLng(position[0], position[1])
});
}
And then
array.projectsLocation.forEach(element => {
this.addMarker([element.latitude, element.longitude], element.map_pin_url, element.description);
});
I was using custom icons so you can ignore that.
Check documentation.
I wrote a script to add maps to my website. It is as follows:
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(12.9583182, 77.6398512),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
HTML code:
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map">
</div>
css:
#map{
width: 500px;
height: 400px;
}
I added this code for pin pointing a location:
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
//give latitude and long
var myLatlng = new google.maps.LatLng("12.9583182", "77.6398512");
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Bangalore"
});
But when I used that code, map on my page disappeared. How can I make it to work?
You are creating map two time on same div that's why its happening just change your code as below:
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(12.9583182, 77.6398512),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var myLatlng = new google.maps.LatLng("12.9583182", "77.6398512");
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Bangalore"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
there is no need to add var map = new google.maps.Map(mapCanvas, mapOptions);
second time
I have been struggling to get the below code to work. The aim of the code is to be able to Geolocate the person if they allow geolocation, then when the marker is placed be able to get the Lat and Lng of the marker as it is being dragged around.
Currently the map displays fine and the marker is geolocated in the correct place. But when you begin to drag it, no Lat and Lng is passed to updateMarkerPosition.
The error which I am getting in my chrome console is: *Uncaught TypeError: Cannot read property '_e3' of undefined*
Here is the script I am using, also displaying the files which I include to the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=true"></script>
function initialize() {
var mapOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('mapCanvas'),
mapOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
// Geolocation found
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var marker = new google.maps.Marker({
position: pos,
title: 'Your Location',
map: map,
draggable: true
});
map.setCenter(pos);
}, function() {
// User has cancelled and not let the browser find them using geolocation
var pos = new google.maps.LatLng(-34.397, 150.644);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: pos,
title: 'Point A',
map: map,
draggable: true
});
});
} else {
// Browser doesn't support Geolocation
var pos = new google.maps.LatLng(-34.397, 150.644);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: pos,
title: 'Point A',
map: map,
draggable: true
});
}
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerPosition(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Code for updateMarkerPosition. This just updated two form elements on the page which display the Lat and Lng:
function updateMarkerPosition(pos) {
$('#posLat').val(pos.lat());
$('#posLong').val(pos.lng());
}
geolocation is asynchronous. The marker is not defined until the callback runs. You need to assign the listener inside the callback function (where the marker is created).
// Try HTML5 geolocation
if(navigator.geolocation) {
// Geolocation found
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var marker = new google.maps.Marker({
position: pos,
title: 'Your Location',
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerPosition(marker.getPosition());
});
map.setCenter(pos);
}, function() {
// User has cancelled and not let the browser find them using geolocation
var pos = new google.maps.LatLng(-34.397, 150.644);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: pos,
title: 'Point A',
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerPosition(marker.getPosition());
});
});
} else {
// Browser doesn't support Geolocation
var pos = new google.maps.LatLng(-34.397, 150.644);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: pos,
title: 'Point A',
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerPosition(marker.getPosition());
});
}
I am using this google maps script code and it has no problems but I need to add a marker to it.
There's code that defined a marker but no marker seems to appear in the map.
Here is the code:
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(123456.-12345566);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Fast marker"
});
}
jQuery(document).ready(initialize);
</script>
How would I add a marker to it?
Neither coordinates (one for map, one for marker) are properly defined
This page will give you LatLng coordinates for the spot you click on the map to customize and fill in the values below.
//map center
var latlng = new google.maps.LatLng(12,-12); // <-- this one
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// HERE ALSO
var myLatlng = new google.maps.LatLng(12,-12); // <-- this one for the marker
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
The code is fine. It will add a pointer to a map.
Couple of things:
Do you have a Google API key? (https://developers.google.com/maps/documentation/javascript/tutorial#api_key)
The coordinates you gave are no where. Try using -123456. 12345566 as a test.
I'm using this code:
<script type='text/javascript'>
function initialize() {
var latlng = new google.maps.LatLng(50.077861,14.456956);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(\"searchMap\"),
myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Here we are!'
});
}
</script>
But now I need to show multiple markers on the map, and the markers should include links to subpages of the website, any ideas how to menage that width the code I posted?
Thanks, Mike.