[Google Maps API v3] nOOb Question - API 3 - Markers not showing

Thu, 02 Jun 2011 07:24:52 -0700 

I have tried to show 3 different types of markers, in the future we would 
like the makers and their data to be listed from an external file, but first 
things first.

Even the Hello World doesn't work, it is included in the code.

We want a custom styled map, (shown in demo), with some custom markers (also 
in the demo), and a normal marker just to make sure.

Demo page - http://www.getonmyland.com/dev/gmapdev1.htm

[code]

<!DOCTYPE html> 
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, 
user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>

<title>Google Map Dev</title>

<script type="text/javascript" 
src="http://maps.google.com/maps/api/js?sensor=false";></script>  
<script> 

var map;
var getonmyland = new google.maps.LatLng(54.500000, -4.500000);
 
var MY_MAPTYPE_ID = 'goml';
 
function initialize() {

  var mapOptions = {
    zoom: 5,
    center: getonmyland,
mapTypeControl: false,
streetViewControl: false,
    mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
    },
    mapTypeId: MY_MAPTYPE_ID
    };
 
  var map = new google.maps.Map(document.getElementById("map_canvas"), 
mapOptions);
      
  var styledMapOptions = {
    name: "Get On My Land"
  };
 
  var jayzMapType = new google.maps.StyledMapType(stylez, styledMapOptions);
     map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType);
};
 
   var marker = new google.maps.Marker({
      position: new google.maps.LatLng(51.451515, -0.190618), 
      map: map, 
      title:"Hello World!"
  }); 
 var marker = new google.maps.Marker({
        position: new google.maps.LatLng(51.451515, -0.190618), 
        title: "Get on my land HQ",
icon: "/images/hq_icon.png",
listing: "<div>Content goes here</div>",
map: map
    });  
 
 
  var image = '/images/hq_icon.png';
  var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
  var beachMarker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
  });
  



 var stylez = [
    {
    featureType: "water",
    elementType: "all",
    stylers: [
      { visibility: "simplified" },
      { hue: "#365128" },
  { invert_lightness: "true" }
    ]
  },{
    featureType: "landscape",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "transit",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "administrative",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "administrative.locality",
    elementType: "all",
    stylers: [
      { visibility: "on" }
    ]
  },{
    featureType: "landscape",
    elementType: "geometry",
    stylers: [
      { visibility: "off" },
      { hue: "#d6f284" },
      { saturation: "99" }
    ]
  }
  ];


</script> 

</head>

<body onload="initialize()"> 

  <div id="map_canvas" style="width: 100%; height: 100%"></div> 

  
</body>
</html>

[/code]

-- 
You received this message because you are subscribed to the Google Groups 
"Google Maps JavaScript API v3" group.
To view this discussion on the web visit 
https://groups.google.com/d/msg/google-maps-js-api-v3/-/cXlqeVpka2NhcVVK.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/google-maps-js-api-v3?hl=en.

Reply via email to