[Javascript] Google Map display and Marker pin up with JS API

Do you want to display google map in your website or pages? If you do, follow this posting.

Step 01. You need google map js api at your html file.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

It is google map apis js file.

Step 02. You make div for google map at your page what you want to see.

Like this <div id="my_google_map"></div>

Step 03. Copy & Paste

      function initialize() {
        var mapOptions = {
          center: { lat: -34.397, lng: 150.644},
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById('my_google_map'),
            mapOptions);
      }

      google.maps.event.addDomListener(window, 'load', initialize);

'my_google_map' is your div's id. That's it. It's done.

Do you want to pin up some markers on your map????

Step 01. Make your coordinate variable.

var locationCoordinates = [[37.511058, 127.044718], [37.511058, 127.044718], [37.511058, 127.044718]];

Step 02. Make markers with for sentence.

for (var i in locationCoordinates)
{
var p = locationCoordinates[i];
var latlng = new google.maps.LatLng(p[0], p[1]);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
}

Then you will get markers on your map.

[Javascript] The best way for to catch is mobile browser!

Are you web programmer? If so, when you make mobile web site you want to know what is mobile browser. There is many way, but here is simple & best way with javascript.


First best way!

Make isMobile function. Add it to your js file or section.
function isMobile() {
   return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

[Code testing in desktop browser - return false]

Second best way with css.

Step 01. In your css section or file, add it.
@media only screen and (max-width: 760px) { #mobile_flag { display: none; } }

* you can change screen size 760 to some other size.

Step 02. In your html file add it.
<div id="mobile_flag"></div>

Step 03. In your js file or section, add it.
function isMobile() {
   if( $('#mobile_flag').css('display')=='none') {

        return true;       

   }

   return false;

}

[Javascript Data Structures & Algorithms] List

Here is List data structure with js.
reference is Data Structures & Algorithms with JavaScript.
In the book, there is some error and needless codes. I fix and cut off that.

function List() {
  this.listSize = 0;
  this.pos = 0;
  this.dataStore = [];
  this.clear = clear;
  this.find = find;
  this.toString = toString;
  this.insert = insert;
  this.append = append;
  this.remove = remove;
  this.contains = contains;
  this.front = front;
  this.end = end;
  this.prev = prev;
  this.next = next;
  this.length = length;
  this.currPos = currPos;
  this.moveTo = moveTo;
  this.getElement = getElement;
}

function append(element) {
  this.dataStore[this.listSize++] = element;
}

function remove(element) {
  var foundAt = this.find(element);
  if (foundAt > -1) {
    this.dataStore.splice(foundAt,1);
    --this.listSize;
    return true;
  }
  return false;
}

function find(element) {
  for(var i=0; i<this.dataStore.length; ++i) {
    if(this.dataStore[i]==element) {
      return i;
    }
  }
  return -1;
}

function length() {
  return this.listSize;
}

function toString() {
  return this.dataStore;
}

function insert(element, after) {
  var insertPost = this.find(after);
  if(insertPost > -1 ) {
    this.dataStore.splice(insertPos+1,0, element);
    ++this.listSize;
    return true;
  }
  return false;
}

function clear() {
  delete this.dataStore;
  this.dataStore.length = 0;
  this.listSize = this.pos = 0;
}

function contains(element) {
  if(this.find(element)>-1) {
    return true;
  }
  return false;
}

function front() {
  this.pos = 0;
}

function end() {
  this.pos = this.listSize-1;
}

function prev() {
  if(this.pos>=0) {
    --this.pos;
  }
}

function next() {
  if(this.pos < this.listSize) {
    ++this.pos;
  }
}

function currPos() {
  return this.pos;
}

function moveTo(position) {
  this.pos = position;
}

function getElement() {
  return this.dataStore[this.pos];
}


var names = new List();

names.append("Carrot Carrot");
names.append("Flash Maestro");
names.append("Jake Song");

for(names.front(); names.currPos() < names.length(); names.next()) {
  print(names.getElement());
}

for(names.end(); names.currPos()>=0; names.prev()) {
  print(names.getElement());
}

It is realized with Array. But in js, array and list are very similar. It's just example. If you want to realize List, Make it with C, C++, Java something like that.

My next post is List with C.

How to make jQuery Plugin. Let's do that!

<script>
        // Like Function, There is no selector
        jQuery.reload = function () {
            location = location;
        };

        $(document).ready(function () {
           $.reload();
        });

        // It has selector, normal plugin
          jQuery.fn.myPluginMethod = function (options) {
            $(this).css('color', 'White');
            $(this).css('background', 'Black');
        };

        $(document).ready(function () {
          $('h1').myPluginMethod();
        });
</script>

Hi~! Today we make jquery plugin.

There is two way. That have selector or not.

- Make -

First.

jQuery.pluginName = function () {

};

It doen't have selector.

Second.

jQuery.fn.pluginName = function(options) {

};

It has selector.

- Use -

First.

$.pluginName();

Second

$(selector).pluginName();

We can use this two way.

That's it!

We can make jquery plugin~^^

Let's Coding~~~~~~~~!!