gmaps

by slawe

HTML

<script src="http://maps.googleapis.com/maps/api/js?v=3&amp;amp;sensor=false"></script>
<div id="gmap"></div>

CSS

#gmap{
    display: block;
    position: relative;
    clear: both;
    width: 100%;
    height: 300px;
    border: 3px solid #000;
}

JavaScript

var map;

google.maps.event.addDomListener(window, "load", function() {

    var map = new google.maps.Map(document.getElementById("gmap"), {
        center: new google.maps.LatLng(44.8099996, 20.4351777),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infoWindow = new google.maps.InfoWindow();

    function createMarker(options, html) {
        var marker = new google.maps.Marker(options);
        if (html) {
            google.maps.event.addListener(marker, "click", function() {
                infoWindow.setContent(html);
                infoWindow.open(options.map, this);
            });
        }
        return marker;
    }

    var image = {
        url: 'http://www.yourtechs.com/_/rsrc/1324720835063/contact-us/Google_Maps_Marker.png',
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(12, 59)
    };
    var marker1 = createMarker({
        position: new google.maps.LatLng(44.8110912, 20.4366307),
        map: map,
        icon: image
        }, "<h2>SONA</h2><p></p>");
    });