I'm trying to create a Google Map that will display multiple geodesic lines originating from one marker to 2 or more separate markers on the map. I'm able to place my multiple markers on the map but I'm having problems figuring out how to have 2 or more paths go from one marker on the map. Currently this is how it's displaying
Here's my edited script for the map
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>
<script type="text/javascript">
var geodesicPoly1;
var geodesicPoly2;
var marker1;
var marker2;
var marker3;
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(39.0997, -94.5786),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
marker1 = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(33.7490, -84.3880)
});
marker2 = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(33.4484, -112.0740)
});
marker3 = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(37.9577, -121.2908)
});
var geodesicOptions = {
strokeColor: '#77bf44',
strokeOpacity: 1.0,
strokeWeight: 3,
geodesic: true,
map: map
};
geodesicPoly1 = new google.maps.Polyline(geodesicOptions);
update();
geodesicPoly2 = new google.maps.Polyline(geodesicOptions);
update2();
}
function update() {
var path = [marker1.getPosition(), marker2.getPosition()];
geodesicPoly1.setPath(path);
var heading = google.maps.geometry.spherical.computeHeading(path[0], path[1]);
document.getElementById('heading').value = heading;
document.getElementById('origin').value = path[0].toString();
document.getElementById('destination').value = path[1].toString();
}
function update2() {
var path = [marker1.getPosition(), marker3.getPosition()];
geodesicPoly2.setPath(path);
var heading = google.maps.geometry.spherical.computeHeading(path[0], path[1]);
document.getElementId('heading').value = heading;
document.getElementId('origin').value = path[0].toString();
document.getElementId('destination').value = path[1].toString();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
A Polyline can only draw between two points. You need to create more than one Polyline variable.
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>
<script type="text/javascript">
var geodesicPoly1;
var geodesicPoly2;
var marker1;
var marker2;
var marker3;
var heading = "cat";
var map;
function initialize()
{
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(39.0997, -94.5786),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
marker1 = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(33.7490, -84.3880)
});
marker2 = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(33.4484, -112.0740)
});
marker3 = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(37.9577, -121.2908)
});
var geodesicOptions = {
strokeColor: '#77bf44',
strokeOpacity: 1.0,
strokeWeight: 3,
geodesic: true,
map: map
};
geodesicPoly1 = new google.maps.Polyline(geodesicOptions);
geodesicPoly2 = new google.maps.Polyline(geodesicOptions);
update();
update2();
}
function update() {
var path = [marker1.getPosition(), marker2.getPosition()];
geodesicPoly1.setPath(path);
var heading = google.maps.geometry.spherical.computeHeading(path[0],
path[1]);
document.getElementById('heading').value = heading;
document.getElementById('origin').value = path[0].toString();
document.getElementById('destination').value = path[1].toString();
}
function update2() {
var path2 = [marker1.getPosition(), marker3.getPosition()];
geodesicPoly2.setPath(path2);
var heading2 = google.maps.geometry.spherical.computeHeading(path2[0],
path2[1]);
document.getElementById('heading').value = heading;
document.getElementById('origin').value = path2[0].toString();
document.getElementById('destination').value = path2[1].toString();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body >
<div id="map_canvas" style='height:500px; width:800px;'></div>
<div id='heading'></div>
<div id='origin'></div>
<div id='destination'></div>
</body>
</html>
Related
I use google map to show markers,
then I want to use polyline to link markers one by one.
but polyline doesn't showing.
my code as below:
$(document).ready(function (){
/*map initial*/
var mapOptions = {
...
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
/*draw markers*/
var tmp_user_location1 = new google.maps.LatLng(37.772,-122.214);
var tmp_marker1 = new google.maps.Marker({
position: tmp_user_location1,
map: map
});
var tmp_user_location2 = new google.maps.LatLng(21.291,-157.821);
var tmp_marker2 = new google.maps.Marker({
position: tmp_user_location2,
map: map
});
arr_markers.push(tmp_marker1);
arr_markers.push(tmp_marker2);
/*draw polyline*/
arr_user_location_polyline.push(tmp_user_location1);
arr_user_location_polyline.push(tmp_user_location2);
var user_location_path = new google.maps.Polyline({
paths: arr_user_location_polyline,
geodesic: true,
strokeColor: "#FF00FF",
strokeOpacity: 1.0,
strokeWeight: 2
});
user_location_path.setMap(map);
}
screen capture picture
any one help?
thanks a lot.
The issue with your code is that a google.maps.PolylineOptions object doesn't have a paths property (a google.maps.Polygon does), it has a path property.
var user_location_path = new google.maps.Polyline({
path: arr_user_location_polyline,
geodesic: true,
strokeColor: "#FF00FF",
strokeOpacity: 1.0,
strokeWeight: 2
});
If I fix that, and the javascript errors in the posted code:
Uncaught ReferenceError: arr_markers is not defined
Uncaught ReferenceError: arr_user_location_polyline is not defined
I get a polyline: proof of concept fiddle
code snippet:
$(document).ready(function() {
var arr_markers = [];
var arr_user_location_polyline = [];
/*map initial*/
var mapOptions = {
center: {
lat: 21.291,
lng: -157.821
},
zoom: 3
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
/*draw markers*/
var tmp_user_location1 = new google.maps.LatLng(37.772, -122.214);
var tmp_marker1 = new google.maps.Marker({
position: tmp_user_location1,
map: map
});
var tmp_user_location2 = new google.maps.LatLng(21.291, -157.821);
var tmp_marker2 = new google.maps.Marker({
position: tmp_user_location2,
map: map
});
arr_markers.push(tmp_marker1);
arr_markers.push(tmp_marker2);
/*draw polyline*/
arr_user_location_polyline.push(tmp_user_location1);
arr_user_location_polyline.push(tmp_user_location2);
var user_location_path = new google.maps.Polyline({
path: arr_user_location_polyline,
geodesic: true,
strokeColor: "#FF00FF",
strokeOpacity: 1.0,
strokeWeight: 2
});
user_location_path.setMap(map);
});
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
Below is my javascript code to display one marker point on google maps.
How can I display two marker points instead?
window.onload = function () {
'use strict';
var latlng = new google.maps.LatLng(17.497859,78.391293);
var styles = [];
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
scrollwheel: false
};
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h4>We Are Here</h4>'+
'<p>test'</p>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var map = new google.maps.Map(document.getElementById('map'), myOptions);
var myLatlng = new google.maps.LatLng(17.497859,78.391293);
var image = '../images/marker.png';
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!',
icon: image
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
Just add new instance of google.maps.Marker with its own position, title and infowindow and assign that to your map with map attribute or setMap(map) method of Marker object.
Just like next
var infowindow1 = new google.maps.InfoWindow({
content: contentString
});
var infowindow2 = new google.maps.InfoWindow({
content: contentString
});
var myLatlng1 = new google.maps.LatLng(17.497859,78.391293);
var myLatlng2 = new google.maps.LatLng(17.497859,78.391293);
var image = '../images/marker.png';
var marker1 = new google.maps.Marker({
position: myLatlng1,
map: map,
title: 'Hello World!',
icon: image
});
var marker2 = new google.maps.Marker({
position: myLatlng2,
map: map,
title: 'Hello World!',
icon: image
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.open(map,marker1);
});
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map,marker2);
});
<script type="text/javascript">
var locations = [
['ModelTown Lahore', 31.484665, 74.326204, 4],
['TownShip Lahore', 31.451794, 74.306549, 5],
['GreenTown Lahore', 31.435684, 74.304661, 3],
['Mughalpura Lahore', 31.573261, 74.363712, 2],
['WapdaTown Lahore', 31.425724, 74.266895, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: new google.maps.LatLng(31.435684, 74.304661),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
animation: google.maps.Animation.BOUNCE,
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
Please use the following code to plot any number of markers ;-)
`<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Google Map</title>
<style>
#map{
height: 600px;
width: 100%;
}
</style>
</head>
<body>
<h1>My Google Map`</h1>
<div id="map"></div>
<script>
function initMap(){
//Map options
var options = {
zoom:9,
center:{lat:42.3601, lng:-71.0589}
}
// new map
var map = new google.maps.Map(document.getElementById('map'), options);
// customer marker
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png';
//array of Marrkeers
var markers = [
{
coords:{lat: 42.4668, lng: -70.9495},img:iconBase,con:'<h3> This Is your Content <h3>'
},
{
coords:{lat: 42.8584, lng: -70.9300},img:iconBase,con:'<h3> This Is your Content <h3>'
},
{
coords:{lat: 42.7762, lng: -71.0773},img:iconBase,con:'<h3> This Is your Content <h3>'
}
];
//loopthrough markers
for(var i = 0; i <markers.length; i++){
//add markeers
addMarker(markers[i]);
}
//function for the plotting markers on the map
function addMarker (props){
var marker = new google.maps.Marker({
position: props.coords,
map:map,
icon:props.img
});
var infoWindow = new google.maps.InfoWindow({
content:props.con,
});
marker.addListener("click", () => {
infoWindow.open(map, marker);
});
}
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAVR9eQglFrAKCpuSWlnCV9Ao9QXEwJJCA&callback=initMap"
defer
></script>
</body>
</html>
`
I am using google maps js to show Map and load the markers on it . It was working fine . But suddenly got following error
"InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama"
Here is the code i am using
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document ).ready(function(){
var lax;
var lox;
var zlevel = Math.round(14-Math.log(20)/Math.LN2);
var userLatLng = new google.maps.LatLng(lax, lox);
var myOptions = {
zoom : zlevel ,
center : userLatLng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// Draw the map
var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
var userLatLng = new google.maps.LatLng(lat1, lon1);
var marker = new google.maps.Marker({
map: mapObject,
icon: './images/icons/regular.png',
position: userLatLng,
title:name,
url: './index.php',
});
var userLatLng = new google.maps.LatLng(lat2, lon2);
var marker = new google.maps.Marker({
map: mapObject,
icon: './images/icons/regular.png',
position: userLatLng,
title:name,
url: './index.php',
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url; //changed from markers[i] to this[i]
});
marker.setMap(map);
});
<div id="map"></div>
Can anybody hemlp me what is the issue ? what is the fix ?
Thanks
remove this line:
marker.setMap(map);
map is not a google.maps.Map (it's the div )
You don't need this line at all, because the map-property of marker already has been set.
What you need are the variables(lat,lox,lat1,lon1,lat2,lon2), without them you will not get the map and the markers
use this way:-
$(document).ready(function(){
var gtpCoOrdsGTP = new google.maps.LatLng(12.97283,77.72024);
var mapPropGTP = {
center:gtpCoOrdsGTP,
zoom:18,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var mapGTP=new google.maps.Map(document.getElementById("googleMapGTP"),mapPropGTP);
var markerGTP = new google.maps.Marker({
position: gtpCoOrdsGTP,
map: mapGTP,
title: "my title"
});
});
In your code, you initialized map as below:
// Draw the map
var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
And you set map in marker as below
marker.setMap(map);
It should be
marker.setMap(mapObject);
below code will work perfaclty.
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBrzfgGntjIVECT_T8yHY5kf3dwH6ltz6c"></script>
<script type="text/javascript">
$(document ).ready(function(){
var lax;
var lox;
var zlevel = Math.round(14-Math.log(20)/Math.LN2);
var userLatLng = new google.maps.LatLng(lax, lox);
var myOptions = {
zoom : zlevel ,
center : userLatLng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// Draw the map
var mapObject = new google.maps.Map(document.getElementById("myMap"), myOptions);
var userLatLng = new google.maps.LatLng(23.022505, 72.571362);
var marker = new google.maps.Marker({
map: mapObject,
icon: 'https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2.png',
position: userLatLng,
title:"one",
url: './index.php',
});
var userLatLng = new google.maps.LatLng(21.170240, 72.831061);
var marker = new google.maps.Marker({ map: mapObject,
icon: 'https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2.png',
position: userLatLng,
title:"two",
url: './index.php',
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url; //changed from markers[i] to this[i]
});
marker.setMap(mapObject);
});
</script>
</head>
<body>
<div id="myMap" style="height:400px;width:400px">
</div>
</body>
</html>
I'm implementing to display the shapes from the set of coordinates around the markers. Here is my html and js code but seems to be not working and I'hv missed some thing in this. Please help me to solve this.
And also how to get the below coordinates from the same XML file and create array to draw shapes and makes it center.
var myLatLng = new google.maps.LatLng(17.74033553, 83.25067267);
var triangleCoords = [
new google.maps.LatLng(17.74033553, 83.25067267),
new google.maps.LatLng(17.73254774, 83.29195094),
new google.maps.LatLng(17.73995296, 83.25317370),
new google.maps.LatLng(17.73985100, 83.25417283),
new google.maps.LatLng(17.73420624, 83.29552820),
new google.maps.LatLng(17.74752536, 83.24668705)
];
Html Code :
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/en/js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/en/js/markers.js">
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="map">
</div>
<input type="button" id="showmarkers" value="Show Markers" />
</form>
</body>
</html>
js Code to display markers and shapes arround.
$(document).ready(function () {
$("#map").css({
height: 500,
width: 600
});
var myLatLng = new google.maps.LatLng(17.74033553, 83.25067267);
MYMAP.init('#map', myLatLng, 11);
$("#showmarkers").click(function (e) {
MYMAP.placeMarkers('markers.xml');
});
});
var MYMAP = {
map: null,
bounds: null
}
MYMAP.init = function (selector, latLng, zoom) {
var myOptions = {
zoom: zoom,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map($(selector)[0], myOptions);
this.bounds = new google.maps.LatLngBounds();
}
MYMAP.placeMarkers = function (filename) {
$.get(filename, function (xml) {
$(xml).find("marker").each(function () {
var name = $(this).find('name').text();
var address = $(this).find('address').text();
// create a new LatLng point for the marker
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var point = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
// extend the bounds to include the new point
MYMAP.bounds.extend(point);
var triangleCoords = [
new google.maps.LatLng(17.74033553, 83.25067267),
new google.maps.LatLng(17.73254774, 83.29195094),
new google.maps.LatLng(17.73995296, 83.25317370),
new google.maps.LatLng(17.73985100, 83.25417283),
new google.maps.LatLng(17.73420624, 83.29552820),
new google.maps.LatLng(17.74752536, 83.24668705)
];
// Construct the polygon
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
var marker = new google.maps.Marker({
position: point,
map: MYMAP.map
});
var infoWindow = new google.maps.InfoWindow();
var html = '<strong>' + name + '</strong.><br />' + address;
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(html);
infoWindow.open(MYMAP.map, marker);
});
MYMAP.map.fitBounds(MYMAP.bounds);
});
});
}
XMl file
<markers>
<marker>
<name>VODAFONE</name>
<address>near Ghumaghumalu Restaurant, Marripalem, Visakhapatnam</address>
<lat>17.74033553</lat>
<lng>83.25067267</lng>
</marker>
<marker>
<name>VODAFONE</name>
<address>near Viswa Teja School, Thatichetlapalem, Visakhapatnam</address>
<lat>17.73254774</lat>
<lng>83.29195094</lng>
</marker>
<marker>
<name>VODAFONE</name>
<address>near Masjid, Marripalem, Visakhapatnam</address>
<lat>17.73995296</lat>
<lng>83.25317370</lng>
</marker>
<marker>
<name>VODAFONE</name>
<address>near Masjid, Sai Nagar, Visakhapatnam</address>
<lat>17.73985100</lat>
<lng>83.25417283</lng>
</marker>
<marker>
<name>VODAFONE</name>
<address>near Sai Baba Temple, Akkayya Palem, Visakhapatnam</address>
<lat>17.73420624</lat>
<lng>83.29552820</lng>
</marker>
<marker>
<name>VODAFONE</name>
<address>near Geological Survey of India, R & B, Visakhapatnam</address>
<lat>17.74752536</lat>
<lng>83.24668705</lng>
</marker>
</markers>
----------- Below is the Working js code to just display markers but the above js file is to display markers and polygon shape.
$(document).ready(function() {
$("#map").css({
height: 500,
width: 600
});
var myLatLng = new google.maps.LatLng(17.74033553, 83.25067267);
MYMAP.init('#map', myLatLng, 11);
$("#showmarkers").click(function(e){
MYMAP.placeMarkers('markers.xml');
});
});
var MYMAP = {
map: null,
bounds: null
}
MYMAP.init = function(selector, latLng, zoom) {
var myOptions = {
zoom:zoom,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map($(selector)[0], myOptions);
this.bounds = new google.maps.LatLngBounds();
}
MYMAP.placeMarkers = function(filename) {
$.get(filename, function(xml){
$(xml).find("marker").each(function(){
var name = $(this).find('name').text();
var address = $(this).find('address').text();
// create a new LatLng point for the marker
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
// extend the bounds to include the new point
MYMAP.bounds.extend(point);
var marker = new google.maps.Marker({
position: point,
map: MYMAP.map
});
var infoWindow = new google.maps.InfoWindow();
var html='<strong>'+name+'</strong.><br />'+address;
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(MYMAP.map, marker);
});
MYMAP.map.fitBounds(MYMAP.bounds);
});
});
}
The error occurs here:
bermudaTriangle.setMap(map);
A variable map isn't defined somewhere, so the browser uses(when available) an element with the ID "map" as map-variable instead(unfortunately most browsers did implement this bad behaviour introduced by IE). The result is an error because setMap expects as argument a google.maps.Map-instance, not a DOMNode .
the line should be:
bermudaTriangle.setMap(MYMAP.map);
....and your script will work.
Just a noob trying to learn, I came out with a problem that when I try to create marker with click event, drag and dragend event listeners won't work. Whereas when created by default these work.
Here is what I have tried so far.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(22,79);
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Default Marker',
draggable:true
});
google.maps.event.addListener(map,'click',function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map,
title: 'Click Generated Marker',
draggable:true
});
}
);
google.maps.event.addListener(
marker,
'drag',
function(event) {
document.getElementById('lat').value = this.position.lat();
document.getElementById('lng').value = this.position.lng();
//alert('drag');
});
google.maps.event.addListener(marker,'dragend',function(event) {
document.getElementById('lat').value = this.position.lat();
document.getElementById('lng').value = this.position.lng();
alert('Drag end');
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500px;height:500px;"></div>
Lat: <input type="text" id="lat"><br>
Lng: <input type="text" id="lng">
</body></html>
What you probably want to do is change the reference in your event listeners, from this to the event itself.
Then you need to add separate event listeners for your new marker at the same time as you create it. I'd suggest simply having one function which takes input arguments for the latlng, title, and anything else you need. And it then creates the marker and any event listeners required.
function initialize() {
var myLatlng = new google.maps.LatLng(22,79);
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
addMarker(myLatlng, 'Default Marker', map);
map.addListener('click',function(event) {
addMarker(event.latLng, 'Click Generated Marker', map);
);
}
function handleEvent(event) {
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();
}
function addMarker(latlng,title,map) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title,
draggable:true
});
marker.addListener('drag', handleEvent);
marker.addListener('dragend', handleEvent);
}
var marker = new google.maps.Marker({
position: latlng,
map: map,
zoom:25,
title: title,
draggable:true,
});
var infowindow = new google.maps.InfoWindow({
content: info
});
infowindow.open(map,marker);
google.maps.event.addListener(marker,'drag',function(event) {
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + event.latLng.lat() + '<br>Longitude: ' + event.latLng.lng()
});
infowindow.open(map,marker);
});
google.maps.event.addListener(marker,'dragend',function(event)
{
document.getElementById('lat').value =event.latLng.lat();
document.getElementById('lng').value =event.latLng.lng();
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + event.latLng.lat() + '<br>Longitude:'+`event.latLng.lng()
});
infowindow.open(map,marker);
});
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
draggable:true,
map: map
});
map.setCenter(location);
}
Try creating the marker like this .