I am building a map with some markers, which when clicked open a link.
After some research around here I have something that does what i need.
Not having much experience, I am stack with some changes I would like to make, so any help will be very welcome.
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var points = [
['prop1', 59.9362384705039, 30.19232525792222, 12, 'https://www.google.com'],
['prop2', 59.941412822085645, 30.263564729357767, 11, 'https://www.google.com'],
['prop3', 59.939177197629455, 30.273554411974955, 10, 'https://www.google.com']
];
function setMarkers(map, locations) {
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var place = locations[i];
var myLatLng = new google.maps.LatLng(place[1], place[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shape: shape,
title: place[0],
zIndex: place[3],
url: place[4]
});
google.maps.event.addListener(marker, 'click', function() {
window.open(this.url);
});
}
}
function initialize() {
var myOptions = {
center: new google.maps.LatLng(59.91823239768787, 30.243222856188822),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
setMarkers(map, points);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:75%; height:75%">
</body>
</html>
So now I am trying to do a couple of things:
I would like to call the points variables from an external xml file.
My links will look like this: http://www.somefixedlink/someuniquesequence.
How can it up so i only load from the xml the "someuniquesequence", and the rest of the link is added?
Thank you in advance,
iPanos
Related
I have made a map with Google from this:
Google API
But I would like to put in 8 more pins, that should illustrate the places I have been in the world. But I dont have an idea if I can do that from that code?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var place_1 = {lat: -25.363, lng: 131.044};
var place_2 = {lat: 55.971232, lng: 9.854725};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=xxxxxx&callback=initMap">
</script>
</body>
</html>
You can use as many markers as you want:
function initMap() {
//this is different:
var places = new Array();
places.push({lat: -25.363, lng: 131.044});
places.push({lat: 55.971232, lng: 9.854725});
//push all of remaining places
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
//and this is different:
var markers = new Array();
for(var i = 0; i < places.length; i++){
markers.push(new google.maps.Marker({
position: new google.maps.LatLng(places[i].lat, places[i].lng),
map: map,
title: 'Hello World!'
}));
}
}
Problem: I am trying to add markers and polylines into my map using Google maps v3 but it doesn't work. It is actually not rendering anything and I have been following the Google doc and I have a valid API key so no idea... Suggestions? Thank you in advance!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(42.0, 10.0),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var points = [
new google.maps.LatLng(39.0, -3.0),
new google.maps.LatLng(52.1, 12.1),
new google.maps.LatLng(40.2, 32.7)
];
var markers = [];
var path = [];
for (var i = 0; i < points.length; ++i) {
var marker = new google.maps.Marker({map: map, position: points[i]});
markers.push(marker);
path.push(marker.position);
}
var polyline = new google.maps.Polyline({
path: path,
strokeColor: "#FF0000"
});
polyline.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6SfOqSpJQa45i0LWO-9zSrV9HDPzACYg&signed_in=true&callback=initMap"></script>
</body>
</html>
As Dr.Molle observed in his comment: the ID of the map-container is map , not map_canvas
function initMap() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(42.0, 10.0),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var points = [
new google.maps.LatLng(39.0, -3.0),
new google.maps.LatLng(52.1, 12.1),
new google.maps.LatLng(40.2, 32.7)
];
var markers = [];
var path = [];
for (var i = 0; i < points.length; ++i) {
var marker = new google.maps.Marker({map: map, position: points[i]});
markers.push(marker);
path.push(marker.position);
}
var polyline = new google.maps.Polyline({
path: path,
strokeColor: "#FF0000"
});
polyline.setMap(map);
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>
I'm trying to display City markers for cities within the Province of Quebec Map.
Based on google documentation, we should be able to set the resolution option to provinces and set the region to the ISO code (Eg: US-GA..). When i try with CA-QC (Found this code here on wikipedia.
When I try this, the map <div> displays this message : Requested map doest not exist
See Fiddle:
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['City', 'Popularity'],
['Quebec', 200],
['Montreal', 300],
['Sorel-Tracy', 400],
['Boucherville', 500]
]);
var options = { enableRegionInteractivity: 'true',resolution: 'provinces', region:'CA-QC'};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['geochart']}]}"></script>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
I there a way/workaround to do this?
Thanks
It does not seem possible to set regions in this country.
According to Visualization: Geochart:
'provinces' - Supported only for country regions and US state regions.
Not supported for all countries; please test a country to see whether
this option is supported.
But you could consider another option, draw popularity using circle markers instead of geocharts as demonstrated below:
function initialize() {
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(46.579246, -72.024826)
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
displayPopularity(map);
}
function displayPopularity(map) {
var citymap = {};
citymap['Quebec'] = {
center: new google.maps.LatLng(46.769492, -71.290357),
population: 200
};
citymap['Montreal'] = {
center: new google.maps.LatLng(45.510845, -73.567888),
population: 300
};
citymap['Sorel-Tracy'] = {
center: new google.maps.LatLng(46.421575, -73.118540),
population: 400
};
citymap['Boucherville'] = {
center: new google.maps.LatLng(45.601591, -73.438919),
population: 500
};
for (var city in citymap) {
var populationOptions = {
strokeColor: '#00FF00',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#00FF00',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 1000
};
var cityCircle = new google.maps.Circle(populationOptions);
(function (cityCircle,city) {
//create info window
var infoWindow = new google.maps.InfoWindow({
content: city
});
google.maps.event.addListener(cityCircle, 'click', function(ev) {
infoWindow.setPosition(cityCircle.getCenter());
infoWindow.open(map);
});
})(cityCircle,city);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Popularity map</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
change the region to region:'CA'
I am using this code to create a Google map with 3 points that are hidden within one and when the one marker is clicked thepoints either get merged into the one or they open up into 3 separate ones, however the map is not appearing can any one examine my code and see the potential problem?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>favorite cities</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
(function() {
window.onload = function(){
var options = {
zoom: 3,
center: new google.maps.LatLng(37.99, -93.77),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), options);
var mgr = new MarkerManager(map);
var A = new google.maps.Marker({
position: new google.maps.LatLng(37.99, -93.77),
icon: 'img/cluster.png'
});
google.maps.event.addListener(A, 'click', function() {
map.setZoom(7);
map.setCenter(Kloof.getPosition());
});
var Cities = [A];
var Schools = [
//SChool1
new google.maps.Marker({position: new google.maps.LatLng(38.99, -93.97)}),
//School2
new google.maps.Marker({position: new google.maps.LatLng(37.89, -94.77)}),
//School3
new google.maps.Marker({position: new google.maps.LatLng(37.79, -95.77)})
];
google.maps.event.addListener(mgr, 'loaded', function() {
agr.addMarkers(Cities, 11, 6);
agr.addMarkers(Schools, 6);
agr.refresh
});
};
})();
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Change:
var map = new google.maps.Map(document.getElementById('map'), options);
To:
var map = new google.maps.Map(document.getElementById('map-canvas'), options);
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>favorite cities</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
(function() {
window.onload = function(){
var options = {
zoom: 3,
center: new google.maps.LatLng(37.99, -93.77),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), options);
var mgr = new MarkerManager(map);
var A = new google.maps.Marker({
position: new google.maps.LatLng(37.99, -93.77),
icon: 'img/cluster.png'
});
google.maps.event.addListener(A, 'click', function() {
map.setZoom(7);
map.setCenter(Kloof.getPosition());
});
var Cities = [A];
var Schools = [
//SChool1
new google.maps.Marker({position: new google.maps.LatLng(38.99, -93.97)}),
//School2
new google.maps.Marker({position: new google.maps.LatLng(37.89, -94.77)}),
//School3
new google.maps.Marker({position: new google.maps.LatLng(37.79, -95.77)})
];
google.maps.event.addListener(mgr, 'loaded', function() {
agr.addMarkers(Cities, 11, 6);
agr.addMarkers(Schools, 6);
agr.refresh
});
};
})();
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
I changed the code to the following:
<
var schoolArray = []; //Global array to store the POINTS
var SchoolPoints = [[-29.788911, 30.852721, 'Thomas More College'], //I am creating a global array to store the MARKERS
[-29.781297, 30.838465, 'Kloof Senior Primary School'],
[-29.827008, 30.881706, 'Pinetown Boys HighSchool']];
function initialize() { //I am initializing the google map and how it will appear on my dashboard
var myOptions = {
zoom: 9,
center: new google.maps.LatLng(-29.807762, 30.854261),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var mcOptions = { //this is where i determine BY GRID the amount of tiles that will determine if my schools points cluster or if they are separate and also the max zoom level the individual points are visual at
gridSize: 25,
maxZoom: 20
};
var mc = new MarkerClusterer(map, [], mcOptions); //this creates the blue cluster you see initially on the map
google.maps.event.addListener(map, 'click', function() { //upon click the map zooms in and displays the 3 schools with separate markers
infowindow.close();
});
// This is where the markers are added to the map and sorted into the cluster
for(var i=0; i<SchoolPoints.length; i++){ //This is where where i am setting up my markers on the map based off the number of elements within the points array
createMarker(new google.maps.LatLng(SchoolPoints[i][0], SchoolPoints[i][1]), SchoolPoints[i][2]);
}
mc.addMarkers(schoolArray , true); //now the markers are clustered together in the blue symbol
}
var infowindow = new google.maps.InfoWindow({ //I am determining the size of the info window that will be displayed by my school points
size: new google.maps.Size(500, 250)
});
function createMarker(latlng, html) { //this function is where i create the individual markers
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: '',
});
marker.setAnimation(google.maps.Animation.DROP); //I decided for aesthetic reasons i would like to see if i could animate the markers and so i added a drop animation
google.maps.event.addListener(marker, 'click', function() { //when clicking the markers their info windows are displayed
infowindow.setContent(contentString); //This sets the info window to have the content listed in the array visible
infowindow.open(map, marker);
});
schoolArray.push(marker);
}
window.onload = initialize;
Dear all i am a newbie to Google Maps API. I have a parsed a KML layer in Google Maps API using GeoXML3. Now how do i fetch placement marker value(Name of the place) of KML in Google Maps API onclick. Like when a kml layer gets loaded on google maps and i am clicking on any marker i should be able to fetch the placement value of the marker in an alert box. Please find the code that helps me parse a kml on google maps api. Please guide.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>KML Layer</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript">
function initialize()
{
var chicago = new google.maps.LatLng(75.602836700999987,32.261890444473394);
var myOptions = {
zoom: 2,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//var transitLayer = new google.maps.TransitLayer();
//transitLayer.setMap(map);
var geoXml = new geoXML3.parser({map: map, singleInfoWindow: true});
geoXml.parse('kmload.kml');
var geoXml1 = new geoXML3.parser({map: map, singleInfoWindow: true});
geoXml1.parse('lines.kml');
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
Is this what you are looking for? I have added the alert in the onclick function which displays me the name of the placemark in the alert box. Please check and let me know if you find any issues.
<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script>
<title>KML Placement Value Test</title>
<style>
html, body, #map_canvas {
height: 100%;
margin: 0;
padding: 0;
}
#panel {
top: 5px;
left: 85%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
.infowindow * {font-size: 90%; margin: 0}
</style>
<script type="text/javascript" >
geocoder = new google.maps.Geocoder();
var geoXml = null;
var geoXmlDoc = null;
var map = null;
var myLatLng = null;
var myGeoXml3Zoom = true;
var marker = [];
var polyline;
function initialize()
{
myLatLng = new google.maps.LatLng(37.422104808,-122.0838851);
var test;
var lat = 37.422104808;
var lng = -122.0838851;
var zoom = 18;
var maptype = google.maps.MapTypeId.ROADMAP;
if (!isNaN(lat) && !isNaN(lng))
{
myLatLng = new google.maps.LatLng(lat, lng);
}
var myOptions = {zoom: zoom,center: myLatLng,mapTypeId: maptype};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
infowindow = new google.maps.InfoWindow({});
geoXml = new geoXML3.parser({map: map,infoWindow: infowindow,singleInfoWindow: true,zoom: myGeoXml3Zoom, markerOptions: {optimized: false},createMarker: createMarker});
geoXml.parse('test.kml');
};
var createMarker = function (placemark, doc) {
var markerOptions = geoXML3.combineOptions(geoXml.options.markerOptions, {
map: geoXml.options.map,
position: new google.maps.LatLng(placemark.Point.coordinates[0].lat, placemark.Point.coordinates[0].lng),
title: placemark.name,
zIndex: Math.round(placemark.Point.coordinates[0].lat * -100000)<<5,
icon: placemark.style.icon,
shadow: placemark.style.shadow
});
// Create the marker on the map
var marker = new google.maps.Marker(markerOptions);
if (!!doc) {
doc.markers.push(marker);
}
// Set up and create the infowindow if it is not suppressed
if (!geoXml.options.suppressInfoWindows) {
var infoWindowOptions = geoXML3.combineOptions(geoXml.options.infoWindowOptions, {
content: '<div class="geoxml3_infowindow"><h3>' + placemark.name +
'</h3><div>' + placemark.description + '</div></div>',
pixelOffset: new google.maps.Size(0, 2)
});
if (geoXml.options.infoWindow) {
marker.infoWindow = geoXml.options.infoWindow;
} else {
marker.infoWindow = new google.maps.InfoWindow(infoWindowOptions);
}
marker.infoWindowOptions = infoWindowOptions;
// Infowindow-opening event handler
google.maps.event.addListener(marker, 'click', function()
{
alert(placemark.name);
this.infoWindow.close();
marker.infoWindow.setOptions(this.infoWindowOptions);
this.infoWindow.open(this.map, this);
});
}
placemark.marker = marker;
return marker;
};
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="float: left; width: 70%; height: 100%;"></div>
</body>
</html>
If you use the "afterParse" function to add click listeners to the markers, you can access the data (if you use function closure), example accessing the name:
// assign "useTheData" as the after parse function
var geoXml = new geoXML3.parser({map: map, singleInfoWindow: true, afterParse: useTheData});
geoXml.parse('kmload.kml');
// function to retain closure on the placemark and associated text
function bindPlacemark(placemark, text) {
google.maps.event.addListener(placemark,"click", function() {alert(text)});
}
// "afterParse" function, adds click listener to each placemark to "alert" the name
function useTheData(doc) {
for (var i = 0; i < doc[0].placemarks.length; i++) {
var placemark = doc[0].placemarks[i].polygon || doc[0].placemarks[i].marker || doc[0].placemarks[i].polyline;
bindPlacemark(placemark, doc[0].placemarks[i].name);
}
};
working example
hope it can help ;)
/**
* map
*/
var myLatlng = new google.maps.LatLng(39.980278, 4.049835);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
var map = new google.maps.Map(document.getElementById('mapa'), myOptions);
var infoWindow = new google.maps.InfoWindow();
var markerBounds = new google.maps.LatLngBounds();
var markerArray = [];
function makeMarker(options){
var pushPin = new google.maps.Marker({map:map});
pushPin.setOptions(options);
google.maps.event.addListener(pushPin, 'click', function(){
infoWindow.setOptions(options);
infoWindow.open(map, pushPin);
});
markerArray.push(pushPin);
return pushPin;
}
google.maps.event.addListener(map, 'click', function(){
infoWindow.close();
});
function openMarker(i){
google.maps.event.trigger(markerArray[i],'click');
};
/**
*markers
*/
makeMarker({
position: new google.maps.LatLng(39.943962, 3.891220),
title: 'Title',
content: '<div><h1>Lorem ipsum</h1>Lorem ipsum dolor sit amet<div>'
});
openMarker(0);