4

I am using the example from this webpage to display my maps:

http://wiki.openstreetmap.org/wiki/Google_Maps_Example#More_examples

(Example - Using Google Maps API v3 setting OSM as a base map layer)

However, I need to add markers but I get a blank page. See code below:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>OpenStreetMap with Google Maps v3 API</title>
    <style type="text/css">
        html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        var element = document.getElementById("map");

        /*
        Build list of map types.
        You can also use var mapTypeIds = ["roadmap", "satellite", "hybrid", "terrain", "OSM"]
        but static lists sucks when google updates the default list of map types.
        */
        var mapTypeIds = [];
        for(var type in google.maps.MapTypeId) {
            mapTypeIds.push(google.maps.MapTypeId[type]);
        }
        mapTypeIds.push("OSM");

        var map = new google.maps.Map(element, {
            center: new google.maps.LatLng(-37.372096000,143.919544000),
            zoom: 14,
            mapTypeId: "OSM",
            mapTypeControlOptions: {
                mapTypeIds: mapTypeIds
            }
        });

        var markers = new OpenLayers.Layer.Markers( "Markers" );
        map.addLayer(markers);

        markers.addMarker(new OpenLayers.Marker(lonLat));

        map.setCenter (lonLat, zoom);

        map.mapTypes.set("OSM", new google.maps.ImageMapType({
            getTileUrl: function(coord, zoom) {
                return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
            },
            tileSize: new google.maps.Size(256, 256),
            name: "OpenStreetMap",
            maxZoom: 18
        }));
    </script>
</body>

Please what am I doing wrong..

Improve this question
1
  • Just a general hint (so no real answer): If you use general Webmap frameworks, you are indipendend from service APIs and map providers and can mix/add everything that fits in your case: wiki.openstreetmap.org/wiki/Frameworks#Webmaps With Google Maps, you are tied to their API and Maps (AFAIK at least from a legal perspective)
    – Mapper
    Dec 20, 2013 at 20:09

2 Answers 2

Reset to default
0

you are using OpenLayers markers. OpenLayers markers are used in OpenLayers Map api. Since you are using Google Maps Api, you need to use markers from google map api. so the markers sould be defined as 

var markers = new google.maps.Marker() 
//see https://developers.google.com/maps/documentation/javascript/reference#Marker
Improve this answer
0

Take a look at this and let me know if that is what you are looking for?

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.