1

Here is example of ss when is page loaded

enter image description here

I want that info window then page loads looked like on this example enter image description here

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>
Community
  • 1
  • 1
user2432772
  • 235
  • 1
  • 4
  • 17
  • I know this doesn't answer your question, but I was able to accomplish something similar by slowly incrementing lat/long. – DeFeNdog Sep 07 '14 at 22:36
  • thank you , modifying latlng parameters does not work for me, can you suggest where to modify ? – user2432772 Sep 07 '14 at 23:06
  • possible duplicate of [How to offset the center point in Google maps api V3](http://stackoverflow.com/questions/10656743/how-to-offset-the-center-point-in-google-maps-api-v3/10666030#10666030) – geocodezip Sep 07 '14 at 23:27
  • Basically you don't need to set the center at all, the API will automatically try to find a proper center based on the size of the InfoWindow – Dr.Molle Sep 08 '14 at 10:06
  • Again, I'm not sure if this applies to your situation. Here's what I did: var centerPos = new google.maps.LatLng(40.58691,-80.09616); // set lat long manually map.setCenter(centerPos); – DeFeNdog Sep 08 '14 at 17:26

1 Answers1

2

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 ...

user2432772
  • 235
  • 1
  • 4
  • 17