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>
`
Related
I got an existing map on my page with markers generated by PHP from a database. Works fine. Now I would like to add a new marker in this map.
I can't get it working:
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(53.2193835,6.5665018),
zoom: 10,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("geo.php?gmt=<? echo $stringGMT;?>&cat=<? echo $stringAAN;?>&abo=<? echo $stringABO;?>", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
var markersskg=[];
create markers code: working
var icon = customIcons["bar"] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
function addmarker(lat,lon) {
var myLatLng = {lat: lat, lng: lon};
var marker;
//create a marker
marker = new google.maps.Marker({
position: myLatLng,
map: map,
draggable: true
});
}
and the onclick to call:
<div id="map" style="width: 100%; height: 600px"></div>
<button id="button" onClick="addmarker(53.0241066,6.571086);">Drop Markers</button>
You declare var map in load function and then is not visible in addMarker function
try declaring var map in global scope
var map ;
var customIcons = {
skg: {
icon: 'http://mywebsite.nl/img/logo_transparant24.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(53.2193835,6.5665018),
zoom: 10,
mapTypeId: 'roadmap'
});
I have a map where there can be n number of marker plotted on the google map, when the user draw the polygon on the map I need to know the makers plotted inside the polygon.
I tried to draw the polygon on the map which is as shown below
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"> </script>
<style>
html,body{height:100%;margin:0}
#map_canvas{height:90%;}
</style>
<script>
function initialize() {
var myLatLng = {lat: 52.5498783, lng: 13.425209099999961};
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(52.5498783, 13.425209099999961),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
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(map.getDiv(),'mousedown',function(e){
//do it with the right mouse-button only
if(e.button!=2)return;
//the polygon
poly=new google.maps.Polyline({map:map,clickable:false});
//move-listener
var move=google.maps.event.addListener(map,'mousemove',function(e){
poly.getPath().push(e.latLng);
});
//mouseup-listener
google.maps.event.addListenerOnce(map,'mouseup',function(e){
google.maps.event.removeListener(move);
var path=poly.getPath();
poly.setMap(null);
poly=new google.maps.Polygon({map:map,path:path});
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
Use the right mouse-button to draw an overlay<br/>
<div id="map_canvas"></div>
</body>
</html>
use right mouse button to draw
for now I have only one marker, how to find the number of markers inside the polygon and their latitude and longitude the polygons can be of any shape on the map.
You could utilize containsLocation() function to determine whether marker is located inside a polygon or not.
This example draws a green polygon when the marker falls outside of the specified polygon, and a red polygon when the marker falls inside the polygon.
function initialize() {
var myLatLng = { lat: 52.5498783, lng: 13.425209099999961 };
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(52.5498783, 13.425209099999961),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
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(map.getDiv(), 'mousedown', function (e) {
//do it with the right mouse-button only
if (e.button != 2) return;
//the polygon
var poly = new google.maps.Polyline({ map: map, clickable: false });
//move-listener
var move = google.maps.event.addListener(map, 'mousemove', function (e) {
poly.getPath().push(e.latLng);
});
//mouseup-listener
google.maps.event.addListenerOnce(map, 'mouseup', function (e) {
google.maps.event.removeListener(move);
var path = poly.getPath();
poly.setMap(null);
poly = new google.maps.Polygon({ map: map, path: path });
var resultColor = google.maps.geometry.poly.containsLocation(marker.getPosition(), poly) ? 'green' : 'red';
poly.setOptions({ fillColor: resultColor, strokeOpacity: 0.5 });
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html, body {
height: 100%;
margin: 0;
}
#map_canvas {
height: 90%;
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&libraries=geometry"> </script>
Use the right mouse-button to draw an overlay<br />
<div id="map_canvas"></div>
To get the number of markers inside the polygon, one option is to keep references to them in array, then iterate through that array checking to see if the marker is in the polygon or not. To determine if a marker is inside the polygon, the geometry library poly namespace method containsLocation can be used:
var markerCnt = 0;
for (var i = 0; i < markers.length; i++) {
if (google.maps.geometry.poly.containsLocation(markers[i].getPosition(), poly)) {
markerCnt++;
}
}
document.getElementById('numberMarkers').innerHTML += "There are " + markerCnt + " markers in the polygon<br>";
proof of concept fiddle
code snippet:
var markers = [];
function initialize() {
var myLatLng = {
lat: 52.5498783,
lng: 13.425209099999961
};
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(52.5498783, 13.425209099999961),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
markers.push(marker);
google.maps.event.addListener(map, 'bounds_changed', makeRandomMarkers);
var poly;
google.maps.event.addDomListener(map.getDiv(), 'mousedown', function(e) {
//do it with the right mouse-button only
if (e.button != 2) return;
//the polygon
if (poly && poly.setMap) {
poly.setMap(null);
}
poly = new google.maps.Polyline({
map: map,
clickable: false
});
//move-listener
var move = google.maps.event.addListener(map, 'mousemove', function(e) {
poly.getPath().push(e.latLng);
});
//mouseup-listener
google.maps.event.addListenerOnce(map, 'mouseup', function(e) {
google.maps.event.removeListener(move);
var path = poly.getPath();
poly.setMap(null);
poly = new google.maps.Polygon({
map: map,
path: path
});
var markerCnt = 0;
for (var i = 0; i < markers.length; i++) {
if (google.maps.geometry.poly.containsLocation(markers[i].getPosition(), poly)) {
markerCnt++;
}
}
document.getElementById('numberMarkers').innerHTML = "There are " + markerCnt + " markers in the polygon<br>";
});
});
}
function getRandom(min, max) {
return Math.random() * (max - min + 1) + min;
}
google.maps.event.addDomListener(window, 'load', initialize);
function makeRandomMarkers() {
var bounds = map.getBounds();
var maxLat = bounds.getNorthEast().lat(); // 70;
var minLat = bounds.getSouthWest().lat(); // 37;
var maxLong = bounds.getNorthEast().lng(); // 50;
var minLong = bounds.getSouthWest().lng(); // -8;
for (var j = 0; j < 50; j++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(getRandom(minLat, maxLat),
getRandom(minLong, maxLong)),
map: map
});
markers.push(marker);
}
}
html,
body {
height: 100%;
margin: 0
}
#map_canvas {
height: 90%;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
Use the right mouse-button to draw an overlay
<br/>
<div id="numberMarkers"></div>
<div id="map_canvas"></div>
Actually i am migrating from Maps v2 to v3. But i am facing a really weird error.
Here is my code
function createMarker(arrayPos,title,posn) {
var size = {width:15,height:15};
var iconSize = new google.maps.Size(size.width,size.height);
var iconAnchor = new google.maps.Point(9, 34);
var marker = new google.maps.Marker({
icon: new google.maps.MarkerImage("my.png",iconSize,null,iconAnchor),
title: title,
animation: google.maps.Animation.DROP,
position: posn
});
marker.html = getMarkerHtml(arrayPos);
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(marker.html);
infowindow.open(map,marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(marker.html);
infowindow.open(map,marker);
});
return marker;
}
In this i was experimenting opening the infowindow as soon as markers are added and also on the click listener. In this all the infowindow opens but the listerner is not registered on the first marker always. Any pointers in this?
I have modified your code as following and it works. Would you check whether it solves your issue?
In order to simulate a marker click you should add: google.maps.event.trigger(marker, 'click');
function createMarker(arrayPos,title,posn) {
var size = {width:15,height:15};
var iconSize = new google.maps.Size(size.width,size.height);
var iconAnchor = new google.maps.Point(9, 34);
var marker = new google.maps.Marker({
icon: new google.maps.MarkerImage("my.png",iconSize,null,iconAnchor),
title: title,
animation: google.maps.Animation.DROP,
position: posn
});
//marker.html = getMarkerHtml(arrayPos);
var infowindow = new google.maps.InfoWindow();
//infowindow.setContent(marker.html);
//infowindow.open(map,marker);
var markersHTML = getMarkerHtml(arrayPos);
google.maps.event.addListener(marker, 'click', (function(marker, markersHTML) {
return function() {
infowindow.setContent(markersHTML);
infowindow.open(map, marker);
}
})(marker, markersHTML));
return marker;
}
Example:
<!doctype html>
<html lang="en">
<head>
<title>Google Maps</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
<script type="text/javascript">
var cityList = [
['Chicago', 41.850033, -87.6500523, 1],
['Illinois', 40.797177,-89.406738, 2]
],
demoCenter = new google.maps.LatLng(41,-87),
map;
function initialize()
{
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: demoCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
function addMarkers()
{
var marker,
i,
infowindow = new google.maps.InfoWindow();
for (i = 0; i < cityList.length; i++)
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
map: map,
title: cityList[i][0]
});
var markersHTML = ["<div>",cityList[i][0],"</div>"].join("");
google.maps.event.addListener(marker, 'click', (function(marker, markersHTML) {
return function() {
infowindow.setContent(markersHTML);
infowindow.open(map, marker);
}
})(marker, markersHTML));
}
}
$(document).ready(function() {
initialize();
});
$(document).on('click', '.add-markers', function(e) {
e.preventDefault();
addMarkers();
});
</script>
</head>
<body>
<div id="basic-map">
<div id="map_canvas" style="height:350px;"></div>
Add Some Markers
</div>
</body>
</html>
I hope this helps.
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 .
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>