Django: Implement View on google maps button on google maps - django

Question

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

Answer 1

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:
Custom google controllers (How to make similar button than google uses).
How to construct google maps url
Cheers.