Sorry for my English.
I want to know if it is possible to draw two or more different polylines on a map. For example, a polyline object from New York to Miami and other object from San Francisco to Los Angeles.
Can anyone give me an example.
Yes, of course.
<!DOCTYPE html>
<html>
<head>
<title>Draw two polylines</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var NYLatlng = new google.maps.LatLng(40.781321,-73.965855);
var MiamiLatlng = new google.maps.LatLng(25.786908,-80.226002);
var SFLatlng = new google.maps.LatLng(37.774514,-122.441311);
var LALatlng = new google.maps.LatLng(34.041281,-118.240585);
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 2,
center: new google.maps.LatLng(0,0),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var line1 = new google.maps.Polyline({
path: [NYLatlng, MiamiLatlng],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 1,
map: map
});
var line2 = new google.maps.Polyline({
path: [SFLatlng, LALatlng],
strokeColor: "#0000FF",
strokeOpacity: 1.0,
strokeWeight: 1,
map: map
});
// make the map zoomed in enough to see all the polylines
var bounds = new google.maps.LatLngBounds();
bounds.extend(NYLatlng);
bounds.extend(MiamiLatlng);
bounds.extend(SFLatlng);
bounds.extend(LALatlng);
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Related
I want an infowindow to open automatically when this map is loaded. I'm trying to apply the very fine answer here, the only difference I can see being that I'm triggering a click on a marker rather than on a polygon. I've been staring at and fiddling with the code for a while but just can't get it to trigger that click. What am I missing?
Thanks,
Drew
This pared-down version is using a KML file with one placemark. The relevant code for the event.trigger is down at line 33.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDDFrP7MSD1ieFEvaF95BRlwHa0S72Fy1s&sensor=FALSE"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(47.606209, -122.332069)
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions );
var blues = new geoXML3.parser({map: map, zoom: false});
blues.parse('allbluesdance_seattle.kml');
google.maps.event.addListenerOnce(map, 'idle', function(){
alert("Clicking now.");
google.maps.event.trigger(geoXml.docs[0].placemarks[0].marker,'click')
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
You have a javascript error in your code: Uncaught ReferenceError: geoXml is not defined (because geoXml is undefined). That should be blues in your code.
function initialize() {
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(47.606209, -122.332069)
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var blues = new geoXML3.parser({
map: map,
zoom: false
});
blues.parse('allbluesdance_seattle.kml');
google.maps.event.addListenerOnce(map, 'idle', function () {
alert("Clicking now.");
google.maps.event.trigger(blues.docs[0].placemarks[0].marker, 'click');
});
}
google.maps.event.addDomListener(window, 'load', initialize);
working fiddle
I want to display zip code boundaries and on that boundaries i want to display custom polygon on that
here is my code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Fusion Tables styling</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map, layer;
var tableid = 2996349;
var triangleCoords = [
new google.maps.LatLng(37.2684,-119.956),
new google.maps.LatLng(37.5137,-119.958),
new google.maps.LatLng(37.417, -120.149),
new google.maps.LatLng(37.3957, -119.745)
];
var bermudaTriangle;
function initialize() {
var usa=new google.maps.LatLng(37.23032838760389, -118.65234375);
map = new google.maps.Map(document.getElementById('map-canvas'), {
center:usa,
zoom: 4
});
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: 'blue',
fillOpacity: 0.35
});
layer = new google.maps.FusionTablesLayer(tableid);
layer.setQuery("SELECT 'geometry' FROM " + tableid);
layer.setMap(map);
bermudaTriangle.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>`
but it is showing only custom polygon not the boundaries can u share some sample code for displaying the same
I am using Google maps JavaScript API, i get users zip code from database, find lang, lat for it from another table, pass it to JavaScript and show marker on the map.this is showing marker perfectly.
But i want to show marker on exact address of the user instead of just zip code.
But unable to find a way how to do this.
Can anybody please guide me.
Thanks
if you want to place the marker on given lat and lng use this code,
use this code
<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var markersArray=[];
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(11.6667,76.2667),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
function pan() {
deleteOverlays();
var panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
map.setCenter(panPoint)
var marker = new google.maps.Marker({
map: map,
position: panPoint,
});
markersArray.push(marker);
}
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
</script>
</head>
<body>
Latitude:<input type="text" id="lat" >
Longitude:<input type="text" id="lng">
<input type="button" value="updateCenter" onclick="pan()" />
<div id="map-canvas"></div>
</body>
</html>
I am using the drawing tool with my map. I set the option this as explained in the documentation :
markerOptions: {
animation: google.maps.Animation.DROP,
icon: new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'),
draggable: true,
flat: true,
raiseOnDrag: true
},
However, I cannot drag my marker and the DROPE animation seems to have a bug but works (flash out before droping). getDraggable method returns true :
if (event.type == google.maps.drawing.OverlayType.MARKER) {
markersArray.push(event.overlay);
alert(event.overlay.getDraggable()); // true
}
When I click on my marker, it ignores it and it drags the map instead. How could I fix this ?
Thank you
How about this code. This code works for me.
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Drawing Tools Library</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script>
<script>
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.MARKER
]
},
markerOptions: {
animation: google.maps.Animation.DROP,
icon: new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'),
draggable: true,
flat: true,
raiseOnDrag: true
}
});
drawingManager.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
I test a new drawing library and has led me to question how to get from drawing manager polyline position and set another markers? As in this example: polyline-complex.
My example:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script>
<style type="text/css">
#map, html, body {
padding: 0;
margin: 0;
height: 100%;
}
</style>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(52.000, 16.000),
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYLINE,
drawingControl: false,
polylineOptions: {
editable: true
},
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>