This is my html:
<a class="fancybox" href="#g_map_container">Show Map</a>
<div id="g_map_container" style="height:100%; width: 100%;"></div>
And my script:
load_map();
$('.fancybox').fancybox({
hideOnContentClick : false,
fitToView : true,
width : '100%',
height : '100%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
onComplete : function(){
google.maps.event.trigger(map, "resize");
}
});
This is function load_map()
function load_map() {
mapDiv = document.getElementById('g_map_container');
var myLatlng = new google.maps.LatLng(0,0); // My address
var myOptions = {
zoom: 12,
scrollwheel: true,
disableDoubleClickZoom: true,
center: myLatlng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_LEFT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
overviewMapControl: true,
overviewMapControlOptions: {
opened: false
},
streetViewControl: false
};
map = new google.maps.Map(mapDiv, myOptions);
}
This is result:
Try using fixed size in your map container
<div id="g_map_container" style="height:500px; width: 500px;"></div>
if work in this situation you must assign a proper width and heigth at all the container parent of your map div ..(no parent div must be without an assigned, also in percentage, width and height)
You can not use % in width or height of the gmap canvas. you should type fixed size, e.g. 400 x 500. etc. Otherwise, it'll show you nothing.
UPDATED:
Besides, take a look at your code at:
var myLatlng = new google.maps.LatLng(0,0); // My address
Try to define concretely the latt and long inside it.
Related
I'm trying to get a general location of the user, reasons irrelevant, but I can't use the API to get their location. I've tried to parse the data associated with the IP, but if I have the $.getJson() outside of the initMap() function, the variables aren't changed and if inside initMap(), initMap() isn't recognised as a function.
tl:dr - how do I call the $.getJSON from inside the initMap() function?
Here's What I've tried:
<div id="map" style="width: 100%; height: 100%;; "></div>
<!-- G-Maps box-sizing: border-box; -->
<script>
var usrLat = 0;
var usrLon = 0;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
$.getJSON("https://freegeoip.net/json/", function (data) {
usrLat = parseFloat(data.latitude);
usrLon = parseFloat(data.longitude);
console.log(usrLon + ", " + usrLat);
});
center: {lat: usrLat, lng: usrLon},
mapTypeControl: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: ['roadmap', 'terrain']
}
});
}
</script>
Your issue is the position of your call (inside the data structure), plus the semicolon on the end of the call.
Try this instead
<div id="map" style="width: 100%; height: 100%;; "></div>
<!-- G-Maps box-sizing: border-box; -->
<script>
var usrLat = 0;
var usrLon = 0;
function initMap() {
$.getJSON("https://freegeoip.net/json/", function (data) {
usrLat = parseFloat(data.latitude);
usrLon = parseFloat(data.longitude);
console.log(usrLon + ", " + usrLat);
});
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: usrLat, lng: usrLon},
mapTypeControl: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: ['roadmap', 'terrain']
}
});
}
</script>
Sorted it out. Thanks to Phil and GeoCodeZip for the help
<script>
var usrLat = 0;
var usrLon = 0;
$.getJSON("https://freegeoip.net/json/", function (data) {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: parseFloat(data.latitude), lng: parseFloat(data.longitude)},
mapTypeControl: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: ['roadmap', 'terrain']
}
});
});
</script>
How can I position zoomControl options and panControl positioning next to each other but in the middle? I used LEFT_CENTER command but it does not insert them next to each other.
Thanks in regards..
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(39.300299, 34.471664),
zoom: 6,
disableDefaultUI: true,
mapTypeControl: true,
//mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, position: google.maps.ControlPosition.RIGHT_TOP },
mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, position: google.maps.ControlPosition.LEFT_TOP },
mapTypeId: google.maps.MapTypeId.TERRAIN,
panControl: true,
panControlOptions: { position: google.maps.ControlPosition. LEFT_CENTER},
zoomControl: true,
zoomControlOptions: { style: google.maps.ZoomControlStyle.BIG, position: google.maps.ControlPosition.LEFT_TOP },
scaleControl: true,
});
For the default controls, you have to use the Control Positioning , so you can not place them next to each other in the LEFT_CENTER.
But if you use Custom Control so you can change position of custom control, you can see this example. In that example, you can change the position of the custom control by change its margin value. ex: controlUI.style.marginBottom = 100px; (You can see the change in this link: http://jsfiddle.net/cmw3zy9p/)
But for default controls, you have to follow the supported control positions.
Does anyone know the way to prevent the repeating property of circle in every clone part of google map.
In google.Maps API I found the similar option of marker it's: optimized property set to false.
The parts of my code:
this.map = new google.maps.Map(this.el, {
zoom: 4,
center: new google.maps.LatLng(33.2169, -97.1336),
disableDefaultUI: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
mapTypeControl: true,
mapTypeControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
});
this.circle = new google.maps.Circle({
center: new google.maps.LatLng(33.2169, -97.1336),
radius: 1609344,
strokeWeight: 1,
strokeColor: "#e64646",
draggable: true,
editable: true,
visible: false,
map: this.map
});
I'm looking for a way to border the area (in my case: The Netherlands) in the Google Maps API v3 and stop the user from dragging the map outside of the border. The option I think I need is drag(+)(end,ging etc.) described at the following link: https://developers.google.com/maps/documentation/javascript/reference . Found alot of examples already but they don't seem to fit in my code. Here is the javascript part of the API:
function initialize() {
var mapOptions = {
zoom: 1, //zoomValue
minZoom: 7, //minimumValue zoom
center: new google.maps.LatLng(52.088282, 5.477124), //position center map (geoLocation)
mapTypeControl: true, //mapType (cart/satelite)
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_CENTER
},
panControl: false, //panControl (moveLeft/moveUp/moveRight/moveDown)
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true, //zoomControl (zoomIn/zoomOut)
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_LEFT
},
scaleControl: true, //scaleControl
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
}
}
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
you just need to add
draggable: false
in the options list
I need to rearrange the default controls in the Google Map (v3, 3.4) API.
Everything is in place and works, but when I add the mapTypeControl, zoomControl, the streetViewControl and the panControl to the same ControlPosition (i.e. google.maps.ControlPosition.RIGHT_TOP), I can't define the order of how they are rendered.
mapTypeControl has a default of TOP_RIGHT, but changing it to RIGHT_TOP (the default of the other ones mentioned above) add's it to the bottom in this location:
Here's the code for the map options (nevermind the added OSM layer):
var mapOptions = {
zoom: 12,
center: def_center, // is set before this snippet
mapTypeControl: true,
mapTypeId: user_maptype, // is set before this snippet
mapTypeControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP,
mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN, "openstreetmap"]
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
position: google.maps.ControlPosition.RIGHT_TOP
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
scaleControl: false,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_RIGHT
}
};
I need the mapTypeControl to be the first element to be rendered (above the streetViewControl). Any idea how to do this?
This code works fine in the google code editor # http://code.google.com/apis/ajax/playground/#control_position_v3
in the end the solution was to use TOP_RIGHT instead of RIGHT_TOP
Additionally the index property can be changed via setAttribute just like a majority of the other properties.
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
position: google.maps.ControlPosition.RIGHT_TOP
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
scaleControl: false,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_RIGHT
}
});
}
I don't realy have a solution unfortunately but acording to this page
Google Map API V3 Controls user defined controls can be placed before the default ones by changing their index in DOM. Might this be the same problem, that the zoom-control has a lower index than the map/satelite control?
Not sure how you would go about changing the index but it might be an avenue to find a solution.
Oh and if you do find out how to solve it please paste your solution here. Might come in handy.