CODEWITHSUNDEEP
javascriptgoogle-maps
Dadou
Dadou

Reputation: 1008

Google Maps return to origin

I'm using a pretty basic Google Maps api and I'm wondering if we can have a "Go back to origin" type of button so that we are redirected back to the original position (and maybe zoom?) as to refresh the map.

You can find a jsFiddle here.

Sample Code

Current Javascript

function initialize() {
        /* ----- Variables ---------------------------------- */
        var myLat = 46.331302;
        var myLong = -72.554991;
        var iconURL = 'img/logo-map-marker-large.png';
        var myClose = "http://www.google.com/intl/en_us/mapfiles/close.gif";
        var bbl_bg = "url('img/tipbox.gif') no-repeat";
        /* ----- Scripted ----------------------------------- */
        var loc,map,marker,infobox;
        loc=new google.maps.LatLng(myLat,myLong);
        map=new google.maps.Map(document.getElementById("map"),
          {zoom:15,center:loc,mapTypeId:google.maps.MapTypeId.ROADMAP});
        marker=new google.maps.Marker({
          map:map,position:loc,
          icon:iconURL,visible:true});
        infobox=new InfoBox({
          content:document.getElementById("infobox"),
          disableAutoPan:false,
          maxWidth:150,
          pixelOffset:new google.maps.Size(-140,0),
          zIndex:null,
          boxStyle:{background:bbl_bg,
            opacity:0.75,
            width:"320px"
          },
          closeBoxMargin:"2px 2px 2px 2px",
          closeBoxURL:myClose,
          infoBoxClearance:new google.maps.Size(1,1)
        });
        google.maps.event.addListener(marker,"click",function(){
          infobox.open(map,this);
          map.panTo(loc)
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);

Current HTML includes an "info bubble"

<div id="map" style="width: 100%; height: 300px"></div>
<div class="infobox-wrapper">
    <div id="infobox">
        <h3>Publi Design inc.</h3>
        <p>
            505, rue Père-Daniel <br />
            Trois-Rivières (Québec) G9A 5Z7  <br /> <br />

            <a href="tel:8193734071">819 373.4071</a> | 
            [email protected]
        </p>
    </div>
</div>

Perhaps what I'm looking for is another function I haven't found, but I think this would come in handy when we try to see where the origin is and what's around it (landmarks, streets, etc.).

Upvotes: 1

Views: 200

Answers (3)

geocodezip
geocodezip

Reputation: 161384

Add this to the end of your initialize routine (and add the button with id="reset"):

google.maps.event.addDomListener(document.getElementById("reset"), 'click', function() {
    map.setCenter(loc);
    map.setZoom(15);
});

jsfiddle

Upvotes: 1

Germain
Germain

Reputation: 380

You have to store it in a variable. Google Maps API doesn't provide you these settings.

Upvotes: 0

Adam Jenkins
Adam Jenkins

Reputation: 55772

You can call the setCenter and setZoom methods on the map at any time. If you want your map to "go back to origin", then all you need to be able to do is store your starting location and starting zoom level in variables that you can later access.

Upvotes: 1

Related Questions