SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Google map and added new markers

    I have seen article like:
    Embellishing Your Google Map with CSS3 and jQuery
    URL:http://www.sitepoint.com/embellishin...s3-and-jquery/

    I have set new airport location like working code:
    PHP Code:

    //Added animation for Jquery
        
    var places = [
          {
            
    "title""Flinders St Station",
            
    "description""This is a pretty major train station.",
            
    "position": [ -37.818078144.966811 ]
          },
          {
            
    "title""Southern Cross Station",
            
    "description""Did you know it used to be called Spencer St Station?",
            
    "position": [ -37.818358144.952417 ]
          },
          {
            
    "title""West Melbourne Viktoria",
            
    "description""Did you know it is the major airport?",
            
    "position": [ -37.802731,144.915733 ]
          }
        ]
        var 
    currentPlace null;
        var 
    info = $('#placeDetails');
        $(
    places).each(function() {
          var 
    place this;
          var 
    marker = new google.maps.Marker({
            
    position: new google.maps.LatLng(place.position[0], place.position[1]),
            
    map:      map,
            
    title:    place.title,
            
    icon:     'images/icons/trasportation/all/train.png'
          
    });
     
    /*     var marker = new google.maps.Marker({
                position: new google.maps.LatLng(place.position[2]),
                map:      map,
                title:    place.title,
                icon:     'images/icons/trasportation/all/airport.png'
              });    */ 
    How to set last marker Airport in Melbourn to be seen marker Airport:
    /* var marker = new google.maps.Marker({
    position: new google.maps.LatLng(place.position[2]),
    map: map,
    title: place.title,
    icon: 'images/icons/trasportation/all/airport.png'
    }); */


    I have done place.position[2] and also:GEO position:
    "title": "West Melbourne Viktoria",
    "description": "Did you know it is the major airport?",
    "position": [ -37.802731,144.915733 ]

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it possible to help?Thanks...

  3. #3
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You could define a "type" for each location, and you could have predefined types to work with

    Something along the lines of

    Code javascript:
    var LocationTypes = {
      TRAINSTATION: "trainstation",
      AIRPORT: "airport"
    }
     
    //then in your places object
          { 
            "title": "West Melbourne Viktoria", 
            "description": "Did you know it is the major airport?", 
            "position": [ -37.802731,144.915733 ],
            "type": LocationTypes.AIRPORT
          }

    Now you would be able to check each marker against a type and allocate the appropriate icon.

    Next step would be to expand on the types object and add more information for them (like the icon)

    For example

    Code javascript:
    var LocationTypes= {
      TRAINSTATION: {
        type: "trainstation",
        title: "Train Station",
        icon: "/path/to/the/trainstation-icon.png"
      },
      AIRPORT: {
        type: "airport",
        title: "Airport",
        icon: "/path/to/the/airport-icon.png"
      }
    }
     
    //then in your places object
          { 
            "title": "Southern Cross Station", 
            "description": "Did you know it used to be called Spencer St Station?", 
            "position": [ -37.818358, 144.952417 ],
            "type": LocationTypes.TRAINSTATION.type
          }, 
          { 
            "title": "West Melbourne Viktoria", 
            "description": "Did you know it is the major airport?", 
            "position": [ -37.802731,144.915733 ],
            "type": LocationTypes.AIRPORT.type
          }

    Some of the benefits of this are:
    - If you ever want to change the icon, title, type it can be done in one place
    - you won't comparison errors if you accidentally make a spelling mistake
    - You get code completion in many editors
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •