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());
});
}
Related
I am trying to put two separate markers on two separate maps that are positioned side by side on my website.
<script type="text/javascript">
var map, map2;
function initialize(condition) {
// create the maps
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(35.594700, -105.221787),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myOptions1 = {
zoom: 14,
center: new google.maps.LatLng(35.104441, -106.575394),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map2 = new google.maps.Map(document.getElementById("map_canvas2"),
myOptions1);
}
</script>
You can create a simple maker for this.
Just place this in your code after map = new Google.maps.Map(document.getElementById("map_canvas"), myOptions);:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.594700, -105.221787),
map: map,
title: 'Marker 1'
});
And after map2 = new google.maps.Map(document.getElementById("map_canvas2"),
myOptions1);:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.104441, -106.575394),
map: map2,
title: 'Marker 2'
});
Example
Your code should look like this:
<script type="text/javascript">
var map, map2;
function initialize(condition) {
// create the maps
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(35.594700, -105.221787),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.594700, -105.221787),
map: map,
title: 'Marker 1'
});
var myOptions1 = {
zoom: 14,
center: new google.maps.LatLng(35.104441, -106.575394),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map2 = new google.maps.Map(document.getElementById("map_canvas2"),
myOptions1);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.104441, -106.575394),
map: map2,
title: 'Marker 2'
});
}
</script>
That code by itself will not put any markers on the map, it will simply render the maps, with each one centred on the latitude/longitude you specify.
Look at the first example on https://developers.google.com/maps/documentation/javascript/markers for an idea of how to add a marker to each of your maps.
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>
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
var icon = {
url: pointer.png,
size: new google.maps.Size(48,48),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(24,24)
};
var marker = new google.maps.Marker({
position: pos,
map: map,
icon: icon
});
Is it possible to add second image to the marker? I'd like to have double marker for same point, 1 overlaid on top of the other.
I want to have little flag of country next to marker.
Possible?
Prior to the API v3.14, you hack this with a icon and a shadow image file together on the same marker.
Here's how I would solve it with v3.14+
function initialize() {
google.maps.visualRefresh = true;
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(0, 0),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(0, 0),
map: map
});
// CREDIT: https://developers.google.com/maps/documentation/javascript/markers
marker.flag = new google.maps.Marker({
icon: {
url: 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png',
anchor: new google.maps.Point(32, 32)
}
});
marker.flag.bindTo('position', marker);
marker.flag.bindTo('map', marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
See: http://jsfiddle.net/stevejansen/J5swt/
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.