I want to use Google map in my we page. i used Gmaps.js for it. my code is bellow:
<div class="row col-md-10 col-md-offset-1">
<br>
<br>
<br>
<label for="address">{{$MapLabel}}</label>
<div class="span11">
<div id="map"></div>
</div>
<br>
<br>
<div class="row">
<div class="col-md-4">
<button id="button_Google_Serach" type="button" class="btn btn-info" >جستجو</button>
</div>
<div class="col-md-8">
<input type="text" id="address_with_google" name="address_with_google" placeholder="{{$SearchLabel}}" class="form-control" />
</div>
</div>
<input type="text" hidden id="latGoogleMap">
<input type="text" hidden id="lngGoogleMap">
<br>
</div>
when i write bellow code, i don't see any google map div same bellow image.
var map;
$(document).ready(function(){
map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333,
zoom: 16,
click: function(e){
map.removeMarkers();
map.addMarker({
lat: e.latLng.lat(),
lng: e.latLng.lng(),
draggable: true
});
//Set google lat in hidden input
$('#latGoogleMap').val( e.latLng.lat());
//Set google lng in hidden input
$('#lngGoogleMap').val(e.latLng.lng());
}
});
});
but when i remove that code i see this:
How must i do?
Use height and widthfor google map:
map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333,
width: '95%',
height: '350px',
zoom: 16,
click: function(e){
map.removeMarkers();
map.addMarker({
lat: e.latLng.lat(),
lng: e.latLng.lng(),
draggable: true
});
//Set google lat in hidden input
$('#latGoogleMap').val( e.latLng.lat());
//Set google lng in hidden input
$('#lngGoogleMap').val(e.latLng.lng());
}
});
Related
I am trying to show a google map on a bootstrap tab, however the map only shows correctly when the tab is clicked on the second time. On the first click, there is a lot of grey area and the map needs to resize.
I've looked at this but nothing there helps.
js:
<script type="text/javascript">
$('a[href="#sectionB"]').on('shown', function (e) {
initMap();
});
function initMap() {
var uluru = {lat: -34.031342, lng: 18.577419};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: uluru,
mapTypeId: 'satellite'
});
var marker = new google.maps.Marker({
position: {lat: -34.031342, lng: 18.577419},
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYKEYHERE&callback=initMap">
</script>
html:
<div class="col-md-12">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#sectionA">Details</a></li>
<li><a data-toggle="tab" id = "sectionb" href="#sectionB" onclick="initMap(); return false;">Location</a></li>
</ul>
<div class="tab-content">
<div id="sectionA" class="tab-pane fade in active">
<div class="col-md-8" style = "padding-top: 3%">
</div>
</div>
<div id="sectionB" class="tab-pane fade">
<div class="row">
<div class="col-md-8">
<div id ="map" style="width:400px;height:400px;">
</div>
</div>
</div>
I am trying to implement a feature on my site where certain list of places are displayed next to a Map that when a user selects a place in the list it automatically sets the Name, Longitude, and Latitude on the map for the user to identify where it is.
Unfortunately, I got stuck in changing the value of the Name, Longitude, and Latitude in the map if the user selects a different place in the list.
I referred to this stackoverflow question
so far I have come up with this code.
HTML
<div class="col-md-12">
<div class="col-md-3">
<div class="list-group">
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
</div>
</div>
<div class="col-md-9">
<div id="map"></div>
</div>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
function initMap(mapLocation) {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < mapLocation; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(mapLocation[i][1], mapLocation[i][2]),
map: map
});
}
}
$('.list-group-item').on('click', function (e) {
var previous = $(this).closest(".list-group").children(".active");
previous.removeClass('active'); // previous list-item
$(e.target).addClass('active'); // activated list-item
var locations = $('.list-group').find('.active').data('itemtype');
initMap(locations);
});
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3qsbdbcouUb6qSaBxQCuiEDI03JA-zLc&callback=initMap">
</script>
please help me to be on track with the development.
Thank you in advance
A solution using data attributes. I modified your data attributes slightly because using...
data-itemtype="['Maroubra Beach', '-33.950198', '151.259302']"
...doesn't give you an array to use, just a string that looks like an array.
HTML:
<div class="container">
<div class="row">
<div class="list-group col-sm-2">
<a id="0" href="#" class="list-group-item" data-name='Maroubra Beach' data-lat='-33.950198' data-lng='151.259302'>Cras justo odio</a><br />
<a id="1" href="#" class="list-group-item" data-name='Coogee Beach' data-lat='-33.923036' data-lng='151.259052'>Dapibus ac facilisis in</a><br />
<a id="3" href="#" class="list-group-item" data-name='Cronulla Beach' data-lat='-34.028249' data-lng='151.157507'>Morbi leo risus</a>
</div>
<div class="col-sm-10">
<div id="map_canvas"></div>
</div>
</div>
</div>
Javacript:
(function(Mapping, $, undefined) {
var self = this;
function Initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
self.map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
self.infoWindow = new google.maps.InfoWindow();
$('.list-group-item').each(function() {
var $this = $(this);
var pos = new google.maps.LatLng($this.data('lat'), $this.data('lng'));
var marker = new google.maps.Marker({
position: pos,
map: self.map
});
$this.click(function() {
self.map.panTo(pos);
self.infoWindow.setContent($this.data('name'));
self.infoWindow.open(self.map, marker);
$this.siblings().removeClass('active');
$this.addClass('active');
});
});
}
Initialize();
})(window.Mapping = window.Mapping || {}, jQuery);
JSFiddle
I have implemented my map, however, when i view the map on a mobile or a resolution lower than 768px the map renders incorrectly. It seems to be loading all of the map tiles in the top left hand corner and then again in full and correctly?
I have tried to set the resize event but this has no effect.
Heres my code
<ui-gmap-google-map zoom="10" center="map.center" events="map.events" class="col-md-12 map_canvas">
<ui-gmap-marker ng-repeat="m in markers" coords="m.coords" idkey="m.id">
<ui-gmap-window ng-if="m.response">
<div class="google-window row-fluid">
<div class="row-fluid">
<h1>Driver Detail</h1>
<div class="row-fluid">
<div class="col-md-4 row-title">Name:</div>
<div class="col-md-8">{{m.response.lastName}}, {{m.response.firstName.substring(0, 1)}}</div>
</div>
<div class="row-fluid">
<div class="col-md-4 row-title">VRM:</div>
<div class="col-md-8">{{m.response.vrm}}</div>
</div>
<div class="row-fluid">
<div class="col-md-4 row-title">Lat/Lng:</div>
<div class="col-md-8">{{m.response.latitude + "/" + m.response.longitude}} <i class="fa fa-map-marker"></i>
</div>
</div>
</div>
</div>
</ui-gmap-window>
</ui-gmap-marker>
</ui-gmap-google-map>
And my JS
$scope.map = {
zoom: 10,
center: [{
latitude: response[0].latitude,
longitude: response[0].longitude
}, {
latitude: response[response.length - 1].latitude,
longitude: response[response.length - 1].longitude
}],
options: {
// draggable: false
},
events: {
tilesloaded: function (map, eventName, args) {
google.maps.event.trigger(map, 'resize');
}
}
};
Normal desktop resolution
After resize < 768px
The issue seems to occur when the zoom level is less than 14. very odd. if i set the zoom level above this, the problem goes away.
This may well be a setting within the angular-google-maps lib that can be set.
<ui-gmap-google-map zoom="13" center="map.center" events="" class="col-md-12 google-map">
I want to show two google maps having different latitude and longitude in two div class. For displaying google map I have used same script,but I have changed lat long coordinate in script.I have two div class having different class name and call scripts.But I am only getting only one map.Here is my code
<div class="section s5">
<div class="inner">
<div class="text">
<h1>CONTACT US</h1>
</div>
<div class="contact-right-1">
<h1>Find me at-</h1>
<p><strong>MOHAMMAD IMRAN</strong><br>
F-18/22 Second Floor <br>
Jogabai Extn, Batla House<br>
New Delhi-110025<br>
Mobile No- +91 9582307425<br>
Email: mohd.imran980#gmail.com</p>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script><div style='overflow:hidden;height:300px;width:270px;'><div id='gmap_canvas' style='height:300px;width:270px;'></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div> <a href='http://www.quotes.as/'>Quotes.as</a> <script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=2a4ab4f7bff1a5593997160db587449f2e987dcb'></script><script type='text/javascript'>function init_map(){var myOptions = {zoom:12,center:new google.maps.LatLng(31.6963654,75.45983739999997),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(31.6963654,75.45983739999997)});infowindow = new google.maps.InfoWindow({content:'<strong>New Delhi</strong><br>F-18/22 Batla House<br>110025 New Delhi<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 class="contact-right-2">
<h1>Find also me at-</h1>
<p>MOHAMMAD IMRAN<br>
97/170 Readymade Beconganj <br>
Kanpur-110025<br>
Mobile No- +91 9582307425<br>
Tele: 011-93532363<br>
Email: mohd.imran980#gmail.com</p>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script><div style='overflow:hidden;height:300px;width:270px;'><div id='gmap_canvas' style='height:300px;width:270px;'></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div> <a href='http://www.quotes.as/'>Quotes.as</a> <script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=4299b549b28f8bb7b8e338657ffb40a26a4276c2'></script><script type='text/javascript'>function init_map(){var myOptions = {zoom:12,center:new google.maps.LatLng(26.4679038,80.3411542),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(26.4679038,80.3411542)});infowindow = new google.maps.InfoWindow({content:'<strong>Kanpur</strong><br>97/171 Beconganj Kanpur<br>208001 kanpur<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>
Please somebody help..
Please check it,in your code ID is same so its not working but here I have change it
<div class="section s5">
<div class="inner">
<div class="text">
<h1>CONTACT US</h1>
</div>
<div class="contact-right-1">
<h1>Find me at-</h1>
<p><strong>MOHAMMAD IMRAN</strong><br>
F-18/22 Second Floor <br>
Jogabai Extn, Batla House<br>
New Delhi-110025<br>
Mobile No- +91 9582307425<br>
Email: mohd.imran980#gmail.com</p>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>
<div style='overflow:hidden;height:300px;width:270px;'>
<div id='gmap_canvas2' style='height:300px;width:270px;'>
</div>
</div>
<a href='http://www.quotes.as/'>Quotes.as</a>
<script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=2a4ab4f7bff1a5593997160db587449f2e987dcb'></script>
<script type='text/javascript'>function init_map(){var myOptions = {zoom:12,center:new google.maps.LatLng(31.6963654,75.45983739999997),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas2'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(31.6963654,75.45983739999997)});infowindow = new google.maps.InfoWindow({content:'<strong>New Delhi</strong><br>F-18/22 Batla House<br>110025 New Delhi<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 class="contact-right-2">
<h1>Find also me at-</h1>
<p>MOHAMMAD IMRAN<br>
97/170 Readymade Beconganj <br>
Kanpur-110025<br>
Mobile No- +91 9582307425<br>
Tele: 011-93532363<br>
Email: mohd.imran980#gmail.com</p>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script><div style='overflow:hidden;height:300px;width:270px;'><div id='gmap_canvas1' style='height:300px;width:270px;'></div><style>#gmap_canvas1 img{max-width:none!important;background:none!important}</style></div> <a href='http://www.quotes.as/'>Quotes.as</a> <script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=4299b549b28f8bb7b8e338657ffb40a26a4276c2'></script><script type='text/javascript'>function init_map(){var myOptions = {zoom:12,center:new google.maps.LatLng(26.4679038,80.3411542),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(26.4679038,80.3411542)});infowindow = new google.maps.InfoWindow({content:'<strong>Kanpur</strong><br>97/171 Beconganj Kanpur<br>208001 kanpur<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>
I tried to make as less changes as possible in your original code, so that you can see the root cause of the issues.
The changes I've made:
Change the id of second map canvas to gmap_canvas2, and change the name of second init function to init_map2
Google map script and the script from embedmaps.com were referenced twice, I've combined them together and move them to the beginning.
Two maps show up after these 2 changes.
You will notice the message "Google Maps Error: Do not change the code. Click here to show the correct code!" when running the code snippet, you may follow the link to find out how to improve myOptions object.
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>
<script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=2a4ab4f7bff1a5593997160db587449f2e987dcb'></script>
<div class="section s5">
<div class="inner">
<div class="text">
<h1>CONTACT US</h1>
</div>
<div class="contact-right-1">
<h1>Find me at-</h1>
<p><strong>MOHAMMAD IMRAN</strong><br>
F-18/22 Second Floor <br>
Jogabai Extn, Batla House<br>
New Delhi-110025<br>
Mobile No- +91 9582307425<br>
Email: mohd.imran980#gmail.com</p>
<div style='overflow:hidden;height:300px;width:270px;'><div id='gmap_canvas' style='height:300px;width:270px;'></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div> <a href='http://www.quotes.as/'>Quotes.as</a><script type='text/javascript'>function init_map(){var myOptions = {zoom:12,center:new google.maps.LatLng(31.6963654,75.45983739999997),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(31.6963654,75.45983739999997)});infowindow = new google.maps.InfoWindow({content:'<strong>New Delhi</strong><br>F-18/22 Batla House<br>110025 New Delhi<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 class="contact-right-2">
<h1>Find also me at-</h1>
<p>MOHAMMAD IMRAN<br>
97/170 Readymade Beconganj <br>
Kanpur-110025<br>
Mobile No- +91 9582307425<br>
Tele: 011-93532363<br>
Email: mohd.imran980#gmail.com</p>
<div style='overflow:hidden;height:300px;width:270px;'><div id='gmap_canvas2' style='height:300px;width:270px;'></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div> <a href='http://www.quotes.as/'>Quotes.as</a><script type='text/javascript'>function init_map2(){var myOptions = {zoom:12,center:new google.maps.LatLng(26.4679038,80.3411542),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas2'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(26.4679038,80.3411542)});infowindow = new google.maps.InfoWindow({content:'<strong>Kanpur</strong><br>97/171 Beconganj Kanpur<br>208001 kanpur<br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map2);</script>
</div>
</div></div>
Im am planning to show a google map on a modal, but the map is not showing from the modal
This is my code:
<div style="margin-top:-7px;">
<button class="btn btn-default pull-right btn-mini " style="margin-right:5px;" data-toggle="modal" data-target="#myModal7"><i class="fa fa-globe"></i> Show Map</button>
</div>
<div class="modal inmodal fade" id="myModal7" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Address</h4>
</div>
<div class="modal-body">
<div class="panel mb25 mt5" style="width:500px; margin:0 auto; padding:10px;">
<div id="map" style="width: 500px; height: 500px;"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script type="text/javascript">
var address = 'Japan';
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16
});
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address
},
function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
google.maps.event.trigger(map, 'resize');
map.setCenter(results[0].geometry.location);
}
});
</script>
I did a research for this problem, ang i got the common answer, it is google.maps.event.trigger(map, "resize"); the problem is where will i put it, please help me.
Thanks
google map has problem with "display:none" parent.
initialize your map after showing modal for first time.
add a class for button or link that show modal.
$('.modal-opener-btn').one('click', function(){
//putt your code here
});
NOTICE : use "one" and dont use "on"
NOTICE : also can use modal "shown" listener, if this solution doesn't work
$('#myModal7').on('shown', function(){
//putt your code here
});
Just change bottom script tag and contents to :
<script type="text/javascript">
function init(){
var address = 'Japan';
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16
});
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address
},
function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
google.maps.event.trigger(map, 'resize');
map.setCenter(results[0].geometry.location);
}
});
}
$('#myModal7').on('shown.bs.modal', function(){
init();
});
</script>
regarding your research you can try to use that function
inside this
$(document).ready(function(){
$('#your_modal_id').on('shown.bs.modal',function(){
google.maps.event.trigger(map, "resize");
});
});
Had the same problem and this was the solution that made my day:
Make sure that you have jQuery on the initial page that called your modal page: