Can you design a google map, with multiple locations, and when you click on a location it opens a link to that locations page?
The basic Google Maps page can be set up using instructions here.
Add markers in the initialize() function, using
var marker new google.mapsMarker({
position: new google.maps.LatLng(39.952517,-75.19618), //your coordinates
map: map,
title:"Location 1",
url: "http://www.location1.com",
});`
Then add links to the markers by adding an event listener to your map:
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
Here's a jsfiddle with a couple of markers. Keep in mind that the links won't open on jsfiddle but would open on a normal website.
Related
I've been trying to solve this question for a week, and haven't found any solution yet.
All I found is marker that is placed by one's own can be changed.
My situation is I import a KML file with some marker,and I want to change the icon on click event.
The code below works fine
var ctaLayer = new google.maps.KmlLayer({
//KMZ KML
url: url,
map: map,
suppressInfoWindows: true,
});
ctaLayer.addListener('click', function (kmlEvent) {
var text = kmlEvent.featureData.description;
showInContentWindow(text); }
My Current Result
Most People use the below function to set different icon
marker.seticon(ICON)
But in my case I can't get the marker I click
Hope someone can help me!!
With KmlLayer you can't change the style after load (with the API as currently documented). One option would be to use a third party KML parser (like geoxml3 or geoxml_v3) which converts KML into native google maps api objects, which you can change.
geoxml3:
https://github.com/geocodezip/geoxml3
geoxml_v3:
http://code.google.com/p/geoxml-v3/
According to geocodezip's advice
I came out with this solution
var marker;
google.maps.event.addListener(ctaLayer, 'click', function (event) {
var eLatLng = event.latLng;
if (marker != null) //this will remove the previous marker
{
marker.setMap(null);
}
marker = new google.maps.Marker({
position: eLatLng,
map: map,
});
marker.setPosition((eLatLng));
marker.setIcon(ICON);
});
While clicking the kmlLayer marker,I overlay a new bigger marker on it.
I know it's not the best solution, but at least it tells users which marker they are now clicking.
When using the following code to add a Marker to an on page Google Map
var myMarker4 = new google.maps.Marker({ position: new google.maps.LatLng(53.53, -2.5), map: map, icon: '/_Content/images/light-pink-marker-map.png' });
Is there a way (call back?) for me to detect when the user has hovered over the marker so I can do something on the current page?
I have several markers, so I would need someway to uniquely identify each.
Isn't this what you're looking for?
var myMarker4 = new google.maps.Marker({ position: new google.maps.LatLng(53.53, -2.5), map: map, icon: '/_Content/images/light-pink-marker-map.png' });
google.maps.event.addListener(myMarker4, 'mouseover', function() {
doSomething...
});
By the way, here's the full list of events that a marker can handle:
'click'
'dblclick'
'mouseup'
'mousedown'
'mouseover'
'mouseout'
I used the Google Maps API to render a static map with pins on it.
Image here.
Is there a way to make a popup for the pins like on the standard Google Maps (where you can normally scroll around)?
It's on a WordPress page: http://clairepyper.org/ The table to the left of the map shows modals on clicking a place name. I'm wondering if there is way to get the modals opening from clicking the markers instead/as well?
Thanks.
You use something like this:
<script type="text/javascript">
function init_map(){
var myOptions = {
zoom:14,
center:new google.maps.LatLng(40.26489,-74.533312),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(40.26489,-74.533312)});
infowindow = new google.maps.InfoWindow({content:"<b>Lawton's Service Company, LLC</b><br/>400 Mercer St<br /> Hightstown, NJ 08520" });
google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});
infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);
</script>
You can add an indefinite number of those markers with a LatLng entry, and it's own little box over it.
(Sorry for the lack of code formatting. My browser is not showing the cool code tools.)
I have Google Map created with version of Google Maps api v3. It's "standard" Google Map, filled with markers and clusters. Every marker and cluster have it's own InfoWindow, showed when end user click on it.
What I need is that when map is loaded, to open all of InfoWindows of all markers and clusters showed on map.
Right now, they are showed only when I click on them:
google.maps.event.addListener(markerGreenCluster, 'clusterclick', function(markerGreenCluster) {
var content = '';
var info = new google.maps.MVCObject;
info.set('position', markerGreenCluster.center_);
var infowindow = new google.maps.InfoWindow();
aIWgreen.push(infowindow);
var center = markerGreenCluster.getCenter();
var size = markerGreenCluster.getSize();
var markers = markerGreenCluster.getMarkers();
// more code goes here...
})
I noticed that problem is in cluster definition, and method markerGreenCluster.getSize(); It returns number of grupped markers, and it can return it after whole map is loaded, or something like that.
Can you help me how can I achieve that all of InfoWindows are open (showed) when map is loaded?
the infowindows only open on click because you're only creating them on the click event listener. Move the code creating the infowindows out of the click handler, into a window load event handler instead.
To do this, what I do is create a InfoWindows object and stored it into the marker. Something like this
function CreateMarker(Lat, Lng, Title, Content) {
var aInfoWin = new google.maps.InfoWindow({
content: Content,
position: new google.maps.LatLng(Lat,Lng)
});
var aMarker = new StyledMarker({
title: Title,
position: new google.maps.LatLng(Lat,Lng),
MyInfoWin: aInfoWin
});
aMarker.MyInfoWin.open();
}
You can access to the Marker InfoWindows where you like (events, code,.....) like the other properties.
Code non tested, only to get the idea
Regards
I am trying to create a site that has option to add maps to the site using google maps api. I found hundreds of tutorial and blog posts on embeding map in the site. But what I actually want is a way to give the user choose a place on the map and add marker. Then get the co-ordinates of the marker and store it in the database of retrieving and showing in the front-end. I have seen this option given wordpress plugins like mappress. But now I'm trying to achieve this in codeigniter. I can't find any thing to start on. Can any one point out some one tell me where to start?
This is really easy the 3rd version of the Google maps API. Versions before that where much more complicated, and most of the tutorials floating around are for those versions. Have a look through the API documentation and examples.
Adding a marker is as simple as:
var marker=new google.maps.Marker({/* ... see API */});
Adding an event (eg click) to a marker is as simple as:
var marker_click=new google.maps.event.addListener(
marker,
'click',
function() {/*...*/});
Sounds like you'd want a click event for the map, which you'd translate into a latlong, then (a) generate a marker on the map with JS, and (b) post that back to your server using AJAX, or by storing the values in a hidden form field to be submitted after.
Update:
Mostly from the API documentation # http://code.google.com/apis/maps/documentation/javascript/events.html:
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
var marker = new google.maps.Marker({
position: location,
map: map
});
map.setCenter(location);
/*Do your processing here:
* eg. ajax.post('addMarkerDB&lat='+location.lat+'&long='+location.long);
*/
}
Note: There is no ajax.post function by default, but there could be :)