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.
Related
I have map which was set up on server and based on google map. To embeded it to my webpage I used iframe. Now i need to get lat and long on click to map and than write data to my db. How can i get it?
Here is my iframe
<iframe src="https://my_domain/projects/?first=7&second=123&third=567" width="100%" height="350px" align="left" id="inneriframe" scrolling="no"></iframe>
Here is no initialize or else function that usualy i use for google map, thats why can not get it by functions.
You can initialize the map on window.load and get the value using event addListener.
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(24.18061975930,79.36565089010);
var myOptions = {
zoom:7,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("gmap"), myOptions);
// marker refers to a global variable
marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.addListener(map, "click", function(event) {
// get lat/lon of click
var clickLat = event.latLng.lat();
var clickLon = event.latLng.lng();
alert(clickLat.toFixed(5));
alert(clickLon.toFixed(5));
var marker = new google.maps.Marker({
position: new google.maps.LatLng(clickLat,clickLon),
map: map
});
});
}
window.onload = function () { initialize() };
I am testing Google Maps API and the code who's coming from the doc not working for me, as the marker is not displayed while I have no problem with the map.
function initMap() {
var place = {lat: 48.1389729, lng: -1.935302};
var map = new google.maps.Map(document.getElementById('maps'), {
zoom: 10,
center: place
});
var marker = new google.maps.Marker({
position: place,
map: map,
visible:true,
title: "Hi There",
});
}
The function is created before calling the API with the callback.
What I am missing ?
Add in HTML after you script
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
This question already has an answer here:
how to get lat long from google map when our own geojson layer is there?
(1 answer)
Closed 5 years ago.
I dont have experience with google maps. Im loading a geojson in a map, and I have a listener on the click event to place a marker. The problem is it works when i click outside the region, but not inside.
var map;
function initMap() {
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: {lat: 41.8708, lng: -87.6505},
zoom: 14
}
var map = new google.maps.Map(mapCanvas, mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(map, event.latLng);
});
// map.data.loadGeoJson('https://gist.githubusercontent.com/cgansen/6458644/raw/5a9ec31defab0073853831b7fc7de0f87eb66a2d/wards-from-city-unsimplified.geojson');
map.data.loadGeoJson('https://data.cityofchicago.org/api/geospatial/cauq-8yn6?method=export&format=GeoJSON');
var myLatLng = {lat: 41.8708, lng: -87.6505};
//Illinois University Marker
var image = 'js/i1.png';
var Umarker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Department of Computer Science – University of Illinois!',
icon: image
});
}
function placeMarker(map, location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
So, I changed your code around a little - but the secret sauce you're looking for is the following:
// Add the click event to the new polygon layer as well as the map itself.
map.data.addListener('click', function(event) {
placeMarker(map, event.latLng)
});
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(map, event.latLng);
});
JSFiddle here: http://jsfiddle.net/cguju62a/
Good luck!
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 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).