working with google maps

by jpeter06

HTML

<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=places"></script>
<div id="map-canvas"></div>
<input id="pac-input" class="controls" type="text"
        placeholder="Enter a location">

CSS

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

#pac-input {
        background-color: #fff;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        margin-top:5px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 400px;
      }

JavaScript

var map;
var markers = [];
var center=[40.424127, -3.711656];//Plaza de España
var atos=[40.434726, -3.632597];
function initialize() {
    // Create a simple map.
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 12,
        disableDefaultUI: true,
        center: {
            lat: 40.424127,
            lng:  -3.711656
        }
    });
    //add Search #pac-input
    addSearch(map);
    // añadimos estilo
    addStyle(map);    
    //Creamos posiciones aletorias del centro
    addRamdomPos(center,80,"Plaza de España");
    addRamdomPos(atos,3, "AtoS");
    
    //Clustering, sin funcion
    var mc = new MarkerClusterer(map);
    mc.addMarkers(markers);
}


//SEARCH
function addSearch(map){
      var input = /** @type {HTMLInputElement} */(
      document.getElementById('pac-input'));
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo('bounds', map);
    
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        infowindow.close();
        var place = autocomplete.getPlace();
        if (!place.geometry) {   return; }
    
        // If the place has a geometry, then present it on a map.
        if (place.geometry.viewport) {
          map.fitBounds(place.geometry.viewport);
        } else {
          map.setCenter(place.geometry.location);
          map.setZoom(17);  // Why 17? Because it looks good.
        }
    });
}

// CREAMOS POSICIONES ALEATORIAS
function addRamdomPos(center, numPos,texto){
    var fd=0.03;
    var cfd=-fd/2;
    for(var i=0;i<numPos;i++){
        var loc=new google.maps.LatLng(center[0]+(i!=0?Math.random()*fd+cfd:0),
                                       center[1]+(i!=0?Math.random()*fd+cfd:0));
        addMarker(loc,(i!=0?"Surtidor "+i:texto));
    };
}

// HELPER ADDMARKER and ICON


var icon2 = {
    path: "m 22.916666,12.500032 c -2.308373,0 -4.166666,1.858332...