Question

I am trying to integrate this particular app in my website.

When I load it as content to my main page my jquery menu from the main page stops working. It seems there is a conflict here.
Here is the script from the childpage:

<script type='text/javascript'>
  $(function() {
    var bucharest = new google.maps.LatLng(44.436055, 26.097593),
      pointToMoveTo, 
      first = true,
      curMarker = new google.maps.Marker({}),
      $el;

  var myOptions = {
      zoom: 13,
      center: bucharest,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

  var map = new google.maps.Map($("#map_canvas")[0], myOptions);

  $("#locations li").mouseenter(function() {

    $el = $(this);

    if (!$el.hasClass("hover")) {

      $("#locations li").removeClass("hover");
      $el.addClass("hover");

      if (!first) { 

        // Clear current marker
        curMarker.setMap(); 

        // Set zoom back to Bucharest level
        // map.setZoom(10);
      }

      // Move (pan) map to new location
      pointToMoveTo = new google.maps.LatLng($el.attr("data-geo-lat"), $el.attr("data-geo-long"));
      map.panTo(pointToMoveTo);

      // Add new marker
      curMarker = new google.maps.Marker({
          position: pointToMoveTo,
          map: map,
          icon: "images/marker.png"
      });

      // On click, zoom map
      google.maps.event.addListener(curMarker, 'click', function() {
         map.setZoom(14);
      });

      // Fill more info area
      $("#more-info")
        .find("h2")
          .html($el.find("h3").html())
          .end()
        .find("p")
          .html($el.find(".longdesc").html());

      // No longer the first time through (re: marker clearing)        
      first = false; 
    }

  });

  $("#locations li:first").trigger("mouseenter");

});

Here is the script for the menu in main page:

$(document).ready(function() {
    $("ul#nav li a").addClass("js");
    $("ul#nav li a").hover(
      function () {
        $(this).stop(true,true).animate({backgroundPosition:"(0 0)"}, 200);
        $(this).animate({backgroundPosition:"(0 -5px)"}, 150);
      },
      function () {
        $(this).animate({backgroundPosition:"(0 -149px)"}, 200);

      }
    );

});

Is there a conflict between these two?
Thank you!

Answer 1

I think there is an error in your first document.ready

here : $(function() {

So the second document.ready

this one : $(document).ready(function() {