greetings & salutations,
this is my first run with the google maps API,
i'm using WordPress and the Genesis Framework,
i'm working through a tutorial on
http://tympanus.net/codrops/2011/04/13/interactive-google-map/
and i've gotten a google map to show up on the map page,
http://www.foodtrucksnashville.com/map/
however, you'll notice the map controls are underneath the map. hmmm.
no idea. need help / nudge in teh right direction.
thx again, stackoverflow community.
here's the code in the init.js:
var map, geocoder, marker, ey, my, mouseDown = false;
var o = {
init: function () {
this.map.init();
},
map: {
size: function () {
// so it's a loverly sqware.
var w = jQuery('.content-sidebar #content').width(),
h = 440;
return {
width: w,
height: h
}
},
data: {
zoom: 13,
center: new google.maps.LatLng(36.165389, -86.783237), // Nashville TN Capitol BLDG
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
init: function () {
// get the map size
var size = o.map.size();
// add some css to the #map div based on the size
jQuery('#map').css({
width: size.width,
height: size.height,
});
// make a new google map in the #map div and pass it the map data
map = new google.maps.Map(document.getElementById('map'), o.map.data), geocoder = new google.maps.Geocoder();
/*
// add eventlistener to map to hide posts when dragging?
google.maps.event.addListener(map, 'dragstart', function () {
jQuery('.posts').hide();
});
*/
}
} // end map
} // end o object
jQuery(window).load(function () {
o.init();
});
My problem came from a z-index on my css file. Tried to disable one by one until I found it.
figure.rounded img {
width: 100%;
z-index: -1; /* Here he is */
position: relative;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
finally figured out what as going on,
found the solution over at google groups for the Maps API v3,
http://code.google.com/apis/maps/documentation/javascript/forum.html?place=topic%2Fgoogle-maps-js-api-v3%2F8dOLhjNQzmo%2Fdiscussion
there were some css properties buried in my child theme targeting images with some max-width: 100%.
once i removed all the references targeting img elements with max-width, life was groovy again.
Related
mapboxgl.accessToken = 'XXXXXXX';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/satellite-v9', // stylesheet location
center: [ 50.545750,26.050366 ], // starting position [lng, lat]
zoom: 9.5 // starting zoom
});
// TODO: Fix glitch, once location is on the user cannot move the marker
// Allow draggable
var marker = new mapboxgl.Marker({
draggable: true
})
// Add geolocate control to the map.
map.addControl(
new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
})
);
marker.setLngLat([ 50.545750,26.050366]);
function onDragEnd() {
var lngLat = marker.getLngLat();
var lng = lngLat.lng;
var lat = lngLat.lat;
document.getElementById('lng').value = lng;
document.getElementById('lat').value = lat;
}
marker.on('dragend', onDragEnd);
marker.addTo(map);
Hi,
From the code above, everything works the way it's intended however when I activate geolocation then the user cannot move the cursor.
Any help would be appreciated, thanks!
it seems that the z-index for the marker and the geolocation circle wasn't set, so the geolocation kinda overlapped the marker making the user unable to move the marker.
There are a few ways that we can add the z-index to the marker.
1. Get the marker element and add a custom class name with getElement since it's not possible to add className with the mapboxgl.Marker() option at the moment
Your js file
marker.getElement().classList.add("my-marker")
Then in your css
.my-marker {
z-index: 1; // up to you
}
2. Make a custom marker
Your js file
var el = document.createElement("div");
el.className = "my-marker";
var marker = new mapboxgl.Marker(el);
marker.setDraggable(true);
then in your css for example:
.my-marker {
z-index: 1;
background-image: url("https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png");
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
hope this could help you!
I run this function after the page has loaded but no map displayed, just a grey square with the google logo and terms of use button at the bottom:
initMap() {
var area = new google.maps.LatLngBounds(
new google.maps.LatLng(-47.746617, 165.346753),
new google.maps.LatLng(-33.670946, -179.667808)
);
var options = {
bounds: area,
zoom: 13
};
//this.autocomplete = new google.maps.places.Autocomplete(<HTMLInputElement>this.areaInput.areaInput.nativeElement, options);
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: -33.8688, lng: 151.2195 },
zoom: 13
});
google.maps.event.trigger(map, "resize");
}
html:
<div id="map"></div>
css:
#map {
height: 300px;
overflow: visible;
width:100%
}
#map * {
overflow: visible;
}
Why is the map just a grey square?
EDIT - When I resize the window, the map appears. Why is this?
How do I make it appear without needing to resize the window?
The map is on a bootstrap modal. The user has to click something to make the modal appear. The map appears but is grey with no actual map until resizing the window manually with the mouse.
EDIT: it is to do with timing. If i hook a button up to resize the map it works when clicking the button.
maybe somebody can benefit from this answer after almost one year :). i had the same problem and i solved it like this:
in the initMap function, i triggered the resize
function initMap() {
var myCenter = new google.maps.LatLng(20.296100, 85.824500);
var mapProp = { center: myCenter, zoom: 12, scrollwheel: false, draggable: true, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({ position: myCenter });
marker.setMap(map);
$('a[href="#apartmentInfo"]').on('shown.bs.tab', function (e) {
google.maps.event.trigger(map, 'resize');
map.setCenter(mapProp.center);
});
};
You have an error in the div (#map) and you should set a proper size for you div
<div id="map" style='width: 400px; height: 400px;'></div>
You have missed a ;
#map {
height: 300px;
overflow: visible;
width:100%; /* here */
}
#map * {
overflow: visible;
}
Ended up being because it was on a bootstrap modal. Needed to hook into the bootstrap modal lifecycle event "shown" to make sure it was fully loaded. Wasn't expecting the modal to be a factor because I've done it on a modal in the past without the issue.
$('#result-details-modal').on('shown.bs.modal', (e) => {
this.resizeMap();
})
resizeMap() {
var map = new google.maps.Map(document.getElementById('map'), this.options);
google.maps.event.trigger(map, "resize");
}
I want to create a map in mobile app and then user has the ability to mark boundry i.e polygon on it. So is it possible to make like that aor is there any library available
Here is an example in which user create polygon on click event how can i manage it in mobile app
Here is a demo in a jQM page: http://jsfiddle.net/ezanker/8TK6a/1/
Inside the standard page layout is a div for the map: <div id="map"></div> with this CSS;
#map{
width: 100%;
height: 300px;
border: 2px solid black;
}
Then in code:
var map;
var elevator;
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(36.231719,-113.030911),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map')[0], myOptions);
var dm = new google.maps.drawing.DrawingManager({map: map, polygonOptions: {editable:true,fillColor:'#777777',strokeColor:'#595959',strokeWeight:2}});
UPDATE: added polygonOptions editable:true so you can see dots at each vertex.
I have a bit of a problem with my Google Maps application.
So I'm following the code given on the API to create the basic map. I have this:
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { height: 75% }
</style>
And i have the following javascript as well to initialize the map:
function showmap(coordinates)
{
var lat = coordinates.latitude;
var lon = coordinates.longitude;
var myOptions = {
position: new google.maps.LatLng(lat, lon),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
}
but all I get in the browser is just a big gray box. I've tried in several browsers (chrome, firefox etc...) but it all looks the same. I'm pretty sure I've set it up correctly...anybody got any ideas what's happening?
thanks in advance!
I don't know what the position-parameter is good for(there is no map-option like this), but I guess you mixed up position and center(center is required)
I have two tabs in my jQuery application. I want to use Google Maps in both the tabs. I added script and two <div> tags for each tab shown in code below.
First Tab:
<div class="map_canvas" style="width:100%; height:100%"></div>
Second Tab:
<div class="map_canvas" style="width:100%; height:100%"></div>
Script for Google Maps:
function initialize()
{
var latlng = new google.maps.LatLng(11.6952727, 77.5195312);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementByClassName("map_canvas"),myOptions);
}
----------Style for Google Map
.map_canvas { height: 100% }
#notes{ height: 100%;width:100% ; margin: 0px; padding: 0px } // Tab1 div tag ,contains the First tab map Div Tag
#accordionWrapper{ height: 100%;width:100% ; margin: 0px; padding: 0px }// Tab2 div tag, contains the First tab map Div Tag
The map is not displaying in the two tabs. What is the problem here?
As you can see here getElementByClassName() returns a live NodeList of found elements in the order they appear in the tree: you should iterate over that nodeList and create a new map for each element because i don't think gmaps API allows you to do that.
You will want to iterate the elements with the map_canvas class and create a new Map instance for each one of them, otherwise it will not work.
And I guess you are using jQuery UI Tabs for this? If so, you'll most likely run into trouble when loading Google Maps into hidden/inactive tabs. As mentioned in the comments there already exist questions about this with accompanied answers that solves this problem.
Anyhow, do the following changes/additions to your code and you should be good to go!
CSS
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}
JavaScript
$(function() {
// Container for maps
var maps = [],
// Initial position
latlng = new google.maps.LatLng(11.6952727, 77.5195312),
// Options for Google Maps
mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Iterate the canvas elements and create a new map instance
$(".map_canvas").each(function(){
maps.push(new google.maps.Map(this, mapOptions));
});
// Trigger map resize on tab change
$('#id-of-tabs-container').bind('tabsshow', function(event, ui) {
google.maps.events.trigger(maps[ui.index], 'resize');
});
});
Replace the temporary ids to the corresponding ids of your elements.