I have three layers that I would like to show up on my map, but none of them are showing up. Is there something wrong with my initialize() function? I've made all the correct declarations within the script tag, so I don't know where else the problem would be.
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng (37.80, -122.27);
var mapOptions =
{
zoom: 13,
zoomControl: true,
mapTypeControl: false,
panControl: false,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var image = 'css-js/images/hospitalicon-24.png';
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//Fire Stations
var mapsEngineLayer = new google.maps.visualization.MapsEngineLayer({
layerId: '08042600090929941501-16143158689603361093',
map: map
});
//Hospitals
var mapsEngineLayer1 = new google.maps.visualization.MapsEngineLayer({
layerId: '08042600090929941501-08112974690991164587',
map: map
});
//Police Stations
var mapsEngineLayer2 = new google.maps.visualization.MapsEngineLayer({
layerId: '08042600090929941501-11613121305523030954',
map: map
});
}
Related
The code I found for this google map seems to work fine but, The initial marker isn't showing up when I load the map. The map is centered on the initial location but with no Marker. I'm using the php to populate the initial Lat and Lon. Also is there a way to remove the old marker once dragged to a new location?
// global "map" variable
var map = null;
var marker = null;
// popup window for pin, if in use
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150,50)
});
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
google.maps.event.trigger(marker, 'click');
return marker;
}
function initialize() {
// the location of the initial pin
var myLatlng = new google.maps.LatLng(<?=$a1[lat]?>,<?=$a1[lon]?>);
// create the map
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(<?=$a1[lat]?>, <?=$a1[lon]?>),
draggable: true
});
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// establish the initial marker/pin
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(<?=$a1[lat]?>, <?=$a1[lon]?>),
draggable: true
});
// establish the initial div form fields
formlat = document.getElementById("latbox").value = myLatlng.lat();
formlng = document.getElementById("lngbox").value = myLatlng.lng();
// close popup window
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// removing old markers/pins
google.maps.event.addListener(map, 'click', function(event) {
//call function to create marker
if (marker) {
marker.setMap(null);
marker = null;
}
// Information for popup window if you so chose to have one
marker = createMarker(event.latLng, "name", "<font color=#660000><b><?=$a1[name]?></b><br>"+event.latLng);
var image = '/images/googlepins/pin2.png';
var myLatLng = event.latLng ;
/*
var marker = new google.maps.Marker({
by removing the 'var' subsquent pin placement removes the old pin icon
*/
marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title:"Property Location"
});
// populate the form fields with lat & lng
formlat = document.getElementById("latbox").value = event.latLng.lat();
formlng = document.getElementById("lngbox").value = event.latLng.lng();
});
}
//]]>
The Map-Tag needed to be added. I had someone try help me but, when his answer created more problems he removed his answer and then down voted my question.... Thanks Buddy.. Here is where the Map-Option needed to go.
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// establish the initial marker/pin
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(<?=$a1[lat]?>, <?=$a1[lon]?>),
map: map, /// <-------This is what I added and seems to have fixed my problem
draggable: true,
});
Hi,
that's normal code at Google
var map;
function initialize()
{
var latLng = new google.maps.LatLng(41.079120183660486, 28.994637246032653);
var mapOptions = {
center: latLng,
zoom: 8,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
});
google.maps.event.addListener(map, 'click', function (event) {
//map.setZoom(9);
//map.setCenter(marker.getPosition());
});
}google.maps.event.addDomListener(window, 'load', initialize);
and I want to multiply marker from my DB and I can't do it. I searched in site but always result is gray map.
And my code is:
<script type="text/javascript">
var map;
var latLng;
function initialize() {
var mapOptions = {
//center: latLng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var markers = [];
#foreach (var item in Model)
{
#:markers.push("#item.map")
// item.map content coming like this : 41.079120183660486,28.994637246032653
}
for (var i = 0; i < markers.length; i++) {
var marker = new google.maps.Marker({
position: latLng,
map: map,
});
}
//google.maps.event.addListener(map, 'click', function (event) {
// //map.setZoom(9);
// map.setCenter(marker.getPosition());
// //placeMarker(event.latLng);
//});
}
google.maps.event.addDomListener(window, 'load', initialize);
I can't add markers. I think missing a lot of things? I really need your opinion. Thanks
Based on your code, it looks like you're adding markers to the same lat/lng. The code below adds a few markers in a loop.
<script>
var map;
var center = new google.maps.LatLng(39.715, -84.103);
$(document).ready(initialize);
function initialize() {
// Create map
var mapOptions = {
zoom: 10,
center: center,
panControl: false,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map_canvas')[0], mapOptions);
for (var ii = 0; ii < 5; ii++) {
var lat = center.lat() + (0.1 * ii);
var lng = center.lng() + (0.1 * ii);
var loc = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: loc,
map: map
});
}
}
</script>
I'm quite new to Google Maps API 3 and can't figure out the following error: All clicks on my markers open the infowindow on the same marker (bad), but with different text (good).
I'm pulling the data out of wordpress custom meta data into an xml, which i then parse; What makes me wondering is the fact that generating the markers works this way, but adding the listener for the infowindow obviously fails.
Any ideas what's happening here?
Live demo at:
http://goo.gl/9seK9
Code
$(document).ready(function(){
var infowindow;
var latlng = new google.maps.LatLng(47.580231,13.771362);
var settings = {
zoom: 8,
center: latlng,
panControl: true,
zoomControl: true,
mapTypeControl: true,
disableDefaultUI:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
jQuery.get("http://rundumadum.eu/de/wp-content/themes/rud/rundumadumMap.xml", {}, function(data) {
var xmllength = $(data).find("mymarkers").children().size();
var supermarkers = [];
jQuery(data).find("mymarker").each(function() {
var myid = $(this).find("id").text();
var mytitle = $(this).find("title").text();
var mylink = $(this).find("link").text();
var mylocation = $(this).find("location").text();
var mysplits = mylocation.split(",");
var mylat = mysplits[0];
var mylng = mysplits[1];
var mylatlng = new google.maps.LatLng(parseFloat(mylat), parseFloat(mylng));
var myinfo = ""+mytitle+"";
var marker = createMyMarker(mytitle, myinfo, mylink, mylatlng);
});
});
function createMyMarker(mytitle, myinfo, mylink, mylatlng) {
marker = new google.maps.Marker({
position: mylatlng,
map: map,
clickable:true,
icon:'http://rundumadum.eu/de/wp-content/themes/rud/static/img/markerTest.png',
html: ''+mytitle+''
});
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: myinfo});
infowindow.open(map, marker);
});
}
return marker;
});
Would be grateful for any ideas ...
One thing I notice is that the marker you are creating in createMyMarker is not declared using var marker, so it looks like you are inadvertently creating a global marker reference. Also, it appears that the statement: return marker is actually after the end of your createMyMarker function, although that may just be a typo that was introduced when you set up your code sample in your question.
At any rate, I believe if you change the code in createMyMarker to declare the marker using var marker within that function, it will give you better results.
I want to be able to center zoom on all my polylines for my site.
Also, I'd like to add markers to each of these new coordinate pairs. I've seen lots of examples for multiple markers and multiple plygons, but never for polylines and I can't get around this problem...
I've seen some very helpful pages like this one: http://salman-w.blogspot.com/2009/03/zoom-to-fit-all-markers-polylines-or.html
But most of them assume some kind of knowledge beforehand, whereas I don't know much.
This is my code:
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(45.397, 5.644);
var centerLatLng = new google.maps.LatLng(35.71,-1.905);
var myOptions = {
zoom: 5,
center: centerLatLng,
scrollwheel: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(45.397, 5.644),
new google.maps.LatLng(28.713383,-17.905781),
new google.maps.LatLng(20.713383,-19.905781),
new google.maps.LatLng(25.713383,-29.905781),
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#dddd00",
strokeOpacity: 1.0,
strokeWeight: 3
});
flightPath.setMap(map);
}
</script>
Thanks in advance, I am very new to googles API and to this site.
Try adding positions of your points to a bounds object and then using fitBounds, something like this:
var bounds = new google.maps.LatLngBounds();
var point1 = new google.maps.LatLng(45.397, 5.644);
bounds.extend(point1);
var point2 = new google.maps.LatLng(28.713383,-17.905781);
bounds.extend(point2);
var point3 = new google.maps.LatLng(20.713383,-19.905781);
bounds.extend(point3);
var point4 = new google.maps.LatLng(25.713383,-29.905781);
bounds.extend(point4);
map.fitBounds(bounds);
If I already displayed a google map marker.
How could I change its icon using Jquery?
Thanks in advance.
Actually Google Maps API has supported method to setImage for marker. I get this code from Google Code PlayGround (http://code.google.com/apis/ajax/playground/#custom_marker_image_v3)
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var latLng = new google.maps.LatLng(37.4419, -122.1419);
var map = new google.maps.Map(mapDiv, {
center: latLng,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var image = 'http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png';
var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var beachMarker = new google.maps.Marker({
position: latLng,
map: map,
icon: image
});
}