Map24 Template
Name:
Password:
remember me
or register
Valid XHTML 1.0 Transitional Valid CSS! SourceForge.net Logo
Contact Template with Map 24
Using services like map24 or google maps you can easily integrate a dynamic map to you company. 
What do I need for that?

First thing is to aquire a developer key (for map24 go to http://devnet.map24.com). With this you can easily integrate a map to your location in a corinis template.

Then all you need to do is copy/paste the code below (make sure to insert your developer key in the code) in your contact template, edit the contact page and insert your address as you would in map24 and put the page life. 
 

How does the template code look like?

    <corinis-comment> Enter address here:
        <corinis-field name="address" type="edit" />
    </corinis-comment>
    <corinis-life>

        <script language="javascript" src="http://api.map24.com/ajax/1.2.8/">// </script>
        <div id="maparea" />
        <script language="javascript"> var myAddress = "<corinis-field name="address" type="show" />"; </script>
        <script><!--
       var map = Map24.Webservices.getMap24Application({
          AppKey: "[YOUR DEVELOPER KEY HERE]",
          MapArea: document.getElementById( "maparea" ),
          MapWidth: 710,
          MapHeight: 500
        });
    
        map.onMapSearchFree = function( event ){
          var mrcContainer = new Map24.Webservices.Request.MapletRemoteControl( map );
          var firstResult = event.Alternatives[0];
          var lon = firstResult.Coordinate.Longitude;
          var lat = firstResult.Coordinate.Latitude;
         
       mrcContainer.push(
          new Map24.Webservices.MRC.DeclareMap24Oval({
            MapObjectID: "myOval",
            Width: 20,
            Height: 20,
            Center: new Map24.Coordinate( lon, lat),
            FillColor: new Map24.Color( 255, 0, 0, 100 ),
            BorderColor: new Map24.Color( 255, 0, 0, 255 )
          })
        );
        mrcContainer.push(
                new Map24.Webservices.MRC.ControlMapObject({
              Control: "ENABLE",
              MapObjectIDs: "myOval"
            })

     );

          mrcContainer.push(
            new Map24.Webservices.MRC.SetMapView({
              Coordinates: new Map24.Coordinate( lon, lat ),
              ClippingWidth: new Map24.Webservices.ClippingWidth(
                { MinimumWidth: 500 }
              )
            })
          );

        map.Webservices.sendRequest( mrcContainer );
     return false;
        };

 map.Webservices.sendRequest(
          new Map24.Webservices.Request.MapSearchFree(map, {
            SearchText: myAddress,
            MaxNoOfAlternatives: 3
          }));
//-->
        </script>
    </corinis-life>
 

Ok a little explenation please

Most of the code is taken as described on http://devnet.map24.com/manuals/doku.php?id=ajax:1.2.8:tutorials:tutorials.

The only things added specifically for the corinis-template are:

  • The first corinis-comment tag where the editor can enter their adress
  • a javascript tag where a variably (myAdress) is filled with the entered value (see corinis-field type="show")
  • and a corinis-life tag around the whole javascript so the map isnt displayed every time you want to edit the page

If you want to use another api like google maps or msn maps you can do so easily. Just look at the example code and do the same thing as here with the map24 code.

The final map