I've looked at several questions that are similar, but I'm still not finding a resolution.
I have this page: http://www.citizensmemorial.com/Test2014/locations/cmh-infectious-disease-and-internal-medicine-clinic/index.html
I'm using this code:
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBs_4MZDYZTCtkoB-Hbo4qQyWy-qHQuEdA"></script>
<script>
var mapExists = document.getElementById('map-canvas'); if(mapExists)
var map;
function initialize() {
var myLatLng = new google.maps.LatLng (37.625387, -93.424350)
var mapOptions = {
zoom: 12,
center: myLatLng
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'CMH Infectious Disease & Internal Medicine Clinic'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Here is the applicable css:
html, body, #map-canvas {
width:100%;
height:100%
}
#map_canvas {
position: relative;
}
.map-holder {
width:500px;
height:270px;
padding: 0px;
display:table;
margin-top:3px;
float:right;
}
I'm assuming that it is something related to the css that is keeping the map from centering, as I've tested the map code by itself at this url and it is working:
http://www.citizensmemorial.com/Temp/mapTest.html
Looks to be you are initializing the map before the map-canvas div is visible. You need to trigger a resize otherwise the map won't know its correct size.
After initializing your map call a map resize
google.maps.event.trigger(map, "resize");
Then set map centre to your marker.
map.setCenter(markerlatlng);
I've checked your code.
Please check this css that apply to the page you've tested. If your problem's about the CSS.
You can use firebug to test the css.
<div id='map-canvas' style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"></div>
and your code it self, it run as normal. and if you want to centered the map based on a marker or infowindow. you can use map.setCenter(map);
as for infowindow you can use position in your opts.
for detail information and references please read this.
Related
We are using the Google JavaScript API to display Google My Maps via a KML file.
The markers on the map are showing white markers and not the custom logo's we have got on My Maps. Does KML not support custom logos for the markers?
<style type="text/css">
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?
key=Your_API_kEY" type="text/javascript">
</script>
<script>
var geocoder;
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.KmlLayer({
suppressInfoWindows: false,
url: "http://www.linktodata/data.kml",
map: map
})
}
google.maps.event.addDomListener(window, "load", initialize);
</script>
The URL: http://www.linktodata/data.kml is wrong. It needs to go to the link within the .kml file.
First of all this is not a duplicate question . Other questions on Stack overflow and other sites don't have the complete thing I am asking for. I do not want a button below the iframe.
I want a button say button like a small red circle over the map in the down right corner of the iframe
Red Circle Button Sample - I want to keep a button like this in bottom right corner of the div/iframe
I have created a fiddle to make you understand the issue.The link is at the last part of the question
Code
HTML
<div id="map"></div>
<script>
var map;
var marker;
var location1 = {
lat: 34.0522,
lng: -118.2437
};
function initMap() {
var myOptions = {
zoom: 13,
center: location1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
marker = new google.maps.Marker({
position: location1,
map: map,
title: 'Click to zoom'
});
}
function changeCenter(center) {
map.setCenter(center);
marker.setPosition(center);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<button type="button" onclick="javascript:changeCenter(location1);">Location 1</button>
CSS
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
#map {
height: 90%;
width: 100%;
}
Also another thing that is not happening - I have kept the default zoom level at 13 , now when I am zooming in 3 times or say zooming out 3 times then when I click on the button I am getting zoom location of my default position as 10 or 16, not that original 13. Please help me with this thing also
#saravana has only solved a little part of my question.
Here is my updated fiddle
updated FIDDLE with zoom issue solved
The major thing is still there - I want to create a custom button over the map. Please help me with that
Please replace your changecenter function to below code
function changeCenter(center) {
map.setCenter(center);
map.setZoom(13);
marker.setPosition(center);
}
You can set zoom level by using map.setZoom() function. Cheers!!!
Update:
Please replace your html code to below code in fiddle
we have to add custom button or image manually in the google map. I hope this will help
<div id="map"></div>
<div><img src="http://www.clker.com/cliparts/X/9/P/m/2/g/transparent-red-circle-md.png" width="25px" style="position: fixed;z-index: 9999; right:10px; top:225px; float: right;" onclick="javascript:changeCenter(location1);"></div>
<script>
var map;
var marker;
var location1 = {
lat: 34.0522,
lng: -118.2437
};
function initMap() {
var myOptions = {
zoom: 13,
center: location1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
marker = new google.maps.Marker({
position: location1,
map: map,
title: 'Click to zoom'
});
}
function changeCenter(center) {
map.setCenter(center);
map.setZoom(13);
marker.setPosition(center);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<button type="button" onclick="javascript:changeCenter(location1);">Location 1</button>
I have the following CSS which shows marker on the map , user can drag a map like Uber now I want to get current location of the marker , I have added style.css , DeliverCtrl.js and HTML code so please can anybody help me ?
style.css
map{
display: block;
width: 100%;
height: 50%;
overflow:visible;
}
map:after {
width: 22px;
height: 40px;
display: block;
content: ' ';
position: absolute;
top: 50%; left: 50%;
margin: -40px 0 0 -11px;
background: url('https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png');
background-size: 22px 40px; /* Since I used the HiDPI marker version this compensates for the 2x size */
pointer-events: none; /* This disables clicks on the marker. Not fully supported by all major browsers, though */
}
DeliverCtrl.js
angular.module('Home').controller('DeliverCtrl',["$scope","$state", function($scope, $state, $ionicModal, MessageService, $stateParams) {
function initialize() {
var position = new google.maps.LatLng($state.params.lat,$state.params.lng);
$scope.mapOptions = {
mapTypeControl: true,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: position
};
};
$scope.createMarker = function(latLng)
{
var map = $scope.map;
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: 'Current Location'
});
};
$scope.mapCreated = function(map) {
$scope.map = map;
};
initialize();
google.maps.event.addDomListener(window, 'load', initialize);
}]);
I have created the map through this html
<map on-create="mapCreated(map)" mapoptions="mapOptions"></map>
Judging from the css code you provided, you are trying to show a marker image over the map, while showing the map beneath the marker.
In that case, what you probably want is to get the center of the map, after dragging of map was finished.
To get the center of the map you can use map.getCenter() function.
To determine when the map finished dragging, you can use some of the google.maps.Map's User Interface Events (first example). In your case I would prefer idle event instead of e.g. center_changed since that get's called more times, but you can choose from the available events yourself.
So your code should probably look something like this:
$scope.mapCreated = function(map) {
$scope.map = map;
$scope.current_center = null;
google.maps.event.addListener($scope.map, 'idle', function(){
$scope.current_center = $scope.map.getCenter();
console.log($scope.current_center.toString()); //this will print out latitude and longitude of map's center after dragging/zooming finished
});
};
I have a contact page that fetches the coordinates from localstorage
like this
localStorage.getItem("jc")
I have used eval to convert string to variable
var thecoords = eval(localStorage.getItem("jc"));
and used the coordinates to center on those coordinates like
var center = new google.maps.LatLng(thecoords); and pan'ed to that location
map.panTo(center);
However i get this error
Uncaught RangeError: Maximum call stack size exceeded
I have checked my coordinates and they are in the right order of lat,lng
Why could i be getting this error?.
The google.maps.LatLng constructor takes two Numbers as an argument, not whatever you are passing it:
var center = new google.maps.LatLng(thecoords); // and pan'ed to that location
examples using google.maps.LatLngLiteral objects.
proof of concept fiddle
code snippet: (from jsfiddle, doesn't actually work due to sandboxing)
localStorage.setItem('jc', JSON.stringify({lat: 40.7127837, lng: -74.0059413}));
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
});
console.log(localStorage.getItem('jc'));
console.log()
var marker = new google.maps.Marker({
map: map,
position: JSON.parse(localStorage.getItem('jc'))
});
map.panTo(JSON.parse(localStorage.getItem('jc')));
}
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>
<input id="clear" value="clear store" type="button" onclick="clearLocalStorage()" />
<div id="panel">
<div id="color-palette"></div>
</div>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
No, you don't need to use eval(). Items stored in local storage are already a variable. Don't use evil eval() at all.
Start off by console logging the coords and compare it to the Google Maps API docs.
So I have this:
<iframe src="https://mapsengine.google.com/map/embed?mid=zkXLRR9SQKDQ.kfLF9HxBaALo&z=15" width="100%" height="100%"></iframe>
I managed to find the zoom code on here, however I couldn't find a way to remove the grey bar that appears at the top of the map with my google account stuff.
A screenshot can be found here.
Is there a way to remove this using a URL parameter?
I don't think it's possible to remove the bar. Instead you could use the Google Maps Javascript API. It's fairly easy to use and gives you much more control. Here's an example that loads your location with the right zoom level: plnkr.co.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js">
</script>
<script type="text/javascript">
function initialize() {
var latLng = new google.maps.LatLng(51.4893169, -2.1182648);
var mapOptions = {
center: latLng,
zoom: 15,
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var image = 'http://icons.iconarchive.com/icons/visualpharm/must-have/256/Check-icon.png';
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Documentation for the API.
If you need a specific style for your map, you can use the Styled Maps Wizard.
Depending on where you put your map on your page, it might conflict with scrolling. If that is the case, then set the scrollwheel option to false. That allows you to scroll over the map without it highjacking the scroll event for it's zoom functionality. I've updated the plnkr to use scrollwheel: false.