Create Google Map v3 After Clicking On An Element - javascript

What I would like to do is create a map after an element is clicked on. I'm using Google Maps v3.
I have a Realty listing page that shows 15 results/properties per page. Instead of generating 15 maps I would like 1 map to be created when I click on an element. Once clicked on, the map generation process takes place. The map canvas/div is initially hidden.
I was thinking that the click element and map element relationship would be something like this:
<span id="12-1234" lat="10.101010" lng="-25.252525" class="view-map">View Map</span>
... other markup ...
<div id="12-1234-map" class="google-map"></div>
Using HTML5 I add custom attributes to the element about the property like id, latitude and longitude so I can change the icon and center the map.
I've got a functioning map from which I load markers from a dynamically generated XML file based on the search parameters.
I've been looking at addListener and addDomListener but haven't had any luck. Most searches just pull up issues related to markers.
I had a wonky thing that sort of worked that used jQuery. Something like this:
$('.view-map').click(function(){
google.maps.event.addDomListener( this, 'click', initialize );
$("#" + this.id + "-map").toggle();
});
Obviously this wasn't perfect as you'd have to click the element a couple more times before seeing the map as you've bound another click event to it after having already clicking on it.
I feel like I'm missing something obvious.

function initialize(link) {
var mapDiv = $('#' + link.attr('id') + '-map');
mapDiv.toggle();
var options = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(link.attr('lat'), link.attr('lng'))
};
var map = new google.maps.Map(mapDiv[0], options);
}
$('.view-map').click(function(){
initialize(this);
});

In your view-map click function, just call a map initialize method, passing in the appropriate values. This initialize function can then show the map div, and then initialize the map appropriately.
Ugly and unchecked example:
var params = {
lat : 47.5,
lng : -122.5 }
$('.view-map').click(params, function(){
params.id = this.id //e.g. 1234
initialize(params);
});
function initialize(params){
// show the 1234-map div, initialize the map
}

Related

Google Map losing its long/lat in Bootstrap tabbed interface

I am using ACF's Google Map to load a map on my page. I pretty much copied everything exactly and slightly modifying the map js with more options on it for styling purposes. I had to change mainly this part in order for the map to load:
$('a[href="#directions"]').on('shown.bs.tab',function(){
$('.hotel-map').each(function(){
// create map
map = new_map( $(this) );
google.maps.event.trigger(map, 'resize');
});
});
Using their doc ready wasn't working, the map would appear as a grey box. The code change above produces a map, however, once I click onto another tab and then back onto the tab that holds the map, the longitude and latitude seems to disappear. It loads a map that is somewhere way off.
Here's the full js code.
EDIT
This is what I updated the code to:
$(document).ready(function(){
$('.hotel-map').each(function(){
// create map
map = new_map( $(this) );
});
});
$('a[href="#directions"]').on('shown.bs.tab',function(){
// popup is shown and map is not visible
google.maps.event.trigger(map, 'resize');
center_map( map );
});
After you have triggered the map resize call the center_map(map); function (which is in the code you linked) which will center the map to your markers.

Zooms events in Polymer Google Map

I am working on an app that will dynamically load in markers based on a users location. The map should add events to the map if a user zooms out. For the map we are using Polymer's Google Map. I am having a hard time finding out how to react to the zoom event. We added a map to the page with:
<google-map latitude="45" longitude="-73" zoom="15" mouseEvents="true" clickEvents="true"></google-map>
I have tried several different js eventhandlers such as:
<script>
var map = document.querySelector("google-map");
console.log(map);
map.addEventListener("bounds_changed", function() {
alert(map.zoom);
});
</script>
I can't even get events such as "google-map-click" to fire. The only one that seems to work is "google-map-ready".
Please help.
Try adding event listener to map property instead of google-map element.
Something like this gives you all zoom changes
<script type="text/javascript">
var mapElement = document.querySelector("google-map");
mapElement.addEventListener('api-load', function(e) {
google.maps.event.addListener(this.map, 'zoom_changed', function() {
// handle zoom event...
});
});
</script>

Making Google maps automatically zoom out more when displaying specified location

I've got a bootstrap website that is using google maps to display a location as the header image.
You can see the webpage here: http://www.tarmastersasphalt.com/contact.asp
The html code in the page is this:
<div id="map" class="map img-responsive">
</div>
.
The page pulls in these standard bootstrap functions in the footer:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="assets/plugins/gmap/gmap.js"></script>
.
and the page also calls in this function:
var ContactPage = function () {
return {
//Basic Map
initMap: function () {
var map;
$(document).ready(function(){
map = new GMaps({
div: '#map',
lat: 38.9721102,
lng: -94.1037494
});
var marker = map.addMarker({
lat: 38.9721102,
lng: -94.1037494,
title: 'Tar Masters.'
});
});
},
//Panorama Map
initPanorama: function () {
var panorama;
$(document).ready(function(){
panorama = GMaps.createPanorama({
el: '#panorama',
lat : 38.9721102,
lng : -94.1037494
});
});
}
};
}();
.
And then performs this function:
<script type="text/javascript">
jQuery(document).ready(function() {
ContactPage.initMap();
});
</script>
.
This all works fine. What I want to do is to have the google map actually appear more zoomed out when first displayed on the page. I think you can use something like this &z=nn or ,nnz in the link to accomplish this.
.
For example - if you use a browser and go directly to this URL:
https://www.google.com.au/maps/place/1426+State+Hwy+TT,+Bates+City,+MO+64011,+USA/#38.9555594,-94.1035777,17z/data=!3m1!4b1!4m2!3m1!1s0x87c11502459d838b:0xadf0c711b5a89c2a
you will see the map as it is displayed on my website. But if you go here:
https://www.google.com.au/maps/place/1426+State+Hwy+TT,+Bates+City,+MO+64011,+USA/#38.9734448,-94.1113454,13z/data=!4m2!3m1!1s0x87c11502459d838b:0xadf0c711b5a89c2a
you will see the map as I want it to appear on my website. Notice the use of ,17z in the first link, and ,13z in the second link. (BTW: I also noticed that it seemed to change the coordinate numbers.. not sure what that is all about.)
.
So my question is as follows: Is there any way to tell the gmap function that I want it to be more zoomed out upon first displaying (without having to manually zoom out once it has been displayed)?
I think I have read somewhere that you can add some invisible markers that will force google to zoom out more in order to display all markers in the visable area.. but I am not sure how to accomplish this either.
.
Note: Please view the website on a large screen to see what I am talking about. (I use a static image as the header image when the window size get's small, because the interactiveness of the map doesn't work well with smart phone displays.. you can't scroll past the header image as it takes up the whole viewport, and all you do is move the map around, not scroll down the page.)
.
Any help will be appreciated!
you must define the zoom in the options you pass to GMaps, e.g.:
map = new GMaps({
div: '#map',
lat: 38.9721102,
lng: -94.1037494,
zoom: 10
});
(The default-value is 15)

Google Maps API addListener method not working

I'm using Google Maps Javascript API, and I want to make it so that when you a click a button on a map, a JS alert pops up.
Here's my JS code so far:
var gmap = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// Setting up and adding the boundary-changing buttons
var boundaryChangeArr = [
'<h3 id="boundary-change-title">Change boundaries</h3>',
'<div id="boundary-change-buttons-container">',
'<input id="boundaries-states" class="boundary-change-button" type="button" name="StatesBoundaries" value="States" />',
'<input id="boundaries-counties" class="boundary-change-button" type="button" name="CountiesBoundaries" value="Counties" />',
'<input id="boundaries-tracts" class="boundary-change-button" type="button" name="TractsBoundaries" value="Tracts" />',
'</div>'
];
// If there is no div with the id 'boundary-change-container', make one
var boundaryChange = $('div#boundary-change-container');
if(boundaryChange.length===0){
var boundaryChange = document.createElement('div');
boundaryChange.id = 'boundary-change-container';
boundaryChange.innerHTML = boundaryChangeArr.join('');
gmap.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(boundaryChange);
}; // DONE: if(boundaryChange.length===0)
google.maps.event.addListener(document.getElementById('boundaries-states'),
'click',
function(){
alert('clicked');
});
But when I click the button boundaries-states, nothing happens, and I don't even see any errors in Firebug, the Firefox plug-in that can check for JS errors.
What am I doing wrong?
Based on the comments and re-reading the question, you would like to perform some work when clicking on the Button not on the Google Map. In that case, you don't want to use google.maps.event.addListener since that will listen for events (like click) on the map itself.
For the button, you can use the jQuery click event or if you're using a different javascript framework, they will likely have a click event as well. For jQuery, you would do the following:
$('#boundaries-states').click(function () {
//Do something
});
It looks like the addListener method takes the google Map object, not the HTML element for the map. Take a look at the first example here.
So if you're not already, you'll need to hold onto the reference to your map that is returned when you instantiate the map:
var map = new google.maps.Map(document.getElementById('boundaries-states'),
mapOptions);
Once you have your map reference, you can add a listener using the map object, rather than the HTML element.
google.maps.event.addListener(map, 'click', function() {
alert('clicked');
});

How to reverse order of markers topping each other?

I am drawing markers that represent shops on a map.
There is a single global infoWindow which appears for each marker that is clicked, right after it closes for the previous clicked marker.
In some cases a few shops may have the same address so the markers appear on top of each other and one can only see the top marker.
To solve this I added pagination to the infoWindow.
The problem is that the top marker is the last one on the list, and so the infoWindow shows the latest shop's info and the pagination shows the "back" button, instead of showing the first shop first and the "next" button.
I tried reversing the order of the "for" loop like this for (i=limit; i>0; i--) but it doesn't work. The map gets stuck as if running some ajax request.
Here's the code:
function drawShopsMarkers(){
var marker;
markersArray = [];
var i;
var limit = globalShopsArr.length;
for (i=0; i<limit; i++){
marker = new google.maps.Marker({
position: new google.maps.LatLng(globalShopsArr[i].shopLat, globalShopsArr[i].shopLng),
map: map,
title: globalShopsArr[i].shopTitle
});
markersArray.push(marker);
marker.setMap(map);
google.maps.event.addListener(markersArray[i], 'click', makeListener(i));
}
function makeListener(index) {
return function() {
globalInfowindow.disableAutoPan=true;
globalInfowindow.open(map,markersArray[index]);
CreateInfoWindowString(index);
globalInfowindow.setOptions({
content: globalContentString
});
}
}
}
The CreateInfoWindowString() function simply populates the globalContentString including the pagination.
Can you say what's causing the problem?
Try
for (i=limit-1;i>=0;i--)
like suggested in the comment. You need to change the line when you attach the function to the marker, too. When you push the marker to the array it's accumulate but you attach function to a non-existent element. Use another variable and increment it in the loop: c++
This line google.maps.event.addListener(markersArray[i],.. ... ...
When you change the loop to decrement i and try markersArray[i] it must give an error because element i isn't in the array yet. So create a c variable and use it instead like I wrote and change the line to use c instead of i.

Categories

Resources