I have a problem to set marker and get latitude and longitude for that marker. How can I do that in google maps v3 API
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("divGoogleMaps"), myOptions);
google.maps.event.addListener(map, 'click', function() {
});
this is my start code.
You should check Google Maps API doc web-site they have a fex example to help you started.
http://code.google.com/apis/maps/documentation/javascript/basics.html
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
Here you set a marker and get the position.
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
Taken directly from Google Maps API v3
If you want to attach an event listener to the marker, it is advisable to do it right after you add it to the map, while you still have a fresh reference to it (in the case where you're potentially looping through some marker adding code, as is common).
Related
I need to place a Google Map made using Javascript API within an iFrame so that I can perform operations on the map and then submit a form that I create below that takes values from the map, for example, the latitude and longitude. How can I make that happen?
<script>
var map;
var circle=null;
myLatlng = {lat: 28.713956, lng: 77.006653};
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: myLatlng,
zoom: 13
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Click to zoom'
});
google.maps.event.addListener(map, 'click', function (event) {
document.getElementById("lat").value = event.latLng.lat();
document.getElementById("long").value = event.latLng.lng();
marker.setPosition(event.latLng);
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=<my-API-key>&callback=initMap"></script>
Also, I need to process the data coming from the map, so I don't want to use Google Maps Embed API. I know it can be placed in an iFrame using it. I have tried doing that but that is not what I need.
I've got an application that runs an instance of the Google Maps API in a JavaFX WebView, and am trying to allow the user to move the map marker around.
I've tried the following:
google.maps.event.addListener(map, 'click', function(event) {
marker.setPosition(event.latLng);
}
As well as:
google.maps.event.addListener(map, 'click', function(event) {
marker.setMap(null);
marker = null;
marker = new google.maps.Marker({
position:event.latLng,
map: map
});
}
Both of these implementations create the same issue: Clicking on the map creates a marker at the new position, but the old position marker remains on the screen as well. Moving the map around and forcing the section with the old marker to reload removes that marker, leading me to believe this is not an issue of implementation but a bug in the web browser's handling of it. Any way to fix this, so that there isn't a duplicate marker left behind?
I think this is a matter of code implementation. Try this. Tested this on jsfiddle and it's working perfectly.
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -25.363882, lng: 131.044922 }
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
draggable: true,
});
google.maps.event.addListener(map, 'click', function(e) {
updateMarkerPosition(marker,e);
});
}
function updateMarkerPosition(marker, e){
marker.setPosition(e.latLng);
}
If this seamless execution is not reflected in your JavaFX application, then it's not Google Maps API that has the problem.
I enter the coordinates of antwerp in my JavaScript code to place a marker on the map , but when I test it in my browser it places a marker in the middle of the map and if I zoom in it becomes more accurate until the marker is at the right place ... what am I doing wrong ??
The marker is not at the right place when zoomed out but it is when I zoom in. thanks in advance!
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(51.2239721,4.413785),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var myLatlng = new google.maps.LatLng(51.2239721,4.413785);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"ap hogeschool"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
You can use google map latlngBounds as the code below will do that. u may need to read this
here
var locBounds = new google.maps.LatLngBounds();
locBounds.extend(LatLng1);
locBounds.extend(latlng2);
map.fitBounds(locBounds);
I am adding a google map to my site, and i've added exactly the same code as from the google maps api documentation but my map appears as a static map without marker (with the correct center point which is a good start) instead of a dynamic draggable map with marker and controllers.
Any ideas what I'm doing wrong? Code is below although I'm fairly sure the code is fine since it's straight from the google maps api site.
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I have created a google map using "maps.googleapis.com/maps/api/js?v=3". In that map I am showing markers for different locations, which is working fine. Below is the code which i have used.
google.maps.event.addDomListener(window, 'load', function() {
var map = new google.maps.Map(document.getElementById('map1'), {
zoom: 10,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(23.42323, -45.47653),
});
});
Now I want to add some more location markers in Ajax. For ex: I will add the location name from a dropdown, it will do an ajax call to the server side. Pull out the location latitude and longitude and will show in the map. How can i achieve it.
I have written a separate js function to do the ajax call, but inside that the code is not getting 'map' instance.Here I have used only this code
new google.maps.Marker({
map: map,
position: new google.maps.LatLng(23.42323, -45.47653),
});
Here I am not initializing the map again. So its not getting the map instance and throwing error. How to fix it.
The scope of your map is limited to inside your event handle. Try this:
var map, markerCollection;
google.maps.event.addDomListener(window, 'load', function() {
map = new google.maps.Map(document.getElementById('map1'), {
zoom: 10,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
function addMarker(lat, lng){
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lat, lng),
});
markerCollection.push(marker);
}
NOTES:
1) Be to fill in the values for "latitude" and "longitude" when defining the center of your map. Otherwise you just would get a map displayed.
2) I know it might not be the best practice to add your markers into an array but I find this makes than easy to access latter.
Since map is not a global variable it is getting dereferenced. Make the map object either global or within a container function that stores all of your code.
Global JS example
//now it's global
var map;
google.maps.event.addDomListener(window, 'load', function () {
map = new google.maps.Map(document.getElementById('map1'), {
zoom: 10,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(23.42323, -45.47653),
});
});