Google Maps Directions Add-on Support Product Page
Solved
Google Maps Direction breaks Google Maps
Reported 11 Apr 2012 14:59:56
1
has this problem
11 Apr 2012 14:59:56 Roland Voss posted:
Due to the structure of my html document the Google maps directions code will be in front of the Google maps code. In this situation no map is displayed and the route directions are not created. Use DW CS5.5, Google Maps 1.1.0 and Maps Directions 1.1.0. See sample code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="../ScriptLibrary/jquery-latest.pack.js"></script>
<script type="text/javascript" src="../ScriptLibrary/jquery.gmap.min.js"></script>
<script type="text/javascript" src="../ScriptLibrary/jquery.autocomplete.js"></script>
<script type="text/javascript" src="../ScriptLibrary/jquery.bgiframe.min.js"></script>
<link rel="stylesheet" type="text/css" href="../ScriptLibrary/autocomplete.css" />
<script type="text/javascript" src="../ScriptLibrary/dmxGMDirections.js"></script>
</head>
<body>
<p>
<input name="autocomplete1" id="autocomplete1" type="text" size="60" />
<script type='text/javascript'>
jQuery(document).ready(
function() {
jQuery('#autocomplete1').autocomplete('GoogleAjax',
{
opacity : .7,
delay : 100,
minChars : 3,
useMap : 'map1',
clearAllMarkers : false,
fxShow : { type:'slide' },
fxHide : { type:'slide' }
})});
</script>
</p>
<p>
<div class="dmxGMDirections" id="gmDir1" style="width:600px;">
</div>
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(
function()
{
jQuery("#gmDir1").dmxGMDirections(
{"width": 600, "useMap": "map1", "startLoc": "autocomplete1", "provideRouteAlternatives": true}
);
}
);
// ]]>
</script>
</p>
<p>
<div class="dmxGoogleMaps" id="map1" style="width:600px;height:400px;">
</div>
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(
function()
{
jQuery("#map1").gMap(
{"zoom": 15, "markers": [{"address": "wendelinstr. 32, köln"}]}
);
}
);
// ]]>
</script>
</p>
</body>
</html>Replies
Replied 11 Apr 2012 15:17:11
11 Apr 2012 15:17:11 Teodor Kuduschiev replied:
Hello,
Just move the
code after the google maps code and leave the
Where it is now.
Just move the
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(
function()
{
jQuery("#gmDir1").dmxGMDirections(
{"width": 600, "useMap": "map1", "startLoc": "autocomplete1", "provideRouteAlternatives": true}
);
}
);
// ]]>
</script>code after the google maps code and leave the
<div class="dmxGMDirections" id="gmDir1" style="width:600px;"> </div>
Where it is now.
Replied 11 Apr 2012 15:41:49
11 Apr 2012 15:41:49 Roland Voss replied:
Many thanks for this fast and quite easy solution.