Google map and added new markers

JavaScript
1

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:



//Added animation for Jquery
    var places = [
      {
        "title": "Flinders St Station",
        "description": "This is a pretty major train station.",
        "position": [ -37.818078, 144.966811 ]
      },
      {
        "title": "Southern Cross Station",
        "description": "Did you know it used to be called Spencer St Station?",
        "position": [ -37.818358, 144.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

Is it possible to help?Thanks…

3

You could define a “type” for each location, and you could have predefined types to work with

Something along the lines of


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


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