JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/29745515/marker-of-google-maps-javascript-api-v3

by brendaz

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas"></div>

CSS

html, body, #map-canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

var buildingObject = [
    [1, 'Mongkok Commercial Centre', '16 Argyle Street, Mongkok', 'CCCCCC', '75.00'],
    [2, 'Central Government Offices', '2 Tim Mei Ave, Admiralty', '999999', '70.00']
];
var map;

function getBuildingObject(index) {
    if (index >= buildingObject.length) {
        return;
    }
    // Global Variables
    var addressObject = null;
    var iconLink = null;
    var latLng = null;
    var marker = null;
    iconLink = "//chart.apis.google.com/chart?chst=d_map_spin&chld=0.6|0|" + encodeURIComponent(buildingObject[index][3]) + "|9|_|" + encodeURIComponent(buildingObject[index][4]);

    $.ajax({
        "url": "//maps.googleapis.com/maps/api/geocode/json?address=" + encodeURIComponent(buildingObject[index][2]) + "&sensor=false&region=hk&language=en"
    }).done(function (goc) {
        if (goc.results && goc.results.length > 0 && goc.results[0].geometry && goc.results[0].geometry.location) {
            addressObject = {
                address: goc.results[0].formatted_address,
                coor: {
                    latitude: goc.results[0].geometry.location.lat,
                    longitude: goc.results[0].geometry.location.lng
                }
            };

            latLng = new google.maps.LatLng(addressObject.coor.latitude, addressObject.coor.longitude);
            marker = new google.maps.Marker({
                map: map,
                position: latLng,
                icon: iconLink,
                title: addressObject.address
            });
        }
        getBuildingObject(index + 1);
    });

}

function initialize() {

    var mapOptions = {
        zoom: 10,
        center: new google.maps.LatLng(22.352734, 114.1277) // Hong Kong
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    getBuildingObject(0);

}

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