I am trying to add google map in bootstrap map but its not working for me. When i click on link, it opens modal window but map is not showing properly, it is working fine before but i dont know, what happened now.
Live link, link to site
Here is my code:
JS:
var map;
myLatlng = new google.maps.LatLng(4.7123724,-74.0704297);
function initialize() {
var mapOptions = {
center: myLatlng,
zoom: 18,
mapTypeControl: false,
center:myLatlng,
panControl:false,
rotateControl:false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var contentString = '<div id="mapInfo">'+
'<strong>Carrera 58 # 127-29</strong><br>' +
'Bogotá, Cundinamarca<br>'+
'Colombia'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Carrera 58 # 127-29, Bogotá, Cundinamarca, Colombia",
maxWidth: 200,
maxHeight: 200
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
//start of modal google map
$('#mapmodals').on('shown.bs.modal', function () {
google.maps.event.trigger(map, "resize");
map.setCenter(myLatlng);
});
//end of modal google map
HTML:
<i class="icon"></i> Launch Map Modal
<!-- MAP -->
<div class="modal fade" id="mapmodals">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myCity">Carrera 58 # 127-29, Bogotá, Cundinamarca, Colombia</h4>
</div>
<div class="modal-body">
<div class="map_container">
<div id="map_canvas" class="map_canvas"></div>
</div>
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Trigger the resize-event of the map when the modal has been opened:
jQuery('#mapmodals')
.on('shown.bs.modal',
function(){
google.maps.event.trigger(map,'resize',{});
map.setCenter(myLatlng);
});
Add this jquery plugins
http://maps.google.com/maps/api/js?sensor=false&libraries=places'
locationpicker.jquery.js
Your code is not properly working for me so I add
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
Thanks,
Related
I'm developing a website that requires to get and show user's location.
However, I get this error message every time I run the project:
this is my code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (p) {
var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
var mapOptions = {
center: LatLng,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude
});
google.maps.event.addListener(marker, "click", function (e) {
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(marker.title);
infoWindow.open(map, marker);
});
});
} else {
alert('Geo Location feature is not supported in this browser.');
}
</script>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
</div>
</form>
</body>
</html>
What's I'm doing wrong???
can anyone help please??
I solved my problem !
I just added this line of code to add my API Key:
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=MY_KEY" async="" defer="defer" type="text/javascript"></script>
I am using two Google maps with set sizes inside a single Bootstrap row split into two "col-md-6". The problem is that I can't get the maps to centre within the columns.
I've tried placing the maps within another div, and applying a class such as:
.centre {
margin-left: auto;
margin-right: auto;
}
I have used this approach on the containing div and the map canvas itself.
I have also tried the Bootstraps center-block class.
Why won't this work? Is it because the map is generated by the script? However I also used some other script widget which I could centre no problem.
Here is my code:
<div class="row">
<div class="col-md-6">
<div class="center-block">
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>
<div style='overflow:hidden;height:400px;width:400px;'>
<div id='gmap_canvas' style='height:400px;width:400px;'></div>
<style>#gmap_canvas img{max-width:none!important;background:none!important}</style>
</div>
<a href='https://embed-map.org/'>adding google maps to website</a>
<script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=de6f66c1083e8292c0be178f836c7b9580eaf39f'></script>
<script type='text/javascript'>
function init_map() {
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(53.5963138,-2.2334897000000637),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(53.5963138,-2.2334897000000637)
});
infowindow = new google.maps.InfoWindow({
content: '<strong>The Cherwell Wellbeing Hub</strong><br>Cherwell Avenue<br>OL10 4SY Heywood<br>'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
</div>
</div>
<div class="col-md-6">
<div class="center-block">
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>
<div style='overflow:hidden;height:400px;width:400px;'>
<div id='gmap_canvas1' style='height:400px;width:400px;'></div>
<style>#gmap_canvas img{max-width:none!important;background:none!important}</style>
</div>
<script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=79bf837985bd36410db02fbfc1b92f01d77d4475'></script>
<script type='text/javascript'>
function init_map() {
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(53.41196129999999,-2.7916708999999855),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('gmap_canvas1'), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(53.41196129999999,-2.7916708999999855)
});
infowindow = new google.maps.InfoWindow({
content: '<strong>Grenfell House</strong><br>Widness Road<br>WA8 6AX Widnes<br>'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
</div>
</div>
</div>
Works fine by me: http://codepen.io/ruchiccio/pen/LZZJaP
All you need is text-align:center on the divs housing the google maps.
I'm trying to use Google map API in the ASR.NET mvc. I want to use DirectionsRenderer. I read the documentation about that here and trying to use the example
But this map is not render in my site. Where maybe be problem?
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MY_KEY&sensor=false">
</script>
<script>
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(41.850033, -87.6500523)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions-panel'));
var control = document.getElementById('control');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP].push(control);
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<div id="control">
<strong>Start:</strong>
<select id="start" onchange="calcRoute();">
<option value="chicago, il">Chicago</option>
<option value="st louis, mo">St Louis</option>
</select>
<strong>End:</strong>
<select id="end" onchange="calcRoute();">
<option value="chicago, il">Chicago</option>
<option value="st louis, mo">St Louis</option>
</select>
</div>
<div id="map-canvas" style="float: left; width: 70%; height: 100%">
</div>
<div id="directions-panel" style="float: right; width: 30%; height: 100%">
</div>
</body>
make sure that you've set the right key in the script src="http://maps.googleapis.com/maps/api/js?key=MY_KEY&sensor=false" , as I've tried your code with my own key and it works.. if you want the function of calcRoute(); to be called on page load just add this line in the end of initialize function calcRoute();
The default infoWindow size is way too big for me. I want it to be much smaller can I can't figure out how to do it. I've tried setting a maxWidth parameter on my infoWindow constructor like this
var infowindow = new google.maps.InfoWindow({'maxWidth':'10px'});
and setting the CSS width like this
<style type="text/css">
#infoWindow {
width: 10px;
}
</style>
but that only seems to change the size of the text wrapping, not the actual box. How do I change the size of the infoWindow box?
Here is my code.
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<style type="text/css">
#infoWindow {
width: 10px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
<script type="text/javascript">
var cityList = [
['Chicago', 41.850033, -87.6500523, 1],
['Illinois', 40.797177,-89.406738, 2]
];
var demoCenter = new google.maps.LatLng(41,-87);
var map;
function initialize()
{
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: demoCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
addMarkers();
}
function addMarkers()
{
var marker, i;
var infowindow = new google.maps.InfoWindow({'maxWidth':'10px'});
for (i = 0; i < cityList.length; i++)
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
map: map,
title: cityList[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
var contentString = '<div id="infoWindow">'
+'<div id="bodyContent">'
+'<p>'
+ "This location is:<br>"
+ marker.title
+'</p>'
+'</div>'
+ '</div>';
return function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
}
})(marker, i));
}
}
</script>
</head>
<body onload="initialize()">
<div id="basic-map" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
</div>
</div>
</body>
</html>
The native infoWindow has a minimum size. If it is to big for you, you need to look at using an alternative solution like infoBubble or InfoBox
your CSS section doesn't do anything because var infoWindow is not the same as <div id="infoWindow">
The documentation says:
maxWidth: Maximum width of the infowindow, regardless of content's width. This value is only considered if it is set before a call to
open. To change the maximum width when changing content, call close,
setOptions, and then open.
Also what Larry, (geocodezip), said. (he types faster than me) ;-)
This is a drop down Div - which works with everything except GoogleMap.
I get half the map showing or maybe a 1/4 of it... When I get rid of the div's all works fine... Or is there a workaround without div's? Ideas... I tried declaring table, p etc... No luck...
Javascript Drop Down Code and Div calls
<script type="text/javascript">
function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
myLayer.style.display="block";
myLayer.backgroundPosition="top";
} else {
myLayer.style.display="none";
}
}
</script>
<div class=catlist>
<table border=0 cellpadding=4>
<tr>
<td valign=middle><img src="images/plus.png" onclick="javascript:showElement('ed')"></td>
<td valign=middle><a href="#" onclick="javascript:showElement('ed')"><b>Edit GPS
Map</b></a></td>
</tr></table>
</div>
<div class="qlist" id="ed" style="display:none;">
<div id="map" style="width: 500px; height: 250px;"></div>
</div>
Adding the Google Javascript...
This is the actual Google Maps Javascript...
Cold Fusion Plots the # markers...
This works fine outside of divs...
Code suggested above works to display the correct map interface...
But the centering of the plot is not working...
And marker shows at top left corner with above code provided...
<div id="map" style="width: 500px; height: 250px;"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript">
</script>
<script type="text/javascript">
var locations = [
["#bsname#", #gpslat#, #gpslong#, #busid#],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: new google.maps.LatLng(#gpslat#, #gpslong#),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
The changes I made were:
triggering a resize when the div is expanded
centering the map after the resize
making map and locations variables global.
The jsfiddle is here:
http://jsfiddle.net/Mgp9z/9
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP };
// CHANGED locations and map now global so they refer to the same thing in both initialize and showElement
var locations = [
["a", 40.2, -88.8, "k"],
];
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
// CHANGED
zoom: 10,
center: new google.maps.LatLng(40.2, -88.8),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
myLayer.style.display="block";
myLayer.backgroundPosition="top";
// *** add the trigger here ***
google.maps.event.trigger(map, 'resize');
var mylat=locations[0][1];
var mylng=locations[0][2];
map.setCenter(new google.maps.LatLng(mylat,mylng));
} else {
myLayer.style.display="none";
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div class=catlist>
<table border=0 cellpadding=4>
<tr>
Lat: <input type="text" id="mylat" value="40.2">
Lng: <input type="text" id="mylng" value="-88.8">
<!-- <td valign=middle><img src="images/plus.png" onclick="javascript:showElement('ed')"></td> -->
<td valign=middle><a href="#" onclick="javascript:showElement('ed')"><b>Edit GPS
Map</b></a></td>
</tr></table>
</div>
<div class="qlist" id="ed" style="display:none;">
<div id="map" style="width: 500px; height: 250px;"></div>
</div>
</body>
</html>
Making the map resize after you show the div should work:
From the docs: "Developers should trigger this event on the map when the div changes size:" google.maps.event.trigger(map, 'resize') .
EDIT - I'll be more specific, please try again
function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
myLayer.style.display="block";
myLayer.backgroundPosition="top";
// *** add the trigger here ***
google.maps.event.trigger(map, 'resize')
} else {
myLayer.style.display="none";
}
}
Demo: http://jsfiddle.net/Mgp9z/