I'm trying to display a simple map but it doesn't work in IE7 (nothing is shown and also the div does't take any place at all).
it works fine in Chrome and Firefox. I haven't tried any other versions of IE
the template is Jade, but it shouldn't be a problem to understand (.class and #id)
div.pull-right(style="width: 450px")
div.well.well-small(style="width: 450px;")
div#map-holder
div.map#map_canvas
this is the map:
script
function initialize() {
var loc = new google.maps.LatLng(#{location.lat}, #{location.lng});
var mapOptions = {
center: loc,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var marker = new google.maps.Marker({
position: loc,
map: map,
animation: google.maps.Animation.DROP
});
}
CSS
#map-holder img {
max-width: none;
}
.map{
width:450px;
height: 400px;
margin-bottom: 20px;
}
This is not valid Javascript:
var loc = new google.maps.LatLng(#{location.lat}, #{location.lng});
Related
I want to move the info window outside of the marker. In this example infowindow is opened at the same point of the marker.
var anchor = new google.maps.MVCObject();
anchor.set("position",event.latLng);
infoWindow.open(map,anchor);
A google.maps.Marker is a valid anchor for an InfoWindow.
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent("some content");
infoWindow.open(map,marker);
proof of concept fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map
});
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent("some content");
infoWindow.open(map, marker);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
For example , If you use embedded google map.
You can make your google map responsive with the code below
using iframe (simple iframe)
<div class="ggmap">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d212270.5451230493!2d-84.42060395!3d33.7677129!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f5045d6993098d%3A0x66fede2f990b630b!2sAtlanta%2C+GA!5e0!3m2!1sen!2sus!4v1396981185525" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.ggmap iframe,
.ggmapr object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
However I use google map by javascript like this below.
no iframe (simple no-iframe)
<div id="map_canvas" style="width:600px; height:450px"></div>
function writeMap(latitude,longitude) {
var latlng = new google.maps.LatLng(latitude,longitude);
var opts = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}
$(document).ready( function(){
writeMap(latitude,longitude);
});
In this case, google map could not be responsive.
How can I make this google map responsive??
Make the height and width percentages of the container (and make sure the container has a size).
var latitude = 42.0;
var longitude = -72.0;
function writeMap(latitude,longitude) {
var latlng = new google.maps.LatLng(latitude,longitude);
var opts = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}
$(document).ready( function(){
writeMap(latitude,longitude);
});
body, html, #map_canvas {
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" ></div>
I have an online map that contains a ground-overlay image, and would like to make the image semi-transparent so that the base map will show through. Is it possible to add a transparency value to this overlay?
http://www.tpwd.state.tx.us/fishboat/fish/recreational/lakes/ingulf1c.phtml
Here's the code for the ground overlay:
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(25.71438633861514, -98.33555959121725),
new google.maps.LatLng(30.40813339247205, -93.57953893270167));
function initialize() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(28.0041,-96.3618),
zoom: 7,
mapTypeId: 'roadmap'
});
overlay = new google.maps.GroundOverlay(
'/fishboat/fish/recreational/lakes/images/statemaps/gulfregion.gif',
imageBounds);
overlay.setMap(map);
There is a setOpacity method of the GroundOverlay (works for me with values between 0 and 1.0):
var overlay = null;
function initialize() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(28.0041,-96.3618),
zoom: 7,
mapTypeId: 'roadmap'
});
overlay = new google.maps.GroundOverlay('http://www.tpwd.state.tx.us/fishboat/fish/recreational/lakes/images/statemaps/gulfregion.gif',
imageBounds);
overlay.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
function setOpacity() {
var opacityStr = document.getElementById('opacity').value;
var opacity = parseFloat(opacityStr);
overlay.setOpacity(opacity);
}
<input type="text" id="opacity" value="0.2"></input>
<input type="button" value="setOpacity" onclick="setOpacity();"></input>
working example - proof of concept fiddle
code snippet:
var overlay = null;
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(28.0041, -96.3618),
zoom: 7,
mapTypeId: 'roadmap'
});
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(25.71438633861514, -98.33555959121725),
new google.maps.LatLng(30.40813339247205, -93.57953893270167));
overlay = new google.maps.GroundOverlay(
'http://www.tpwd.state.tx.us/fishboat/fish/recreational/lakes/images/statemaps/gulfregion.gif',
imageBounds);
overlay.setMap(map);
map.fitBounds(imageBounds);
}
function setOpacity() {
var opacityStr = document.getElementById('opacity').value;
var opacity = parseFloat(opacityStr);
overlay.setOpacity(opacity);
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#map {
width: 100%;
height: 90%;
}
<div id="map"></div>
<input type="text" id="opacity" value="0.2" />
<input type="button" value="setOpacity" onclick="setOpacity();" />
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
I want to show user current location or approximate location on google maps in my web site using asp.net c#.Is it possible??? If it is kindly help me.I saw many tutorials but fail.
First you need to get google maps API key for your localhost, this link provides details on how to do that:
http://www.aspdotnet-suresh.com/2013/01/generate-google-maps-api-key-for.html
Second in your default.aspx page do this:
script tags:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
</script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places">
</script>
<script type="text/javascript">
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
alert("Geo Location is not supported on your current browser!");
}
function success(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var city=position.coords.locality;
var myLatlng = new google.maps.LatLng(lat, long);
var myOptions = {
center: myLatlng,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title: "lat: " + lat + " long: " + long
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({ content: "<b>User Address</b><br/> Latitude:"+lat+"<br /> Longitude:"+long+"" });
infowindow.open(map, marker);
}
</script>
in body tag simply include a empty div:
<div id="map_canvas" style="width: 800px; height: 500px"></div>
css:
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
this is the result you should get:
Tutorial: http://www.aspdotnet-suresh.com/2013/01/show-user-current-location-on-google.html
This question already has answers here:
Google Map Infowindow not showing properly
(6 answers)
Closed 8 years ago.
I have created a simple map using API3. However, the zoom controls on the top left look "Squashed" - a they are not displaying properly. The rest of the map is fine. The weird thing is that I have used the same method as for previous sites, where things work well.
Here's some code:
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var marker;
var markersArray=[];
var html; //to create urls
var directionsVisible = new Boolean();
directionsVisible = false;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var orchards = new google.maps.LatLng(52.512805,-2.76007);
var myOptions = {
zoom:14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: orchards,
panControl: false
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
addMarker(orchards);
}
The issue should be because of universal img { max-width: 100%; }
Try this one in to your css
.gmnoprint img {
max-width: none;
}
Initially I face same problem, then later on I realize
google.maps.event.addDomListener(window, 'load', initialize);
play very important role.
I added it and for me it works.
Checkout following code.
CSS code
<style>
#divmap {
height: 300px;
width:100%;
margin: 10px;
padding: 10px;
}
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
</style>
For JS
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(21,78),
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true
}
var map = new google.maps.Map(document.getElementById("divmap"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
and final html
<div id="divmap"></div>
if you are using the Dreamweaver fluid grid feature your default set up should look like this:
img, object, embed, video {
max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}
Try this:
object, embed, video {
max-width: 100%;
}
#map_canvas img { max-width: none; }
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}
just replace the code as it is.