Databases
StackOverflow2013
Postsdbo
POGoogle Maps Marker Incorrect position in IE, working fine on chrome
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle Maps Marker Incorrect position in IE, working fine on chrome
    text
    copied!<p>I have plotted a route map on my page using google API. Now let say I have printed a route map from point A to Point B which goes from point C. Now I am Showing some marker with point C in the map. It works fine with Chrome but Don't work with Internet Explorer.</p> <p>Here is my code. To run it select a address from list and click on submit</p> <pre><code>&lt;html&gt; &lt;head&gt; key=25888957881@project.googleusercontent.com &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Waypoints in directions&lt;/title&gt; &lt;style type="text/css"&gt; .labels { color: red; background-color: white; font-family: "Lucida Grande", "Arial", sans-serif; font-size: 10px; font-weight: bold; text-align: center; width: 40px; border: 2px solid black; white-space: nowrap; } &lt;/style&gt; &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=true"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" language=javascript&gt; var latLng = new google.maps.LatLng(41.850033, -87.6500523); var homeLatLng = new google.maps.LatLng(41.850033, -87.6500523); var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; function SetfC(src) { document.getElementById('id1').focus(); src.blur(); } function ShowPhoneNumber(address, Number, Text) { codeAddress(address, Number, Text); } function codeAddress(address, Number, Text) { var geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'address': address }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { var marker1 = new MarkerWithLabel({ position: results[0].geometry.location, draggable: true, raiseOnDrag: true, map: map, labelContent: Number, labelAnchor: new google.maps.Point(results[0].geometry.location), labelClass: "labels", // the CSS class for the label labelStyle: { opacity: 0.75 }, icon: {} }); var iw1 = new google.maps.InfoWindow({ content: Text }); google.maps.event.addListener(marker1, "click", function (e) { iw1.open(map, this); }); } else { alert('Geocode was not successful for the following reason: ' + status); } }); } function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var chicago = new google.maps.LatLng(41.850033, -87.6500523); var mapOptions = { zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago } map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById('directionsPanel')); calcRoute(); } function calcRoute() { var start = document.getElementById('start').value; var end = document.getElementById('end').value; var waypts = []; var checkboxArray = document.getElementById('waypoints'); for (var i = 0; i &lt; checkboxArray.length; i++) { if (checkboxArray.options[i].selected == true) { ShowPhoneNumber(checkboxArray[i].value, 'NUM', 'Rohit '); waypts.push({ location: checkboxArray[i].value, stopover: true }); } } var request = { origin: start, destination: end, waypoints: waypts, optimizeWaypoints: true, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function (response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); var route = response.routes[0]; var summaryPanel = document.getElementById('directions_panel'); summaryPanel.innerHTML = ''; // For each route, display summary information. for (var i = 0; i &lt; route.legs.length; i++) { var routeSegment = i + 1; summaryPanel.innerHTML += '&lt;b&gt;Route Segment: ' + routeSegment + '&lt;/b&gt;&lt;br&gt;'; summaryPanel.innerHTML += route.legs[i].start_address + ' to '; summaryPanel.innerHTML += route.legs[i].end_address + '&lt;br&gt;'; summaryPanel.innerHTML += route.legs[i].distance.text + '&lt;br&gt;&lt;br&gt;'; } } }); } google.maps.event.addDomListener(window, 'load', initialize); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;input onclick="alert(2+2)" type="button" id="id1" value="click"/&gt; &lt;select id="opt" onfocus="SetfC(this);" onmouseup="SetfC(this);"&gt; &lt;option value="volvo"&gt;Volvo&lt;/option&gt; &lt;option value="saab"&gt;Saab&lt;/option&gt; &lt;option value="mercedes"&gt;Mercedes&lt;/option&gt; &lt;option value="audi"&gt;Audi&lt;/option&gt; &lt;/select&gt; &lt;div id="map-canvas" style="float:left;width:60%;height:85%;"&gt;&lt;/div&gt; &lt;div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px"&gt; &lt;div style="margin:20px;border-width:2px;"&gt; &lt;b&gt;Start:&lt;/b&gt; &lt;select id="start"&gt; &lt;option value="Halifax, NS"&gt;Halifax, NS&lt;/option&gt; &lt;option value="Boston, MA"&gt;Boston, MA&lt;/option&gt; &lt;option value="New York, NY"&gt;New York, NY&lt;/option&gt; &lt;option value="Miami, FL"&gt;Miami, FL&lt;/option&gt; &lt;/select&gt; &lt;br&gt; &lt;b&gt;Waypoints:&lt;/b&gt; &lt;br&gt; &lt;i&gt;(Ctrl-Click for multiple selection)&lt;/i&gt; &lt;br&gt; &lt;select multiple id="waypoints"&gt; &lt;option value="VILLA RICA, 65 E INDUSTRIAL CT, GA, 30180-1037 Time: 12:00PM to 1:00 PM"&gt;Montreal, QBC&lt;/input&gt; &lt;option value="4025 PLEASANTDALE RD, DORAVILLE, GA, 30340-4262 Time: 00:00AM to 1:00 AM"&gt;Toronto, ONT&lt;/input&gt; &lt;option value="chicago, il"&gt;Chicago&lt;/input&gt; &lt;option value="winnipeg, mb"&gt;Winnipeg&lt;/input&gt; &lt;option value="fargo, nd"&gt;Fargo&lt;/input&gt; &lt;option value="calgary, ab"&gt;Calgary&lt;/input&gt; &lt;option value="spokane, wa"&gt;Spokane&lt;/input&gt; &lt;/select&gt; &lt;br&gt; &lt;b&gt;End:&lt;/b&gt; &lt;select id="end"&gt; &lt;option value="Vancouver, BC"&gt;Vancouver, BC&lt;/option&gt; &lt;option value="Seattle, WA"&gt;Seattle, WA&lt;/option&gt; &lt;option value="San Francisco, CA"&gt;San Francisco, CA&lt;/option&gt; &lt;option value="Los Angeles, CA"&gt;Los Angeles, CA&lt;/option&gt; &lt;/select&gt; &lt;br&gt; &lt;input type="submit" onclick="calcRoute();"&gt; &lt;/div&gt; &lt;div id="directions_panel" style="margin:20px;background-color:#FFEE77;"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="directionsPanel" style="float:right;width:30%;height 100%"&gt;&lt;/div&gt; &lt;p&gt;Total Distance: &lt;span id="total"&gt;&lt;/span&gt;&lt;/p&gt; &lt;/body&gt; </code></pre> <p></p> <p>Thanks</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload