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>
Related
<%# Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="TestMap.aspx.cs" Inherits="TestMap" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing" type="text/javascript"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8sE5-1UPLAT2UqkNqRiMnvVNh9UNZk-0&callback=initMap">
</script>
<script type="text/javascript">
function initMap() {
var centerPoint = new google.maps.LatLng(41, -103);
var mapOptions = {
center: centerPoint,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.HYBRID,
keyboardShortcuts: true,
mapTypeControl: true,
streetViewControl: true,
drawingControl: true,
zoom: 8
};
// alert('initMap');
var map = new google.maps.Map(document.getElementById('map'), 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,
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.RECTANGLE
]
},
markerOptions: {icon: 'images/pUmjb.jpg'},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
}
</script>
MAP:
<div style="width:800px; height:500px" id="map"></div>
</asp:Content>
I am trying to use v3 of the google maps api, and it's all working fine so far, except that I can't seem to get the toolbar for the drawing tools to show on the map. Here is the code for a very simplified WebForm. I'm guessing that I'm just missing one parameter or one line of code somewhere, but I just can't seem to make it work.
Only include the API one time. If you want/need to use a key (it is recommended but not required), include it in the parameters of the single include. The sensor parameter is no longer required.
(update: keys are now required)
<script src="http://maps.googleapis.com/maps/api/js?libraries=drawing&key=AIzaSyB8sE5-1UPLAT2UqkNqRiMnvVNh9UNZk-0&callback=initMap" type="text/javascript" async defer></script>
code snippet:
function initMap() {
var centerPoint = new google.maps.LatLng(41, -103);
var mapOptions = {
center: centerPoint,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.HYBRID,
keyboardShortcuts: true,
mapTypeControl: true,
streetViewControl: true,
drawingControl: true,
zoom: 8
};
// alert('initMap');
var map = new google.maps.Map(document.getElementById('map'), 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,
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.RECTANGLE
]
},
markerOptions: {
icon: 'images/pUmjb.jpg'
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
}
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&callback=initMap" async defer></script>
<div id="map"></div>
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
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>
I am using Google Maps Javascript API ver3 to display the world locations. Below is the sample code I am using:
<!DOCTYPE html>
<html>
<head>
<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_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
function addMarkers(location,locationDetail,map){
var color = "#000000"
if(locationDetail[1]=="A"){
color = "#FF0000";
scl = 3;
}
else if(locationDetail[1]=="B"){
color = "#0000FF"
scl = 4;
}
else if(locationDetail[1]=="C"){
color = "#00FF00"
scl = 5;
}
var marker = new google.maps.Marker({
position: location,
title: locationDetail[0],
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: scl,
fillColor: color,
fillOpacity:1,
strokeWeight:1
}
});
// To add the marker to the map, call setMap();
marker.setMap(map);
}
function initialize() {
//Marking Latitude and Longitude
var myLatlng = [
new google.maps.LatLng(24.466667,54.366667),
new google.maps.LatLng(-34.4,-58.24),
new google.maps.LatLng(-33.8641,151.0823)
];
var myLatlngDet = [
["Abu Dhabi","A"],
["Buenos Aires","B"],
["HOMEBUSH","C"]
];
//Map Options to customize map
var mapOptions = {
zoom:2,
center: new google.maps.LatLng(40,0),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapMaker: true,
minZoom : 2,
scrollwheel: false,
mapTypeControl:true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
scaleControl:true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl:true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
overviewMapControl:false,
zoomControl:true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
panControl:true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
};
//Generating map in the div
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
for(i=0; i < myLatlng.length; i++){
addMarkers(myLatlng[i],myLatlngDet[i],map);
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="height: 100%; width: 80%;">
</div>
</body>
</html>
The Problem is - Sometimes the markers get displayed properly but sometimes I get a javascript error as follows:
'Unexpected Call to Method or Property access'
main.js
Can you help me identifying the cause of the problem.
I am using IE8.
Thanks in advance
My guess is that it's the body's onload that is not waiting until googlemap's script is loaded. In theory the body can be loaded faster than the googlemap script (relevant discussion). Try putting
window.onload=initialize;
at the bottom of your script instead of using the body's onload and see if this solves your problem. I have a hard time reproducing this.
Update
You should simply wait until googlemap has loaded which follows after the window load. Have a look at this question: How can I check whether Google Maps is fully loaded?
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>