Home/ Questions/Q 8824327
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T06:35:06+00:00

I want to display a map and then 3 text links in a sidebar

  • 0

I want to display a map and then 3 text links in a sidebar that onclick will change the location on the map.

The map won’t display as a result of trying to port over code from V2 to V3.

I’m sure just a small error.. my code is as follows:

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
</head>
<body>
    <div id="map" style="width: 459px; height: 200px"></div>
    <div id="side_bar"></div>

    <script type="text/javascript">
    //<![CDATA[

    if (GBrowserIsCompatible()) {

      // this variable will collect the html which will eventually be placed in the side_bar
      var side_bar_html = "";

      // arrays to hold copies of the markers and html used by the side_bar
      // because the function closure trick doesnt work there
      var gmarkers = [];


      // A function to create the marker and set up the event window
      function createMarker(point,name,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        // save the info we need to use later for the side_bar
        gmarkers.push(marker);
        // add a line to the side_bar html
        side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
         return marker;
      }


      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        GEvent.trigger(gmarkers[i], "click");
      }


      // create the map
      var map;
      function initialize() {
        var mapOptions = {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map'),
            mapOptions);
      }
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng( 43.907787,-79.359741), 8);

      // add the points    
      var point = new GLatLng(43.65654,-79.90138);
      var marker = createMarker(point,"This place","Some stuff to display in the<br>First Info Window")
      map.addOverlay(marker);

      var point = new GLatLng(43.91892,-78.89231);
      var marker = createMarker(point,"That place","Some stuff to display in the<br>Second Info Window")
      map.addOverlay(marker);

      var point = new GLatLng(43.82589,-78.89231);
      var marker = createMarker(point,"The other place","Some stuff to display in the<br>Third Info Window")
      map.addOverlay(marker);


      // put the assembled side_bar_html contents into the side_bar div
      document.getElementById("side_bar").innerHTML = side_bar_html;

    }

    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok, try this code:

    <!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  </head>
  <body>
    <div style="position:relative;width:600px;height:400px">
      <div id="map" style="position:absolute;left:0;top:0;width:75%; height:100%"></div>
      <div id="side_bar" style="position:absolute;right:0;top:0;width:25%; height:100%"></div>
    </div>

    <script type="text/javascript">
      //<![CDATA[

      // this variable will collect the html which will eventually be placed in the side_bar
      var side_bar_html = "";

      // arrays to hold copies of the markers and html used by the side_bar
      // because the function closure trick doesnt work there
      var gmarkers = [];

      var infoWnd = new google.maps.InfoWindow();

      // A function to create the marker and set up the event window
      function createMarker(point, name, html) {
        var marker = new google.maps.Marker({
          position : point
        });
        google.maps.event.addListener(marker, "click", function() {
          infoWnd.setContent(html);
          infoWnd.open(marker.getMap(), marker);
        });
        // save the info we need to use later for the side_bar
        gmarkers.push(marker);
        // add a line to the side_bar html
        side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + name + '<\/a><br>';
        return marker;
      }

      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        google.maps.event.trigger(gmarkers[i], "click");
      }

      // create the map
      var map;
      function initialize() {
        var mapOptions = {
          zoom : 8,
          center : new google.maps.LatLng(43.91892, -78.89231),
          mapTypeId : google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map'), mapOptions);

        // add the points
        var point = new google.maps.LatLng(43.65654, -79.90138);
        var marker = createMarker(point, "This place", "Some stuff to display in the<br>First Info Window");
        marker.setMap(map);

        var point = new google.maps.LatLng(43.91892, -78.89231);
        var marker = createMarker(point, "That place", "Some stuff to display in the<br>Second Info Window");
        marker.setMap(map);

        var point = new google.maps.LatLng(43.82589, -78.89231);
        var marker = createMarker(point, "The other place", "Some stuff to display in the<br>Third Info Window");
        marker.setMap(map);

        // put the assembled side_bar_html contents into the side_bar div
        document.getElementById("side_bar").innerHTML = side_bar_html;
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </body>
</html>

    enter image description here

    • 0