HTML
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<!-- Google Maps API -->
<script src="//maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<div id="loadgooglemap" class="map"></div>
JAVASCRIPT
jQuery(function($) {
//LatLng object
var latlng = new google.maps.LatLng(-17.784518, -63.182308);
var marker = "http://codigo82.com/img_apoyo/marker.png";
var options = {
scrollwheel: false,
//draggable: false,
zoom: 16, // This number can be set to define the initial zoom level of the map
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP, //Map type ROADMAP/SATELLITE/HYBRID/TERRAIN
// IMPORTANT - The next line define the map style
styles: [{"featureType":"all","elementType":"all","stylers":[{"saturation":-100},{"gamma":0.5}]}]
};
var map = new google.maps.Map(document.getElementById('loadgooglemap'), options);
//Marker in pixels
var image = new google.maps.MarkerImage(marker),
new google.maps.Size(44, 44),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 18,42.
new google.maps.Point(22, 30)
);
// Add Marker
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(latlng),
map: map,
icon: image
});
// Add listener for a click on the pin
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.open(map, marker1);
});
// Add information window
var infowindow1 = new google.maps.InfoWindow({
content: createInfo('https://codepad.co/img/avatars/avatar_276px.png', 'My City')
});
// Create information window
function createInfo(title, content) {
return '<div class="infowindow"><strong>'+ title +'</strong><br/><div>'+content+'</div></div>';
}
});</script>
