Google maps Simple Map Marker
based on http://jsfiddle.net/Shreerang/6VWuT/
HTML
<script src="http://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<body onload="criaMapa()">
<div id="map_container" style="position: absolute; width: 100%; height: 80%;">
<div id="map" style="width: 100%; height: 100%">
</div>
</div>
</body>
CSS
html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
JavaScript
var mapOptions = {
zoom: 17,
minZoom: 4,
maxZoom: 20,
center: {lat: 0, lng: 0},
fullscreenControl: true
}
var mcOptions = {
gridSize: 20,
maxZoom: 20
};
itens = [
{lat: -22.9187655, lng: -43.258619},
{lat: -23.5245363, lng: -51.6667318},
{lat: -23.335311, lng: -51.17296}
];
var markers = [];
var bounds = new google.maps.LatLngBounds();
function criaMapa() {
var map = new google.maps.Map(document.getElementById("map"), {
center: {lat: -34.397, lng: 150.644},
zoom: 5,
disableDefaultUI: true
});
var marker = [];
var infowindow = [];
$.each(itens, function (idx, obj) {
var latLng = obj;
marker[idx] = new google.maps.Marker({
position: latLng,
title: 'teste',
animation: google.maps.Animation.DROP,
icon: 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png',
map: map
});
var infowindow = new google.maps.InfoWindow();
var sBalaoConteudo = '\
<div class="balao-mapa">\
<h1>' + 'obj.Loja_vch_Titulo' + '</h1>\
<h2>' + 'obj.Loja_vch_Descricao' + '</h2>\
</div>';
infowindow.setContent(sBalaoConteudo);
google.maps.event.addListener(marker[idx], 'click', function () {
infowindow.open(map, marker[idx]); // click on marker opens info window
});
bounds.extend(marker[idx].getPosition());
});
var infoWindow = new google.maps.InfoWindow({map: map});
map.fitBounds(bounds);
}