How to reattach google maps object to DOM? - javascript

I'm not sure the correct lingo for this, so feel free to edit the title of this post if necessary.
Basically, I'm creating a Google map object and adding a bunch of overlays, markers, etc. This is how I create the map:
map = new google.maps.Map(document.getElementById("map"), mapOptions)
But then, navigating through the side, I may land on a url where the map DOM element is destroyed, but the map object still exists in my web app. When I go back to the url that displays the map, I'd like to reattach the map to the DOM element as opposed to recreating the map.
Any ideas how to do this?
EDIT:
To be more specific, I have a bunch of markers and overlays on the map
Map =
map: null
markers:[]
icons: {}
init: ->
mapOptions =
center: new google.maps.LatLng(34.0500, -118.2500)
zoom: 9
#map = new google.maps.Map(document.getElementById("map"), mapOptions)
#icons.default =
path: google.maps.SymbolPath.CIRCLE
strokeColor: '#DD0000'
fillColor: '#DD0000'
fillOpacity: 0.6
scale:8
strokeWeight: 2
addMarker: (post) ->
gLatLng = new google.maps.LatLng post.location.lat, post.location.lng
gMarker = new google.maps.Marker
position: gLatLng
map: #map
icon: #icons.default
animation: google.maps.Animation.DROP
marker =
post: post
gMarker: gMarker
#markers.push marker
I suppose I could create a new map and attach all the markers to the new map, but this seems unnecessary because I may have many other overlays on the map

It is not possible to attach the Map object to another DOM element after the Map object has been created. As you can see in the Google Maps Javascript API v3 Reference there is only a getDiv() method available on the Map, not a setDiv().
I think you could hold on to the other objects like Marker and MapOptions to recreate the Map, but the Map object itself is useless without the corresponding DOM element.

You can create a global variable, mapOptions, where you can store the options of the map. Whenever some interaction is done with the map, you can update the mapOptions objects, and save it to localstorage.
var mapOptions = {
...
};
localStorage.setItem("mapOptions", JSON.stringify(mapOptions));
map = new google.maps.Map(document.getElementById("map"), localStorage.getItem("mapOptions"));
Hope this helps!

Related

Google Maps, js.minify, gmap.js no info shown on marker

I am using a theme that had only came with js.minifiy. I am able been able to get a marker to show however that it. No description of place nor is the label clickable. I have tried quite a few things but I cannot fix this. Since the theme is using js.minify do i need to make changes in that file? Not sure I need an API but I did set up a Google Maps Javascript API. Should I include that in js.minify? I uploaded the default theme files for testing and help would be appreciated.
http://vineblock.trade
google.maps.event.addDomListener(window, 'load', googleMapsInit);
function googleMapsInit() {
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 17,
scrollwheel: false,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(-34.8679988, 138.5118251),
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
// Let's also add a marker while we're at it
var marker = new google.maps.Marker({
icon: 'images/label.png',
position: new google.maps.LatLng(-34.8679988, 138.5118251),
map: map,
title: 'Carros'
});
}

Google Maps - Remove single marker not stored in array

Many other solutions like Google Maps API v3: How to remove all markers? All involve having some kind of maps array to store the map objects for later usage.
I have a situation where there is no such array to access. I can't edit the original js that makes the maps, but I can add my own script to the page.
Is it possible to retrieve all the markers after the page loads to then remove one?
Example of how markers are currently being added by framework I have to use:
map = new google.maps.Map(document.getElementById("map_canvas"), options);
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: '/pin.png',
title: data['store_title']
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
Directly via the API it doesn't seem to be a way to do that.
If you don't have access to the array with the markers there isn't much to be done.

Getting marker from map.data class use geojson google maps

first of all I was initiate marker from geojson, and how I can get the marker if i want use marker for listener/action?
this is my script
var map;
function initMap() {
//makes map
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -6.9034482, lng: 107.6081381},
zoom: 9,
styles: [{"featureType":"water","stylers":[{"saturation":43},{"lightness":-11},{"hue":"#0088ff"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"hue":"#ff0000"},{"saturation":-100},{"lightness":99}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#808080"},{"lightness":54}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ece2d9"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#ccdca1"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#767676"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#b8cb93"}]},{"featureType":"poi.park","stylers":[{"visibility":"on"}]},{"featureType":"poi.sports_complex","stylers":[{"visibility":"on"}]},{"featureType":"poi.medical","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","stylers":[{"visibility":"simplified"}]}]
});
//load marker from geojson
map.data.loadGeoJson('<?php echo base_url().'index.php/json_site/geojsongetmap'?>');
// set style marker
map.data.setStyle(function(feature){
var tit = feature.getProperty('nm_site');
return{
title: tit,
icon: '<?php echo base_url()?>assets/images/mark3.png'
};
});
//marker event
map.data.addListener(marker, 'click', function(event) {
map.setZoom(11);
map.setCenter(marker.getPosition()); // I need to get the position of the marker who i clicked
});
}
how I can make action listener if I initiate marker from geojson?
and how I can get the marker who existing in my map?
please help me, any suggest would be appreciated
thanks
Instances of the google.maps.Data.Point class are not exactly a drop-in replacement for traditional google.maps.Marker objects. For starters, they are abstract data, not tied to a particular representation. It's up to the parent google.maps.Data layer to decide how to draw them.
However, you can still capture events, with the caveat that the click happens on the Data layer, which receives a mouseEvent as argument. This argument contains the feature over which you just clicked.
This means you need to declare:
google.maps.event.addListener(map.data,'click',function(mouseEvent) {
var clickedFeature = mouseEvent.feature,
featureGeometry = clickedFeature.getGeometry(),
featurePosition = featureGeometry.get();
map.setCenter(featurePosition);
});
Please take into consideration that ingesting geoJson with the Data layer can result not just in Point geometries. If you get a mix of points, polygons and linestrings, anything different from a point won't return a latLng object when you call its get method.

What is the difference between "marker.setVisible(false)" and "marker.setMap(null)" in Google Maps v3?

I want to clear a marker on Google Maps.
What is the difference between marker.setVisible(false) and marker.setMap(null)?
But I don't know, which is right?
The difference between the two methods does not seem to be clearly documented. However, note the following:
When you use setMap(null), your marker will lose the reference to the Map. If you do not keep a reference to the Map object, you wouldn't be able to reshow the marker.
In addition, the setMap() method will not trigger the visible_changed event, while the setVisible() method does (if the visibility is actually toggled).
Example:
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(-25.363, 131.044),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-25.363, 131.044),
map: map
});
google.maps.event.addListener(marker, 'visible_changed', function() {
console.log('visible_changed triggered');
});
marker.setVisible(false); // visible_changed triggered
marker.setVisible(true); // visible_changed triggered
marker.setMap(null); // visible_changed not triggered
marker.setMap(map); // visible_changed not triggered
I guess we should be using the setVisible(false) method when we intend to reshow the marker again on the map, and the setMap(null) when we will not be showing it again.
Another key distinction is that setMap(NULL) releases the resources associated with the marker whereas setVisible(false) just makes the marker invisible, but the resources associated with the marker are still allocated.
If you're dealing with 100s or 1000s of markers, this can become a significant performance and memory issue.

How can I make infowindows resize for tweets in Google Maps v3 with Javascript

I'm trying to add a few tweets to an infowindow in Google Maps. I get the tweets to display in a div that is the content of my infowindow, but it's the wrong size.
I thought by calling 'content_changed' when the marker is clicked, the infowindow would resize - it doesn't.
I'm sure this is pretty straightforward, can someone help me out?
Thanks,
James
var myLatlng = new google.maps.LatLng(51.500261,-0.126793);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
});
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(document.getElementById("station"));
google.maps.event.addListener(marker, 'click', function() {
google.maps.event.trigger(infowindow, 'content_changed');
infowindow.open(map,marker);
});
Try to call infowindow.close(); before open(). I'm pretty sure that it will force it to rerender
This isn't exactly a supported solution, but after poking around in Firebug, I found an easy way to force a resize on the window:
infoWindow.b.contentSize = new google.maps.Size(w, h);
google.maps.event.trigger(infoWindow.b, 'contentsize_changed');
As far as what the real W/H should be set to on the first line, that's a matter of looking at infoWindow.b.contentNode and getting a real width/height either through the standard properties or jQuery's methods.
I'm not sure exactly what infoWindow.b is, but it seems like it's some sort of "content" object. I wish they would expose this and document it.
I ended up with:
infoWindowLinea.setContent(infoWindowLinea.getContent());

Categories