CODEWITHSUNDEEP
djangogoogle-mapsgoogle-maps-api-3
James L.
James L.

Reputation: 1153

Django: Implement View on google maps button on google maps

I have this code to show google maps in my django template and it's working fine. But I'd like to have a button on the google map that opens the map in a new google maps tab. Similar to the image below

enter image description here

<script>
function initialize() {
  var myLatlng = new google.maps.LatLng({{doctor.clinic.geolocation}});
  var mapOptions = {
    zoom: 15,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

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

google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="map-canvas"></div>

Upvotes: 0

Views: 1895

Answers (1)

Mauno V&#228;h&#228;
Mauno V&#228;h&#228;

Reputation: 9788

EDIT:

At time of a writing my answer, I had not seen that button in any of Google Maps JavaScript API so I decided to provide an possible implementation for it. However, only after that I found that it is actually a functionality of Google Maps Embed API.

Therefore, if you are not using Google Maps JavaScript API but wan't to use Google Maps Embed API instead, I recommend checking out: Google Maps Embed API (Viewmode)

Solution for Google Maps Embed API:

<iframe 
   width="300" 
   height="250" 
   frameborder="0" 
   style="border:0" 
   src="https://www.google.com/maps/embed/v1/view?key=<PLACE_HERE_YOUR_API_KEY>&center=-33.8569,151.2152&zoom=18">
   </iframe>

Solution for Google Maps JavaScript API:

However, because the question is tagged with google maps api 3. The solution explained below is also provided.

You can make either normal css button (or link) which you just lift over your map and a function which will open that map in correct url or make a custom button similar than google uses.

As an example, I ended up making normal css button which is sitting above the map, and once you click it it takes current location of the map (center) and zoom level - makes the url and opens it at the other tab.

Here is working js fiddle example.

Full code also below.

JavaScript and relevant part of the HTML:

<script type="text/javascript">

    // Handle to our map 
    var map;

    /**
     * Method for initializing the map
     *
     */
    function initialize() {

        var myLatlng = new google.maps.LatLng(-31.397, 150.644);
        var mapOptions = {
            zoom: 10,
            center: myLatlng
        };
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: ''
        });

    }

    /**
     * Method for opening google at other tab, based on current location at map and zoom
     *
     */
    function openGoogleMap() {

        // find out current zoom level
        var zoom = map.getZoom();

        // making the url
        var url = "http://maps.google.com/maps/place/" + 
            map.getCenter().lat() + "," + 
            map.getCenter().lng() + "/@" + 
            map.getCenter().lat() + "," + 
            map.getCenter().lng() + "," +
            zoom + "z";

        // opening map in new tab
        window.open(url);

    }

    google.maps.event.addDomListener(window, 'load', initialize);

</script>

<div id="content">
    <div id="map-canvas"></div>
    <button onclick="openGoogleMap()" class="button">View on google maps</button>
</div>

CSS: (I tried to style the button to look like same as with Embed API).

html, body, #map-canvas, #content {
    height: 600px;
    width: 600px;
    margin: 0px;
    padding: 0px
}
.button {
    padding: 1px; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; 
    box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; 
    border-top-left-radius: 2px; 
    border-top-right-radius: 2px; 
    border-bottom-right-radius: 2px; 
    border-bottom-left-radius: 2px; 
    background-color: white;
    font-size: 12px;
    font-family: Roboto, Arial;
    color: #3a84df;
    padding-bottom: 5px;
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 5px;
    border: 1px solid #CCCCCC;
    position: absolute;
    cursor: pointer;
    top: 4px;
    left: 4px;
}
.button:hover {
    text-decoration: underline;
}

For further reading:

Cheers.

Upvotes: 1

Related Questions