Google API V3 and Directions (Javascript)

Question

First of all, I hope you are all fine.

I am currently working on my assignment and i need to achieve these:

• Show map with 1 marker if user is logged out
• Show map with route if user is logged in

I managed to do both however they only work separately.. after a while i found out that the following was the cause:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
        type="text/javascript"></script>  
       <script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false" /> 

Apparently i can't have them both together >.< so my question is.. Is there a way to go around this please?

The following is the JavaScript code that i'm calling from code behind via ASP.NET since i get the values from my database. They are basically creating my maps.

<script type="text/javascript">    
var map;
var directionsPanel;
var directions;

function initialize(lng, lat) {
var latlng = new google.maps.LatLng(lng, lat);
var myOptions = {
  zoom: 15,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
var marker = new google.maps.Marker({position: new google.maps.LatLng(lng, lat), map:map});}

  function setRoute(log, lat, from, to) {
  map = new GMap2(document.getElementById("map_canvas"));
  map.setCenter(new GLatLng(log, lat), 15);
 directionsPanel = document.getElementById("route");
  directions = new GDirections(map, directionsPanel);
  directions.load("from: " + from + " to: " + to);
}
</script>

Excuse me if my code is 'not that good' or there was a better approach for it. This is actually my first time working with JavaScript.

Thank you for your time :)

Answer 1

You're loading two different versions of the Maps API -- V2 and V3. You should use only one; I recommend V3 since V2 is deprecated.

V3 is the latter of the two you references: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

Afterward, check the reference for V3 at http://code.google.com/apis/maps/documentation/javascript/basics.html

Answer 2

Exactly what Kai said.

Keep in mind though, when you're upgrading to V3, you will most likely have to change some of your calls. For example: new GMap2(document.getElementById("map_canvas")); is not in the v3 API.

To do the least amount of work, you can figure out what uses v3 and what uses v2. Then just move to the one that has the least changes. But I also recommend to upgrade to v3 if you have the time/resources.