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.
Related
I have a map, which populates markers based on search. I'm attempting to user the newer google maps feature AdvancedMarkerView so I can fill it with custom HTML - however, as my search updates, I want to flush the old markers and place new ones when it's called for...and I can't for the life of me figure out how to? https://developers.google.com/maps/documentation/javascript/reference/advanced-markers
The following places the custom markers. It works.
const content = document.createElement('div');
content.className = 'marker-title';
content.textContent = item.title;
const marker = new google.maps.marker.AdvancedMarkerView({
map,
position: item.position,
content
});
Normally for markers, as in the old markers, I've removed them with the following code, markers.forEach((marker) => marker.setMap(null)) however this doesn't seem to work for the advanced markers. Since the marker returned when creating the advanced marker points to the element, I also tried doing a marker.remove() thinking the HTML element would be targeted, but no cigar.
I haven't been able to find any concrete examples on the Google API docs, when it comes to advanced markers, and same for others asking the same question.
There is no setMap() or other method to call on the AdvancedMarkerView class to toggle its visibility or remove it from the map.
Although it is not super clear, the documentation says:
To remove a marker from the map, set the markerView.map property to null.
Working example below:
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 37.39094933041195, lng: -122.02503913145092 },
zoom: 14,
mapId: "4504f8b37365c3d0",
});
const draggableMarker = new google.maps.marker.AdvancedMarkerView({
map,
position: { lat: 37.39094933041195, lng: -122.02503913145092 },
draggable: true,
title: "This marker is draggable. Click to remove.",
});
draggableMarker.addListener("click", (event) => {
// Remove AdvancedMarkerView from Map
draggableMarker.map = null;
});
map.addListener("click", (event) => {
// Set AdvancedMarkerView position and add to Map
draggableMarker.position = event.latLng;
draggableMarker.map = map;
});
}
window.initMap = initMap;
#map {
height: 160px;
}
p {
font-family: Arial;
font-size: 0.75em;
margin: 2px 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Draggable Advanced Marker</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<p>Click marker to remove it from map. Click on map to reposition / add marker.</p>
<div id="map"></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=marker&v=beta"
defer
></script>
</body>
</html>
Hello I am working on this example (example above)
and if I add a new map to this code, it will work, but only on this same page, if I add a map to the new page, then it crashes (map doesn't appear on the new page, it only works on the first page.
How can I achieve this?
To edit your jsfiddle, do the following:
Add to the html:
<div id="map_canvas_3" style="top: 10px; left: 125px; width:210px; height:220px"></div>
Add to the javascript:
var latlng3 = new google.maps.LatLng(29.579943,78.330006);
var myOptions3 =
{
zoom: 15,
center: latlng3,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map3 = new google.maps.Map(document.getElementById("map_canvas_3"), myOptions3);
var myMarker3 = new google.maps.Marker(
{
position: latlng3,
map: map3,
title:"TEST"
});
Should work fine.
Fiddle: http://jsfiddle.net/56HMR/2/
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'm trying to use the Google Maps API. I directly copied the example code from the docs but the map isn't showing up the way I expected:
I tried to look through my code to see if there's any error, but no luck. Any idea?
http://jsfiddle.net/DerekL/B3KYB/ (The key is removed)
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map($("#mapView")[0], mapOptions);
}
Your CSS:
div, body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
...will affect any div-element in the page, also the div's created by the maps-API.
Use this selector instead: #mapView, body, html
http://jsfiddle.net/doktormolle/nmwHw/
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.