Disable Autopan for google maps

  • danbailan

    #3983

    Hi all,

    A newbie here but enjoying the ride that is graphene – well up the last few days. I am building a travel guide site and as a newbie using instantwp so cannot give you an address (or can I?) – I am a total newbie to all this but have established myself a child theme with a functions file and css – the functionality of the theme, the forums are just brilliant and so intuitive and I have used Josh’s tutorials as well. But I cannot get the googlemaps things to work. I am placing markers on the map with the pop-up box but each time you press one it recentres on the pop-up and so you lose the markers off the bottom, off the top – bascially it moves all over. I want to turn off this auto pan feature/centering and maybe have the pop up box open outside the edge of the map if necessary? I have found this bit of code but do not know here to put it or really what lines to change etc etc. Hope someone can point me in the right direction.

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps disableAutoPan Demo</title>
    <script src="http://maps.google.com/maps/api/js?sensor=false"
    type="text/javascript"></script>
    </head>
    <body>

    <div id="map" style="width: 200px; height: 200px"></div>

    <script type="text/javascript">

    var myLatlng = new google.maps.LatLng(37.44, -122.14);
    var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map"), myOptions);

    var infowindow = new google.maps.InfoWindow({
    content: 'Test',
    disableAutoPan: true
    });

    var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Test Marker'
    });

    google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
    });

    </script>
    </body>
    </html>

    I would also dearly love to customise the pop-up box, change the edges, the font, the color etc. I am embedding the google iframe html in the page but cannot see where using firebug I can change the design options and how I should use/where to insert the code above – which I can dump as advised? My knowledge is very small so go easy on me!!!!

    Many thanks in advance

    dan

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

Do NOT follow this link or you will be banned from the site!