I am using gmaps.js plugin http://hpneo.github.com/gmaps/
The Sliding Zoom Control and the InfoWindow don't show up and have some issues when they display. Link: http://bakasura.in/startupsradar/index.html
// JavaScript Document
$(document).ready(function () {
var map = new GMaps({
div: '#map',
lat: 13.00487,
lng: 77.576729,
zoom: 13,
});
GMaps.geolocate({
success: function (position) {
map.setCenter(position.coords.latitude, position.coords.longitude);
},
error: function (error) {
alert('Geolocation failed: ' + error.message);
},
not_supported: function () {
alert("Your browser does not support geolocation");
},
always: function () {
//alert("Done!");
}
});
map.addControl({
position: 'top_right',
text: 'Geolocate',
style: {
margin: '5px',
padding: '1px 6px',
border: 'solid 1px #717B87',
background: '#fff'
},
events: {
click: function () {
GMaps.geolocate({
success: function (position) {
map.setCenter(position.coords.latitude, position.coords.longitude);
},
error: function (error) {
alert('Geolocation failed: ' + error.message);
},
not_supported: function () {
alert("Your browser does not support geolocation");
}
});
}
}
});
map.addMarker({
lat: 13.00487,
lng: 77.576729,
title: 'Lima',
icon: "http://i.imgur.com/3YJ8z.png",
infoWindow: {
content: '<p>HTML Content</p>'
}
});
});
The Zoom control displays "+" and "-" buttons for changing the zoom level of the map. This control appears by default in the bottom right corner of the map.
To fix Google maps zooming problems, for Google maps default zoom you want to know how to change the zoom level on Google Maps. You can change the zoom level by going to the Edit map page and then selecting 'default zoom level' in the map information section and then clicking save map.
I have my MapController and MapView, and I enable the built-in zoom controls using: mapView. setBuiltInZoomControls(true);
Setting up the minimum or maximum Zoom value for Google Maps can be done by adding the shortcode attribute with Store Locator Shortcode. Furthermore, the maximum value of Google Maps Zoom level is 22. Therefore, the defined maximum value must be below or equal to 22, which is the default.
Bootstrap was conflicting with the rendering of Maps
Adding these lines of CSS did the trick
/* Bootstrap Css Map Fix*/
#mainBody #map img {
max-width: none;
}
/* Bootstrap Css Map Fix*/
#mainBody #map label {
width: auto; display:inline;
}
I had this before, it was some of my own CSS that overwrote some of the values in maps. I would suggest checking all styles applied to img tags. Especially width values that is set to images globally.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With