According to the screenshot below, I have a grey border/padding around the Google map, did someone know how to remove it?
Thanks
Here is my code:
var map;
function initialize(canvas,lat,lng) {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(lat,lng),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_TOP
},
scaleControl: false,
streetViewControl: false,
scrollwheel: false
};
map = new google.maps.Map(document.getElementById(canvas),myOptions);
}
I have 3 page to embed the Google map, and I added the code below to call Google map
$(document).ready(function() {
initialize("causewayBayMapCanvas","22.281001", "114.186375");
});
UPDATE:
<div style="width:300px; height:200px; border: 1px solid #0051B9">
<div id="<?php echo $mapId;?>" class="map rounded"></div>
</div>
Looks like a zero size div problem. You didn't provide the code that sets the size of the map div. You need to make sure the size is defined when your initialize function is called. If you are using percentage heights and widths, see this (v2) tutorial from Mike Williams' that addresses percentage sizes for maps: The Basics - Part 20 Using a percentage height for the map div
I've had this problem before too.
The way I fixed was to resize the map by using this code after initializing the map:
google.maps.event.trigger(map, 'resize');
If you have the map showing up on multiple pages, you may need to do this whenever the user goes to the page.
Related
I have a Google map with the option scrollwheel: true
I'm adding an OverlayView into the Google map that contains HTML with scrollable content. When I hover/click into the OverlayView, the mouse scrollwheel continues to zoom the Google map rather than scrolling the content of the Overlayview.
How do I prevent this behavior from occurring?
I've tried changing the options of the Google map to scrollwheel: false as an onclick event of the OverlayView, but this doesn't appear to trigger.
InfoWindow was probably the correct approach to resolving this, but it wasn't a route we wanted to follow, since it would have meant significantly changing our code to handle InfoWindows within the OverlayView.
Instead we ended up adding listeners for the mouseover and mouseout events on the OverlayView, then toggled the Google Map and page behavior based upon the mouse events:
// Prevent page body and google map from handling the mouse
// Wheel events when hovering over pin group content
google.maps.event.addDomListener(groupDiv, 'mouseover', function () {
gMap.setOptions({
disableDoubleClickZoom: true,
navigationControl: false,
scaleControl: false,
draggable: false
});
$('html').css('overflow', 'hidden');
})
// Restore control to page body page body and google map
// when user is no longer hovering pin group content
google.maps.event.addDomListener(groupDiv, 'mouseout', function () {
gMap.setOptions({
disableDoubleClickZoom: false,
navigationControl: true,
scaleControl: true,
draggable: true
});
$('html').css('overflow', 'auto');
})
You can put your HTML content in an InfoWindow and use gestureHandling : "greedy" on your map so that the zoom can be controlled when the cursor is on the map, but not when on the InfoWindow. (Infowindow content is still scrollable)
Sample Fiddle :
https://jsfiddle.net/471fmzyv/
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru,
gestureHandling : "greedy"
});
I have been searching for this topic but I dont see any article discussing about checking if google maps embed has a marker. I have data from the database that is dynamically inserted to the params of embed map. Im asking about this because some data inserted in the embed maps only shows the world map not the exact location and no marker. Any possible ways to check if it has a marker or not?
Do you not need to set the location and marker using the API and say e.g. data-widget...
API docs: google.Maps reference
We have something like;
// Map instance
state.map = new google.maps.Map(el, {
center: state.latLngObj,
zoom: state.zoom,
maxZoom: 18,
mapTypeControl: false,
panControl: false,
streetViewControl: false,
scrollwheel: !data.disableScroll,
draggable: mapDraggable,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeId: state.style
});
state.marker.setMap(state.map);
I'm working with a full screen Google Map (v3) that is really just for display purposes rather than interaction (still want to make use of the API though so not just a static image) - so 100% screen width. I've disabled dragging and the scrollwheel and for the most part this is fine. However, I've found on Windows 8 tablets and smartphones that, although you can't interact with the map, you also can't touch the map and move the page down like you can on Android/iOS.
Here are the map options I'm using.
var mapOptions = {
zoom: 6,
maxZoom: 6,
minZoom: 6,
center: new google.maps.LatLng("-41.00477527259105", "172.891846078125"),
mapTypeControl: false,
streetViewControl: false,
disableDoubleClickZoom: true,
scrollwheel: false,
draggable: false,
panControl: false,
zoomControl: false
};
I was able to come up with a CSS solution to place a transparent layer over top of the map which "resolves" the problem but I'd rather there was a nice solution built into the API that someone could recommend.
Here is the CSS solution I'm currently using if it is of any assistance:
.googlemap-box > div:before {
background-color: transparent;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 4;
}
Im using Google Maps, I added 2 markers.
Online Demo:
http://jsfiddle.net/VnwFT/1/
I just need to set a zoom, I tried in mapOpts and in fitBounds as well:
zoom
minzoom
maxzoom
e.x:
var mapOpts = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
scrollwheel: false,
zoom: 16
}
and it doesn't work.
How Could I set a zoom?
See what I've done here:
http://jsfiddle.net/VnwFT/27/
First you need to define the center of the map when you initialize it:
var mapOpts = {
center: new google.maps.LatLng(45.764043,4.835659),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
scrollwheel: false,
zoom: 16
}
Then if you don't need the fitBounds function (the center of the map is already defined on initialize), you could comment it.
Then in the marker click listener you could edit the code to zoom the map on marker click:
google.maps.event.addListener(pushPin, "click", function () {
infoWindow.setOptions(options);
infoWindow.open(map, pushPin);
if (this.sidebarButton) this.sidebarButton.button.focus();
map.setZoom(16);
});
I am using google maps api v3. In my map the current position name is showing larger than other names, but it is not easy to me to find it in the fist time, so I thought to style my current position, like, bold the text, change the color of the text, I searched but no answer.
This is my code:
function initialize() {
var latlng = new google.maps.LatLng(geoip_latitude(),geoip_longitude());
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
Can I add a option to var myOptions = { to style my current location. In this case my current location is `colombo.
I think the best you can do within the confines of the API is to place something (such as a Marker object) on your current location. I don't believe the API permits you to style some labels and not others (and if it does, then it is probably not a way that is documented and straightforward).