Google maps API v3 offset

Question

Here is example of ss when is page loaded

I want that info window then page loads looked like on this example

I found example how to do it but I can't for some reason implement it. thank you for your time How to offset the center of a Google maps (API v3) in pixels?

here is my code :

<div id="naMap">
</div>
<script>
document.addEventListener('DOMContentLoaded', drawMap);
    var map;
    function drawMap() {    
    var mapOptions = {
    zoom: 17,
    };
    map = new google.maps.Map(document.getElementById('naMap'),
      mapOptions);

     if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
        var pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);                                      
        var marker = new google.maps.Marker({
        position: pos,
        map: map,
        'title': 'Franklin',
        panControl: false,
        zoomControl: false,
        scaleControl: false,
        mapTypeControl: false
      });
     var popupContect =  '<div class="mapPopup">'
         popupContect +=    '<div class="mapPopupTitle">'
         popupContect +=        '<p> Choose Destination</p>'
         popupContect +=    '</div>'
         popupContect +=    '<div class="devider">'
         popupContect +=    '</div>'
         popupContect +=    '<div class="mapPopupSchools">'
         popupContect +=        '<div class="leftList">'
                                    //41 Forest Rd Bradford Woods, PA 15015
         popupContect +=            '<a href= "http://maps.apple.com/?q=40.63330,-80.07409"> Bradford Woods </a> </br>'
                                    //2401 rochester rd sewickley, Pa 15143
         popupContect +=            '<a href= "http://maps.apple.com/?q=40.58691,-80.09616"> Franklin </a> </br>'
                                    //9275 Peebles RdAllison Park, PA 15101
         popupContect +=            '<a href= "http://maps.apple.com/?q=40.57486,-80.00332"> Hosack </a> </br>'
                                    //602 W Ingomar Rd Pittsburgh, PA 15237
         popupContect +=            '<a href= "http://maps.apple.com/?q=40.58206,-80.05358"> Ingomar </a> </br>'
         popupContect +=            '<a href= "http://maps.apple.com/?q=40.58691,-80.09616"> FRANKLIN </a> </br>'
         popupContect +=            '<a href= "http://maps.apple.com/?q=40.58691,-80.09616"> FRANKLIN </a> </br>'
         popupContect +=            '<a href= "http://maps.apple.com/?q=40.58691,-80.09616"> FRANKLIN </a> </br>'
         popupContect +=        '</div>'
         popupContect +=        '<div class="rightList">'
         popupContect +=            '<a href= "http://maps.apple.com/?q=40.58691,-80.09616"> FRANKLIN </a> </br>'
         popupContect +=            '<a href= "http://maps.apple.com/?q=40.58691,-80.09616"> FRANKLIN </a> </br>'
         popupContect +=            '<a href= "http://maps.apple.com/?q=40.58691,-80.09616"> FRANKLIN </a> </br>'
         popupContect +=        '</div>'    
         popupContect +=    '</div>'
         popupContect += '</div>'


    var infowindow = new google.maps.InfoWindow({
        content: popupContect,
        maxWidth: 200,   
        });
        infowindow.open(map, marker);
        google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });
                map.setCenter(pos);
            }, function() {
                handleNoGeolocation(true);
            });
            } else {
        // Browser doesn't support Geolocation
                handleNoGeolocation(false);
            }
        }
    //Error handaling
    function handleNoGeolocation(errorFlag) {
        if (errorFlag) {
        var content = 'Error: The Geolocation service failed.';
        } else {
        var content = 'Error: Your browser doesn\'t support geolocation.';
        }

        var options = {
        map: map,
        position: new google.maps.LatLng(60, 105),
        content: content
    };

    var infowindow = new google.maps.InfoWindow(options);
    map.setCenter(options.position);
    }

    </script>

Answer 1

After trying to write 30-40 lines of code , there is always easier way to do it hehe:) mapsObject.panBy(200, 100); panBy method will allow you to offset ...