How to open infowindow onload using xml data source Google API v3 - google-maps-api-3

I've seen some posts that address similar topics, but not close enough for me to apply to my site. I'd like a certain infowindow to open when loading the map on this page: http://www.wrh.noaa.gov/mfr/rec.
I'd like to pass a url parameter (am already doing so for zoom, center, etc) that will open a specific infowindow onload without changing the overall functionality of the page (if no url parameter is passed for infowindow).
Thanks for any help. I imagine I'll have to do a fair bit of editing b/c I've got multiple variables displaying on the infowindow (associated with the xml element...I get most of the content for the markers from my xml document) and below the map with the forecast.
I don't think I was totally clear with my question. I'll rephrase:
Sean, Thanks so much. I don't want to create another webpage with just the one infowindow opening, which I think is what you're suggesting. I have customers that want my map zoomed in with only one recreation site (marker) showing, the infowindow open, and the forecast displaying below the page. Here's an example of what I want (url parameters setting the zoom and center values), but I can't get the infowindow of the only marker shown in the map to open. For instance, if I could code something where a URL like this: http://www.wrh.noaa.gov/mfr/rec/index.php?t=roadmap&lat=42.10053453772226&lng=-123.40782557983397&z=12&window=oregoncaves would display the zoomed in map AND open the infowindow. I just don't know how to go about this. Seems like I would have an if statement that checks if the URL parameter "window" equals "oregoncaves", then open that infowindow for that marker. Again, thanks for any help.
S

Your question mentions url parameters for zoom and center, but I've checked the page at your link and it is using the standard JavaScript v3 API for those, not url parameters.
That seems a little confusing, so I may be missing something, but if you want to create an InfoWindowdev-guide that opens immediately, simply create the object the InfoWindowapi-doc will be associated with (usually a google.maps.Markerapi-doc) and then create the InfoWindow right after the map is created (code largely taken from the Developer's Guide, with minor mods):
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Uluru</h2>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.</p>'+
'<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
'http://en.wikipedia.org/w/index.php?title=Uluru</a> (last visited June 22, 2009).</p>'+
'</div>'+
'</div>';
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Uluru (Ayers Rock)"
});
var infowindow = new google.maps.InfoWindow({
content: contentString
});
infowindow.open(map,marker);

Related

Does anyone have any examples of grouped pins expanding in crowded areas?

I am in the process of implementing a web based JS here.com app that will require overlapping pushpins (many in exactly the same spot). Is there any sort of plugin or example of how to solve the problem similar to this plugin for Google Maps https://github.com/jawj/OverlappingMarkerSpiderfier.
I have searched long and hard but am unable to find anywhere to start tackling this problem.
I just need some way of uncluttering the overlapping markers to allow touch events on all markers. Any help would be appreciated.
I am not aware of any ready-made solution but you could probably start out with clustering module and take it from there. Write a custom theme that would allow for clusters to expand on click (like arrange them in a grid or something).
Please refer https://developer.here.com/api-explorer/maps-js/v3.0/markers/ordering-overlapping-markers on how you can achieve having multiple markers on almost the same point.
function orderMarkers() {
var zIndex = 1,
// create a set of markers
marker = new mapsjs.map.Marker(
{lat: 52.508249, lng: 13.338931}
),
marker2 = new mapsjs.map.Marker(
{lat: 52.506682, lng: 13.332107}
),
marker3 = new mapsjs.map.Marker(
{lat: 52.503730, lng: 13.331678}
),
marker4 = new mapsjs.map.Marker(
{lat: 52.531, lng: 13.380}
);
// add markers to the map
map.addObjects([marker, marker2, marker3, marker4]);
map.addEventListener('tap', function (evt) {
if (evt.target instanceof mapsjs.map.Marker) {
// increase z-index of the marker that was tapped
evt.target.setZIndex(zIndex++);
}
});
}

Google maps performance with 2000 markers

I have am displaying 2000 markers on google maps. I notice the performance is a little slow. What I am not sure about... is it it slow because if the number of markers added to the map or visibility? How do I improve the performance? Can I just add them to the map and "hide" markers outside of bounds? Would that help or would it not because even though its not visible, its added to the map? The data to show the markers is in an list called var datapoints = [...].
My code to add markers is like this:
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
Any optimization recommendations appreciated!
You have a few options here. Google's docs suggest either limiting visible markers to the current viewport, clustering (distance or grid based), or fusion tables. I've implemented google maps with a customization of the MarkerClusterer module that works quite well for large amounts of markers on one map. Best of luck!

Google Map infoWindow - remove multiple after update content

i create da google map with multiple InfoWindow.
if i update infoWindow content, it's create new one.
so map always have new window
see image:map infoWindow screenshot
code:
update()
update(){
markers[i].infoWindow = contents;
infoWindow.setContent(markers[i].infoWindow);
infoWindow.open( map, markers[i] );
}
I use time and call update function.
allways it gives new infoWindow
please help

Google Maps - all buttons are disabled on load

I'm writing a Wordpress page for a client that displays some text and a Google Map based on data loaded from a database.
So far I've gotten most of it to work. The Google Maps however begins to load then mysteriously "blues" out displaying only what looks like ocean with all the other options (zoom in/out, street view, etc.) greyed out.
There are no JavaScript errors available from FireBug etc.
The divs containing the map (#container, and #map-canvas ) are set to real pixel values.
The solution given here yields no positive results.
This is what the end result looks like:
Any ideas would be extremely welcome.
Edit:
Code snip per request:
echo '<script>function initialize(e,t,n){e=parseFloat(e);t=parseFloat(t);var r=new google.maps.LatLng(e,t);var i;var s;var o={center:r,zoom:14,mapTypeId:google.maps.MapTypeId.ROADMAP};s=new google.maps.Map(document.getElementById("map-canvas"),o);i=new google.maps.Marker({map:s,draggable:false,animation:google.maps.Animation.DROP,position:r,title:n});google.maps.event.addDomListener(window,"load",initialize)}jQuery(function($){initialize("'.$detail['latitude'].'","'.$detail['longitude'].'","'.$detail['name'].'")})</script>';
echo '
<div id="container" style="height:500px;width:500px;">
<div id="information">
<h2>'.$detail['name'].'</h2>
<p>'.$detail['description'].'</p>
<p>'.$detail['address'].'</p>
</div>
<div id="map-canvas" style="width:300px;height:200px;">
</div>
</div>
';
Un-minified version of the JS:
function initialize(lat,lng,name) {
lat = parseFloat(lat);
lng = parseFloat(lng);
var ourLocation = new google.maps.LatLng(lat,lng);
var marker;
var map;
var mapOptions = {
center: ourLocation,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
marker = new google.maps.Marker({
map: map,
draggable: false,
animation: google.maps.Animation.DROP,
position: ourLocation,
title:name
});
google.maps.event.addDomListener(window,"load",initialize);
};
jQuery(function($){
initialize(lat,lng,name);
// the variables lat, lng, and name are replaced with php variables in the code
});
I figured it out. Took a little while, but...
Wordpress hates the jQuery call for some reason or another.
I noticed that in the JS console, if I called the initialize function with the variables I'd rip from the generated source then the map would magically work.
Instead of using jQuery, I just used the windows onload event.
window.onload = function() { initialize('.$detail['latitude'].','.$detail['longitude'].',"'.$detail['name'].'"); }
Which magically works.
Lesson learned, jQuery and Wordpress are like Strawberry Chocolate Milk and India Pale Ales: they don't mix well.
Thank you everyone that contributed.

Draggable Marker to Update Lat and Long Fields

I wonder whether someone may be able to help me please.
I've put some coding together (please see below) whereby a user goes onto a HTML form, they type in an address and click a 'Search' button. Upon doing this, the location is plotted on the Google map and the Lat and Long co-oridnates are automatically entered into the associated text boxes on my form.
What I would like to do, if at all possible, is for the marker to be draggable so the user can fine tune the location, and as they drag the marker, I'd like for the Lat and Long fields to change their
associated co-ordinates.
In addition, I'd also like, if at all possible, to have a field on the form called 'NearestAddress' to show the nearest address to where the marker has been dragged to.
I've managed to make the markers draggable but they don't update the Latitude and Longitude text boxes. I'm also unsure how to add the functionality to show the updated address to where the marker has been dragged to.
(function() {
// Defining some global variables
var map, geocoder, myMarker, infowindow;
window.onload = function() {
// Creating a new map
var options = {
zoom: 3,
center: new google.maps.LatLng(55.378051,-3.435973),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
// Getting a reference to the HTML form
var form = document.getElementById('LocationSearchForm');
// Catching the forms submit event
form.onsubmit = function() {
// Getting the address from the text input
var address = document.getElementById('Address').value;
// Making the Geocoder call
getCoordinates(address);
// Preventing the form from doing a page submit
return false;
}
}
// Create a function the will return the coordinates for the address
function getCoordinates(address) {
// Check to see if we already have a geocoded object. If not we create one
if(!geocoder) {
geocoder = new google.maps.Geocoder();
}
// Creating a GeocoderRequest object
var geocoderRequest = {
address: address
}
// Making the Geocode request
geocoder.geocode(geocoderRequest, function(results, status) {
// Check if status is OK before proceeding
if (status == google.maps.GeocoderStatus.OK) {
// Center the map on the returned location
map.setCenter(results[0].geometry.location);
// Creating a new marker and adding it to the map
var myMarker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
draggable:true
});
document.getElementById('Latitude').value= results[0].geometry.location.lat();
document.getElementById('Longitude').value= results[0].geometry.location.lng();
google.maps.event.addListener(myMarker, 'dragend', function(evt){
document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});
google.maps.event.addListener(myMarker, 'dragstart', function(evt){
document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
});
map.setCenter(myMarker.position);
myMarker.setMap(map);
}
});
}
})();
I am new to Google maps development and I'm not even sure whether it's possible to achieve what I want. I've been working on this now for a few weeks and it's driving me a little crazy, so if someone could perhaps point me in the right direction it would gratefully be received.
Many thanks and kind regards
Chris
Instead of evt.latLng.lat().toFixed(3) you should just use the myMarker object and grab it's position.
Getting the nearest address is not that easy, but requires reverse geocoding, and to be honest I don't see the point in doing it. You would have to make special cases for the occurences where there couldn't be found a closest address and stuff like that.
If you really want to do it though there is a webservice you can call to do it.

Resources