[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.